Angular flavor crashes after splash

[rynop]

Environment

$ tns info
✔ Component nativescript has 6.1.0 version and is up to date.
✔ Component tns-core-modules has 6.1.0 version and is up to date.
✔ Component tns-android has 6.1.0 version and is up to date.
✔ Component tns-ios has 6.1.0 version and is up to date.

$ node --version
v10.16.0

Describe the bug

master (https://github.com/NativeScript/NativeScript/commit/ca02ff1aedd76a1384bdbbd34d6f1e10286bc356) of tns-core-modules causes app crash immediately after launch via tns run. Splash screen shows, then immediate crash without any error in the logs.

To Reproduce

$ node --version
v10.16.0
$tns --version
6.1.0
$ git clone https://github.com/NativeScript/NativeScript
$ tns create v6test --ng --appid com.rynop.v6test
$ cd v6test
$ npm install --save ../NativeScript/tns-core-modules
+ [email protected]
$ grep tns-core package.json
    "tns-core-modules": "file:../NativeScript/tns-core-modules",
$ cd ../NativeScript && npm install
$ npm run tsc-w

In another tab:

$ cd projects/v6test
$ tns run ios

Expected behavior

simulator/emulator should start and run without error.

Additional context

Prior to 6.1.0 this issue manifested itself in the following error:

CONSOLE ERROR file:///src/Users/ryan/projects/NativeScript/tns-core-modules/trace/trace.ts:184:30 Error: Could not load CSS from app.css: TypeError: Expected module identifier to be a string.

Issue originally spotted in a somewhat related issue https://github.com/NativeScript/NativeScript/issues/7745 . Multiple people reporting this same issue.

Not being able to run without webpack, makes it really difficult to track down and debug these type of startup/core NS problems.

[vpiskunov]

@rynop Does it actually crash fully for you? For me, I get the Could not load CSS error, but the app works fine...

[rynop]

Yup it does. Prior to 6.1.0 I would get the CSS error and it would crash for me as well.

If there are any other environment / simulator / os values I can dump to help track down what the issue is, I'd be happy to post.

[vpiskunov]

@rynop try using latest node version on LTS? Even just for the sake of just a different environment / clean install of tns

[rynop]

~/p/NativeScript (master|✔) $ rm -rf node_modules
~/p/NativeScript (master|✔) $ node --version
v10.16.3
~/p/NativeScript (master|✔) $ git pull
~/p/NativeScript (master|✔) $ npm install && npm run tsc-w

//in second tab:

~/p/v6test2 $ rm -rf platforms node_modules
~/p/v6test2 $ tns --version
6.1.0
~/p/v6test2 $ node --version
v10.16.3
~/p/v6test2 $ cat package.json | grep -i module
    "tns-core-modules": "file:../NativeScript/tns-core-modules",
~/p/v6test2 $ tns run ios

Launch, splash then crash again.

Full tns run log here

package-lock.json here

[vpiskunov]

I’m suspicious on your double: CONSOLE INFO file:///node_modules/nativescript-dev-webpack/hot.js:3:0: HMR: Hot Module Replacement Enabled. Waiting for signal. CONSOLE INFO file:///node_modules/nativescript-dev-webpack/hot.js:3:0: HMR: Hot Module Replacement Enabled. Waiting for signal.

That shouldn’t happen. See my other issue here https://github.com/nativescript-vue/vue-cli-plugin-nativescript-vue/issues/16#issuecomment-496893226

Regarding the error CONSOLE ERROR file:///src/Users/ryan/projects/NativeScript/tns-core-modules/trace/trace.ts:184:30 Error: Could not load CSS from app.css: TypeError: Expected module identifier to be a string.

• so you don’t get it anymore? What caused it to disappear?

Using Vue, not Angular, but seems it’s NS related

[rynop]

Your workaround in the comment you ref is for Vue (as you mentioned), not sure there is an equivalent workaround for angular.

I can't tell exactly what caused it to appear. The only change from when I first hit this issue was upgrade to v6.1.0

If you take a look at the recent comments in https://github.com/NativeScript/NativeScript/issues/7745 you'll notice others are still getting the css error.

[elena-p]

@rynop, @vpiskunov,

What is the current version of nativescript-dev-webpack in your apps? We have seen this error, when you are using an older version of that dependency. With each {N} release, nativescript-dev-webpack should be updated as well, it is now being updated by the tns update command. With tns-core-modules 6.1 you should use nativescript-dev-webpack 1.2

[rynop]

Hi @elena-p mine is 1.2.0. I included my full package-lock.json in my previous post if you need to know other versions in my env.

@vpiskunov maybe nativescript-dev-webpack v 1.2.0 is what fixed the css err, but not the crash obv.

Few more details of my env that hopefully is helpful:

~/p/v6test2 $ uname -a
Darwin Ryans-MacBook-Pro.local 18.7.0 Darwin Kernel Version 18.7.0: Tue Aug 20 16:57:14 PDT 2019; root:xnu-4903.271.2~2/RELEASE_X86_64 x86_64 i386 MacBookPro15,1 Darwin
~/p/v6test2 $ xcodebuild -version
Xcode 10.3
Build version 10G8

[vpiskunov]

@rynop for me, I don’t have any crashes and only the css error, which doesn’t hurt as far as I can tell, just annoying to see it :/

I am already running the latest nativescript-dev-webpack, and 6.1.1 platforms & TNS

[rynop]

@vpiskunov strange. Few q's for you:

1. Are you running the exact "To Reproduce" commands in my original post above?
2. Are you on macOS?
3. Do you get any of the node_modules/tns-core-modules typescript compile errors I do when you do a tns run ios?

[bundyo]

@rynop I'll copy this here for completeness:

The problem with linking is that Angular/TS project tend to grab the linked TS files in core modules and try to compile them without the references needed. I've only managed to run it by compiling the core modules with outDir and linking that (.d.ts, package.json and other files, except TS ones should be copied over too). Maybe the team can consider moving to an outDir compilation. Another way would be dev-webpack to forbid Angular/ts-loader for traversing node_modules.

In short - I think the app.css crash and the Angular/TS issue are different things.

[rynop]

thanks @bundyo, totally agree the github issue here has nothing to do with the CSS error (which has been fixed above btw).

Can you enumerate (explicitly) the steps you do when you say:

I've only managed to run it by compiling the core modules with outDir and linking that (.d.ts, package.json and other files, except TS ones should be copied over too)

I'm a noob when it comes to using/contributing to tns-core-modules, so if I can at least replicate what you do, not only can I get past my roadblock via your workaround, but it will help me learn. I can then contribute the workaround back to DevelopmentWorkflow.md

[bundyo]

1. Copy the whole directory structure of tns-core-modules folder along with the files in a dist folder inside your repo clone. Should look something like this:

NativeScript
     |
     +--> dist
            |
            +--> tns-core-modules
                        |
                        +--> ...
                        +--> ...
                        +--> ...

2. Delete all *.ts files from it (except all *.d.ts files) with your favorite command/tool/whatever
3. Add --outDir dist to tsc-w
4. Run it
5. Link the dist/tns-core-modules folder inside your app -> with something like this in your package.json:

  "tns-core-modules": "file:../NativeScript/dist/tns-core-modules"

6. npm i -> tns run/debug
7. Contribute :)

