nwutils / nw-angular-example

An example of integrating Angular with NW.js

NW.js Angular CLI example

An example of running Angular with NW.js.

Getting started

1. Install Volta
2. npm i to install node modules
3. npm run lint to lint code
4. npm run test:unit to run unit tests (figure out how to launch nwjs via karma)
5. npm run test:e2eto test app via Selenium (figure out how to do this)
6. npm start to run in development mode
7. npm run dev:ng to run only Angular in a browser (add if (window.nw) {} conditionals to skip desktop specific code)
8. npm run build to build desktop app

Alternatives

• NW.js + Angular-CLI + Better-SQLite3 - A fork of this repo with an example of SQLite added.
• NW.js + Angular 1.2 - From 2014
• NW.js + Angular 1.4 - From 2015

nw-angular-example's Issues

option to see app on web browser

Hello, first of all thank you for providing this template. Can you also add an option like npm run start:web so I have the ability to see my angular app on the web browser?

npm start failed after npm install

[email protected] start: concurrently "npm run start:web" "wait-on http://localhost:8964 && nw ."
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

how to use angular 15?

i want to create new application ,base angular new version(v15)

1. npm install --save-dev nw@sdk concurrently
2. "start": "concurrently "ng serve --port=8964" "nw ."", in /package.json
3. add this code to /package.json.

"main": "http://localhost:8964",
"node-remote": "http://localhost:8964",
"window": {
  "width": 960,
  "height": 600,
  "min_width": 700,
  "min_height": 500,
  "icon": "your-app-logo.png"
},

4. add this code to src/index.html

<script>
  window.nw_global = window.global;
  window.global = undefined;
</script>

5. polyfills.ts is removed on angular 15. so?
6. add this code to /package.json

  "build": {
    "nwVersion": "v0.55.0",
    "nwFlavor": "normal",
    "targets": [
      "zip",
      "nsis7z"
    ],
    "files": [
      "**/*"
    ],
    "excludes": [
      "e2e/**/*",
      "src/**/*",
      ".editorconfig",
      ".gitignore",
      "angular.json",
      "browserslist",
      "karma.conf.js",
      "package-lock.json",
      "screenshot.png",
      "tsconfig.app.json",
      "tsconfig.json",
      "tsconfig.spec.json",
      "tslint.json"
    ],
    "strippedProperties": [
      "ManifestComments",
      "node-remote",
      "scripts",
      "devDependencies",
      "build"
    ],
    "overriddenProperties": {
      "main": "dist-ng/index.html",
      "node-remote": ""
    },
    "win": {
      "icon": "assets/icon-256.ico"
    },
    "mac": {
      "icon": "assets/icon.icns"
    },
    "nsis": {
      "icon": "assets/icon-256.ico",
      "unIcon": "assets/icon.ico",
      "languages": [
        "English"
      ],
      "diffUpdaters": false,
      "hashCalculation": true
    }
  }

pls help me, setp 5 and Is there anything else that needs to be configured?

How to add sqlite3??

I tried to manually compile sqlite3 and add in in the project using nw-gyp as described in the sqlite3 installation instructions for node-webkit from here.

Many of the tutorial say that to use sqlite3, nw and angular together I have to approach like below
Angular -> Express -> sqlite3
Where Angular handles the UI part, using express I create an API and the api endpoints performs the database read write operations.

I created an express server in the project and started it by adding "node-main":"path/to/server-startup.js" in the package.json. Everything works fine until I add sqlite3. The server starts, I can call the api end points from Angular using HttpClient and many other stuff. But as soon as I add sqlite3 in my express app using nw-gyp, i get this error.

changes in package.json

"node-main": "api/index.js",
"dependencies": {
    "express": "^4.17.1",
    "sqlite3": "^4.2.0"
  }
"devDependencies:{
    "nw": "0.46.0-sdk",
}

Minimal code for api/index.js

const sqlite3 = require("sqlite3");

sqlite3.Database("../customeronly1.database", (err) => {
  if (err) {
    console.log(err);
  } else {
    console.log("connected");
  }
});

api folder is at the same level as package.json

Any help would be appreciated. Thanks

Unit tests are failing

It is caused when window.nw is called. Do you have a estimation to fix it?

Chrome 75.0.3770 (Windows 10.0.0) AppComponent should create the app FAILED
    TypeError: Cannot read property 'process' of undefined
    error properties: Object({
        ngDebugContext: DebugContext_({
            view: Object({
                def: Object({
                    factory: Function,
                    nodeFlags: 33603585,
                    rootNodeFlags: 33554433,
                    nodeMatchedQueries: 0,
                    flags: 0,
                    nodes: [Object({
                        nodeIndex: 0,
                        parent: null,
                        renderParent: null,
                        bindingIndex: 0,
                        outputIndex: 0,
                        checkIndex: 0,
                        flags: 33554433,
                        childFlags: 49152,
                        directChildFlags: 49152,
                        childMatchedQueries: 0,
                        matchedQueries: Object({  }),
                        matchedQueryIds: 0,
                        references: Object({  }),
                        ngContentIndex: null,
                        childCount: 1,
                        bindings: [  ],
                        bindingFlags: 0,
                        outputs: [  ],
                        element: Object({
                            ns: '',
                            name: 'app-root',
                            attrs: [  ],
                            template: null,
                            componentProvider: Object({
                                nodeIndex: 1,
                                parent: <circular reference: Object>,
                                renderParent: <circular reference: Object>,
                                bindingIndex: 0,
                                outputIndex: 0,
                                checkIndex: 1,
                                flags: 49152,
                                childFlags: 0,
                                directChildFlags: 0,
                                childMatchedQueries: 0,
                                matchedQueries: Object,
                                matchedQueryIds: 0,
                                references: Object,
                                ngContentIndex: -1,
                                childCount: 0,
                                bindings: Array,
                                bindingFlags: 0,
                                outputs: Array,
                                ...
    at <Jasmine>
    at new AppComponent (src/app/app.component.ts:13:44)
    at createClass (node_modules/@angular/core/fesm2015/core.js:24578:1)
    at createDirectiveInstance (node_modules/@angular/core/fesm2015/core.js:24400:1)
    at createViewNodes (node_modules/@angular/core/fesm2015/core.js:35006:1)
    at createRootView (node_modules/@angular/core/fesm2015/core.js:34878:1)
    at callWithDebugContext (node_modules/@angular/core/fesm2015/core.js:36407:1)
    at Object.debugCreateRootView [as createRootView] (node_modules/@angular/core/fesm2015/core.js:35644:1)
    at ComponentFactory_.create (node_modules/@angular/core/fesm2015/core.js:23542:1)
    at initComponent (node_modules/@angular/core/fesm2015/testing.js:3409:1)

How do you import a node package like os or fs?

I see that you can do it with:
window.nw.require()
You can close this now. Thanks