Nativescript-angular: Issues upgrading to angular v9

[cdmistman]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 6.7.4
• Cross-platform modules: 6.5.4
• Android Runtime: 6.5.1
• Plugin(s): angular, bootstrap, fs, js-yaml, ngx-bootstrap, reflect-metadata, rxjs, tslib, zone.js
• NativeScript-Angular: @nativescript/angular ^9.0.0
• Angular: ~9.1.0

Describe the bug

I have 2 issues, only one of them is happening repeatedly.

Originally, after following the update guide, one of my components was not showing (although I believe that's due to not using --env.aot)

The new bug is Unable to create application when I try to run. In the cli, it states that the error is due to the first line in app.scss:

@import "~@nativescript/theme/css/core.css";

However, on my phone, it's pointing to bundle.js:37:144. Here's what that looks like:

/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__("../node_modules/nativescript-dev-webpack/node_modules/webpack/buildin/global.js")))ndefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefined

Note that the first "u" is missing in the first undefined, it's the only character on line 36

To Reproduce

I came across this by following the aforementioned guide

Expected behavior
The app should compile and run without any issues

Sample project

I can try to provide a sample project soon if needed

Additional context

I'm also having issues with vscode not properly using my tsconfig.json _after_ following the update instructions. Before attempting the update, there were no issues.

I also had to switch from npm package nativescript-angular to @nativescript/angular

[NathanWalker]

I believe this might be related to 2.0 theme. Is it possible to use nativescript-core-theme: ~1.0.4 ?

I'm going to loop in @crowmagnumb - I believe you had seen this recently; when possible mind sharing what conclusions you found?

[cdmistman]

I switched from "@nativescript/core": "^2.3.3" to "nativescript-theme-core": "~1.0.4", but I'm still getting the same error. bundle.js still has the undefined prints. I'll work now on getting a repro

[crowmagnumb]

Tihe problem for me is a change in the webpack.config.js (s)css hot-loader from nativescript-dev-webpack npm module. The newest version has ...

{
    loader: "nativescript-dev-webpack/css2json-loader",
    options: { useForImports: true }
}

... which causes the problem, if you revert it back to what it was in a recent previous release ...

{
    loader: "css-loader",
    options: { url: false }
}

... then it works fine. I submitted an issue to that repo.

[cdmistman]

I was able to reproduce the first bug (where the component doesn't show up) here

It happens when I run with the --env.aot flag. I followed the instructions exactly so I'm curious if the other bug will show up if I change anything else.

My project is a code-sharing project with the ns schematics later so that's how I repro'd the bug, I'm not sure if this will happen with just ns-angular. I didn't actually do anything with the angular part, however, so it probably won't even run correctly.

edit: I also included the log output after the node modules were installed, since there's a very curious error in there

[cdmistman]

@crowmagnumb unfortunately on my original app that doesn't solve the undefined prints in the bundle.js (which i can try to repro if needed)

[crowmagnumb]

Just checking, did you notice there were two sections, one for if you use css and the other for scss? You need to change the correct one (or both I suppose).

[crowmagnumb]

@cdmistman Oh, I also had the first problem too in one of my apps and I had to turn off buildOptimizer in the angular.json file (set it to false). It was a VERY complicated issue that I couldn't quite nail down to what was causing it so I havn't reported it as an issue yet. But on a lark I tried turning off the above parameter and it magically worked. I would be interested if that works for you here too.

[cdmistman]

@crowmagnumb thank you so much for helping!

I tried disabling the buildOptimizer flag in angular.json, unfortunately it doesn't work in the original app. I tried it with and without the css loader fix you suggested

[crowmagnumb]

Ugh sorry. This stuff is so frustrating because it can be so many things and it just keeps us from actually coding. I'm sorry. :(

[NathanWalker]

@crowmagnumb @cdmistman I'm going to look into this 👍 I'll start with the sample project posted by Ken above.

[plackowski]

Same issue here. My code sharing app after migrating to ng 9 is not working since April. The same issue with "undefined" miessages in build.js. Tried with buildOptimizer: false also as above.

It would be great to get any example (even simplest) of code sharing app. If of course there is any working example..

My 'closed' issue: https://github.com/NativeScript/nativescript-angular/issues/2152

[crowmagnumb]

I have a repot here that you can see working. It is SUPER bare-bones. You can compare with yours, play with it, fork it, add to it, whatever. I would be very happy to make this a repo for which we can easily demonstrate issues with NS as they arise.

[plackowski]

Great news @crowmagnumb. Thx for sharing, I added one issue to your repo, because I can't run it https://github.com/animalus/shared-lib-example/issues/1

Maybe is there any option to share sandbox for not libraries? Just web/mobile app? Just ask ;)

