Can't resolve all parameters for services or components when using NW js with ANGULAR 6

[ef32]

======== TEMPLATE BUG FORM ========

NWJS Version : Latest (0.33.3)
Operating System : Windows

Expected behavior

It shouldnt matter if angular has upgraded to 6. It should load Application

Actual Behaviour

Load Angular application 6 on web , it works but if you attempt to load using nwjs latest, for all classes error is Can't resolve all parameters for 'A component' or 'A service'. Angular 5 works without an issue, i upgraded the same project to angular 6 , works on web but not on nw js.

[ef32]

@rogerwang is NWjs compatible with ng 6 so we know what next? Does it require polyfill

[ef32]

@rogerwang please can you respond to this, my company strongly depends on NWJS and we need this resolved asap . If there is no answer , please inform so we can roll back to angular 5

[ef32]

@rogerwang Angular 6 applies a polyfill of corejs/es7/ reflect. Is that not compatible with NWJS anymore?

[rogerwang]

It should be supported. Could you please provide a sample to reproduce the issue? Anything runs well in the browser should run well in NW.

…

On Thu, Sep 20, 2018, 5:32 PM Tam Arah ***@***.***> wrote: @rogerwang <https://github.com/rogerwang> Angular 6 applies a polyfill of corejs/es7/ reflect. Is that not compatible with NWJS anymore? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6804 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAKGGf26aPsgL5guxuaGXoxv5Dm4KAqHks5uc2CegaJpZM4WuKsE> .

[ef32]

@rogerwang i have created a repository with a sample application in angular 6 to reproduce the problem as our original app is large. the kiosk configuration is there too . If you go into my profile you will find the repository called sample-nwjs. thank you for your response, my stakeholders are seriously on my case and we are working tirelessly as i respond to you , for a workaround

[rogerwang]

I have downloaded your sample, but both running ng serve and ng build in Turf give the following error:

Could not find module "@angular-devkit/build-angular" from "C:\\tests\\sample-nwjs\\sample\\Turf".
Error: Could not find module "@angular-devkit/build-angular" from "C:\\tests\\sample-nwjs\\sample\\Turf".
    at Object.resolve (C:\Users\roger\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\core\node\resolve.js:141:11)
    at Observable.rxjs_1.Observable [as _subscribe] (C:\Users\roger\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\src\architect.js:132:40)
    at Observable._trySubscribe (C:\Users\roger\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\Observable.js:43:25)
    at Observable.subscribe (C:\Users\roger\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\Observable.js:29:22)
    at DoOperator.call (C:\Users\roger\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\operators\tap.js:29:23)
    at Observable.subscribe (C:\Users\roger\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\Observable.js:24:22)
    at C:\Users\roger\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\util\subscribeTo.js:22:31
    at Object.subscribeToResult (C:\Users\roger\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\util\subscribeToResult.js:7:45)
    at MergeMapSubscriber._innerSub (C:\Users\roger\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\operators\mergeMap.js:75:38)
    at MergeMapSubscriber._tryNext (C:\Users\roger\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\operators\mergeMap.js:72:14)

[ef32]

@rogerwang I just did the same and it compiled . see shot below:

maybe you should run npm install first. If you look up the package.json file its there.

[rogerwang]

I can reproduce your issue now. But it runs well if I run nw.exe --url=http://localhost:4200. So I guess the root cause seems to be that Angular defines require() somehow and it conflicts with the require() defined in NW to load Node modules. See more at https://github.com/nwjs/nw.js/wiki/faq-name-conflict

[Zenohactagamat]

If this can help I had a similar problem this morning :

• Angular CLI 6.2.3 fresh install
• Nw.js 0.32.4 fresh install
• ng new my-app
• ng serve

My package.json at the moment :

