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. :(