[crowmagnumb]

Oops. Sorry. @Arystosedes. I think I fixed it.

[Ziggymusician]

Hi I have the same error for both Android and iOS... when I run tns run ios I get

Terminating app due to uncaught exception NativeScript encountered a fatal error: SyntaxError: Unexpected identifier 'ndefinedundefinedundefinedun...

Then i ran tns debug ios --debug-brk and I got a clearer Error Stack Trace:

Fatal JavaScript exception - application has been terminated.
Native stack trace:
1 0x108c0702e NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState, JSC::Exception, bool)
2 0x108c58f94 -[TNSRuntime executeModule:referredBy:]
3 0x1084ed003 main
4 0x7fff5227ec25 start
5 0x2
JavaScript stack trace:
file: node_modules/@nativescript/angular/__ivy_ngcc__/zone-js/dist/zone-nativescript.js:32:0
at file: node_modules/@nativescript/angular/__ivy_ngcc__/zone-js/dist/zone-nativescript.js:645:1
at file: node_modules/@nativescript/angular/__ivy_ngcc__/zone-js/dist/zone-nativescript.js:9:61
at file: node_modules/@nativescript/angular/__ivy_ngcc__/zone-js/dist/zone-nativescript.js:12:1
at ../node_modules/@nativescript/angular/__ivy_ngcc__/zone-js/dist/zone-nativescript.js(file:///app/vendor.js:123352:34)
at __webpack_require__(file: src/webpack/bootstrap:74:0)
at file: node_modules/@nativescript/angular/__ivy_ngcc__/platform-common.js:6:8
at ../node_modules/@nativescript/angular/__ivy_ngcc__/platform-common.js(file:///app/vendor.js:118192:34)
at __webpack_require__(file: src/webpack/bootstrap:74:0)
at ../node_modules/@nativescript/angular/__ivy_ngcc__/index.js(file: node_modules/@nativescript/angular/__ivy_ngcc__/index.js:6:17)
at __webpack_require__(file: src/webpack/bootstrap:74:0)
at ./app/app.module.tns.ts(file:///app/bundle.js:707:98)
at __webpack_require__(file: src/webpack/bootstrap:74:0)
at ./main.tns.ts(file: src/main.tns.ts:1:106)
at __webpack_require__(file: src/webpack/bootstrap:74:0)
at checkDeferredModules(file: src/webpack/bootstrap:43:0)
at webpackJsonpCallback(file: src/webpack/bootstrap:30:0)
at anonymous(file:///app/bundle.js:2:61)
at<…>
JavaScript error:
file: node_modules/@nativescript/angular/__ivy_ngcc__/zone-js/dist/zone-nativescript.js:32:0: JS ERROR Error: Zone already loaded.
(CoreFoundation) * Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Error: Zone already loaded.
at
file: node_modules/@nativescript/angular/__ivy_ngcc__/zone-js/dist/zone-nativescript.js:32:0
at file: node_modules/@nativescript/angular/__ivy_ngcc__/zone-js/dist/zone-nativescript.js:645:1
at file: node_modules/@nativescript/angular/__ivy_ngcc__/zone-js/dist/zone-nativescript.js:9:61
at file: node_modules/@nativescript/angular/__ivy_ngcc__/zone-js/dist/zone-nativescript.js:12:1
at ../node_modules/@nativescript/angular/__ivy_ngcc__/zone-js/dist/zone-nativescript.js(file:///app/vendor.js:123352:34)
at __webpack_require__(file: src/webpack/bootstrap:74:0)
at file: node_modules/@nativescript/angular/__ivy_ngcc__/platform-common.js:6:8
at ../node_modules/@nativescript/angular/__ivy_ngcc__/platform-common.js(file:///app/vendor.js:118192:34)
at __webpack_require__(file: src/webpack/bootstrap:74:0)
at ../node_modules/@nativescript/angular/__ivy_ngcc__/index.js(file: node_modules/@nativescript/angular/__ivy_ngcc__/index.js:6:17)
at __webpack_require__(file: src/webpack/bootstrap:74:0)
at ./app/app.module.tns.ts(file:///app/bundle.js:707:98)
at __webpack_require__(file: src/webpack/bootstrap:74:0)
at ./main.tns.ts(file: src/main.tns.ts:1:106)
at __webpack_require__(file: src/webpack/bootstrap:74:0)
at checkDeferredModules(file://<…>

Then I went to the node_modules folder path:

@nativescript -> angular (folder)

And found what is causing the issue... there is a __ivy_ngcc__ folder there which contains the same packages as the parent folder (@nativescript -> angular)... I have no clue how that __ivy_ngcc__ folder gets created... but zone-js exists in both the parent folder and that folder hence why it throws "Zone already loaded.". Also the package.json has some strange JSON variables pointing to that folder:

"main_ivy_ngcc": "__ivy_ngcc__/index.js",
"main": "index.js",

"__processed_by_ivy_ngcc__": {
"main": "9.1.11",
"typings": "9.1.11"
}

And a lot of variables starting with underscores... So how do I fix this? do I delete that __ivy_ngcc__ folder and update the package.json accordingly?

[plackowski]

I have the same errors.. :(.

[NathanWalker]

The ivy_ngcc is normal and expected -that actually confirms it's running on Ivy. The error mentioned JS ERROR Error: Zone already loaded. often occurs if a package or plugin did not get properly processed by ngcc. Do you have the postinstall hook in place and have you cleaned/rebuilt your project after adding any other dependencies to ensure ngcc processed everything? Additionally the ngcc.config.js plays important role here. Lastly, feel free to share project or shoot email to [email protected] and we can help unblock you.

We just helped unblock another project and can reference this PR as similar things could be at play in your projects:
https://github.com/SchoolSquirrel/SchoolSquirrel/pull/4/files

[Ziggymusician]

Okay cool, thanks... I will try email with the project.

[armackey]

same

[NathanWalker]

@cdmistman @crowmagnumb We have identified the cause of undefinedundefined errors from the css2json-loader - they were coming from the sourcemap handling. We have a fix for it published in the latest @nativescript/webpack 2.0.0-alpha.3 version. This is published as alpha as scoping webpack also required a cli update so nativescript@rc includes compatibility with the new scoped packages which contain the fixes as well as full updates across the board to all webpack plugins.

However I wouldn't recommend trying to update your projects to these just yet (we are confirming against several internal projects ourselves with these alpha's and rc versions) as we are working on an Angular 10 blog post with instructions on how to update to the very latest of everything by next week. I will post back here once the blog is out which provides clear instructions on how to use the latest versions containing all the fixes.

[Arslan-Munir]

@NathanWalker I am facing some issues related to webpack and compiling the project in NS and Angular shared project.

I mentioned the details and some fixes to the problems that I face during project creation and compilation here at the NS Slack channel.
At NS Slack Channel

If you could please check the slack channel and tell me about the approaches and solutions that I apply to the project. It Would be helpful to continue further.

Also, I try with your above-mentioned alpha solution by installing @nativescript/webpack 2.0.0-alpha.3 version.
After installing this package, a new webpack.config.js file has been created.

But now when I runtns run android it throws error CleanWebpackPlugin is not a constructor at line 354.
Any help related to the issues will be appreciated.

[sr3dna]

@Arslan-Munir I also got the same '_CleanWebpackPlugin is not a constructor_' error message. This error message is gone after I followed the instruction given in the build warning message regarding to updating to the latest webpack.config.js file.

The warning message looks like this: 'Note: webpack.config.js is different than the suggested @nativescript/webpack config at /Users/{username}/{projectpath}/node_modules/@nativescript/webpack/templates/webpack.angular.js.
If you have build trouble you can update to latest config using "./node_modules/.bin/update-ns-webpack --configs" command.

[rickwalking]

After updating to Angular 9, it seems like It doesn't recognise imports inside app.scss, I'm using platform specific scss files. This error is showing when using tns android:
ERROR in ./app.scss Module build failed (from ../node_modules/css-loader/dist/cjs.js): Error: Can't resolve './platform.scss'