"main": "http://localhost:4200",
"node-remote" : "http://localhost:4200",
"name": "my-app",
"description": "My app",
"version": "0.1.0",
"window": {
"title": "node-webkit demo",
"icon": "favicon.ico",
"frame": false,
"position": null,
"width": 2960,
"height": 1050,
"min_width": 2960,
"min_height": 1050,
"always_on_top": false
},
...

I fixed my problem by removing the node-remote option. (fortunately I don't need nodejs stuff for my project)

[ef32]

If this can help I had a similar problem this morning :

• Angular CLI 6.2.3 fresh install
• Nw.js 0.32.4 fresh install
• ng new my-app
• ng serve

My package.json at the moment :

"main": "http://localhost:4200",
"node-remote" : "http://localhost:4200",
"name": "my-app",
"description": "My app",
"version": "0.1.0",
"window": {
"title": "node-webkit demo",
"icon": "favicon.ico",
"frame": false,
"position": null,
"width": 2960,
"height": 1050,
"min_width": 2960,
"min_height": 1050,
"always_on_top": false
},
...

I fixed my problem by removing the node-remote option. (fortunately I don't need nodejs stuff for my project)

@Zenohactagamat unfortunately we need nodejs modules in our project. @rogerwang i will look at thelink provided and get back to you now if that can solve our issues.

[ef32]

@rogerwang when we removed node-remote option, it worked but we lost access to the nodejs functionalities, including nw object. I even added the script as specified as alternative in the link, with node-remote specified and it did not work. any suggestions please?

[rogerwang]

My suggestion is resolving the name conflict. See more information in the link.

[ef32]

@rogerwang is there an alternative to specifying node-remote ? maybe that could solve the issue at hand

[ef32]

For any one who uses NWJS with Angular 6 and requires Node capabilities like i do, i was able to rectify this after @rogerwang referred me to this link. However, the suggestions there most certainly may not work if Node functionality is required along side angular; the conflict in both Node REQUIRE definitions (Angular 6 and NWJS) occurs in the angular compiler prior to loading the app so adding the script in your index.html file or polyfill.ts ordinarily will not rectify the issue. To solve this, in your nw manifest, do not remove the node-remote field or nodejs flag, add a new field bg-script and pass a js file with the workaround expressions specified in the link above. In your Angular app, re assign the require function in your nw object. That solves it. See Example below

removeRequire.js

window.requireNode = window.require;
window.require = undefined;

NW package.json

{"name": "angular-app",
  "version": "0.0.0",
  "main": "http://localhost:4200/",
  "node-remote": "http://localhost:4200",
  "bg-script": "removeRequire.js",
  "window": {
    "toolbar": false,
    "title": "App",
    "width": 550,
    "height": 870
  },
  "scripts": {
    "start": "nw ."
  }
}

Angular 6 app polyfill.ts

declare var nw: any;
const isNWjsAvailable = typeof (nw) === 'object';

(function(inkioskMode: boolean) {
    if (inkioskMode) {
        nw.require = nw.global.require =  nw.global.requireNode;
        nw.global.requireNode = undefined;
    }
}(isNWjsAvailable));

Note

This is useful if you require node capabilities through the nw kiosk. If It isnt needed, just simply remove the node-remote field. Also, the script provided for the bg-script field should be in the same folder as your nw manifest. It may also not be needed if building or serving AOT.

@rogerwang thanks for pointing me in the right direction. this was one head ache 👍

[TheJaredWilcurt]

Here is a tutorial for the latest Angular-CLI and NW.js

• https://dev.to/thejaredwilcurt/angular-cli-and-nwjs-for-development-49gl

[kriefsacha]

Hi , how do you do to build the app when it's done ? I used nwjs-builder-phoenix but the ng serve command is not running so i have an error that localhost is not available.

[jonnathanlopes]

Aqui está um tutorial para as últimas Angular-CLI e NW.js

• https://dev.to/thejaredwilcurt/angular-cli-and-nwjs-for-development-49gl
  your example generates files with source code with nwjs. Reason why I abandoned Electron to use nwjs is to hide the source code ..