[rynop]

Thanks @bundyo . I tried your steps without luck unfortunately.

I noticed there is a compile-all script target in package.json that seems similar to your approach. I tried running it and pointing my project at it ("tns-core-modules": "file://../NativeScript/bin/dist/tns-core-modules/",) then doing a rm -rf node_modules platforms && npm install, but unfortuately I get the same errors (like below) when running tns run ios:

ERROR in node_modules/tns-core-modules/application/application-common.ts:36:5 - error TS2305: Module '"./application"' has no exported member 'AndroidApplication'.

36 AndroidApplication, ~~~~~~~~~~~~~~~~~~ node_modules/tns-core-modules/application/application-common.ts:37:5 - error TS2303: Circular definition of import alias 'CssChangedEventData'.

37 CssChangedEventData, ~~~~~~~~~~~~~~~~~~~ node_modules/tns-core-modules/application/application-common.ts:38:5 - error TS2303: Circular definition of import alias 'DiscardedErrorEventData'.

38 DiscardedErrorEventData, ~~~~~~~~~~~~~~~~~~~~~~~ node_modules/tns-core-modules/application/application-common.ts:39:5 - error TS2724: Module '"./application"' has no exported member 'iOSApplication'. Did you mean 'setApplication'?

39 iOSApplication, ~~~~~~~~~~~~~~

[bundyo]

The compile-all target is similar as much as doing only step 3 and 4 from my description above - it doesn't copy the .d.ts, package.json and the missing .js files. Also compile-all doesn't watch the folder and recompile on changes.

However, you shouldn't get the errors you've listed, as there are no .ts files there, unless you've copied them. Remember - copy *.d.ts files, but the rest of *.ts - don't.

[rynop]

Wahoo - it worked!! I typo'd my file:../Nativescript dependency path previously, which is why it was not working. Thanks @bundyo !

For others who run across this, for 2) above I ran: find dist/tns-core-modules -name "*.ts" -not -name "*.d.ts" -delete

After running tsc-w (with --outDir dist) you should get something like this:

~/p/v6test2 $ ll node_modules/tns-core-modules
lrwxr-xr-x 1 ryan staff 40 Sep 24 09:17 node_modules/tns-core-modules -> ../../NativeScript/dist/tns-core-modules/
~/p/v6test2 $ ll node_modules/tns-core-modules/application/
total 96K
drwxr-xr-x 11 ryan staff  352 Sep 24 09:14 ./
drwxr-xr-x 42 ryan staff 1.4K Sep 24 09:14 ../
-rw-r--r--  1 ryan staff   63 Sep 24 09:09 Readme.md
-rw-r--r--  1 ryan staff 4.4K Sep 24 09:15 application-common.js
-rw-r--r--  1 ryan staff 3.9K Sep 24 09:15 application-common.js.map
-rw-r--r--  1 ryan staff  14K Sep 24 09:15 application.android.js
-rw-r--r--  1 ryan staff  11K Sep 24 09:15 application.android.js.map
-rw-r--r--  1 ryan staff  20K Sep 24 09:09 application.d.ts
-rw-r--r--  1 ryan staff  15K Sep 24 09:15 application.ios.js
-rw-r--r--  1 ryan staff  11K Sep 24 09:15 application.ios.js.map
-rw-r--r--  1 ryan staff  108 Sep 24 09:09 package.json

DevelopmentWorkflow.md is incorrect IMO with regards to running another app - at least when it comes to Angular based NS projects. I'll be submitting a PR soon to clearly document.