NativeScript + Angular: Code Sharing Project

Question

I followed the Nativescript steps for creating a new code sharing project here and I would like to use sass. I tried both for ones that have the NatievScript theme as well as the one that does not:

ng new -c=@nativescript/schematics no-theme-project --shared --no-theme

or

ng new -c=@nativescript/schematics sass-no-theme-project --shared --style=scss --no-theme

For this Post I chose No Theme. When it finishes creating a new project the folder is as shown:

Inside Desktop/TestProjects/sass-no-theme-project I install the node modules:

npm install

When running ng serve --o the application builds and loads up as expected in the browser. For NativeScript mobile however for Android (have not tested iOS yet) the application crashes with an error. I have tried both tns run android as well as using the NativeScript SideKick to build however they end up with the same results. I have also tried local and cloud builds.

Device Used:

Physical Samsung A5: Not emulator

Error On Mobile Device In Logs:

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.
    at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6065)
    at android.app.ActivityThread.-wrap1(Unknown Source:0)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1764)
    at android.os.Handler.dispatchMessage(Handler.java:105)
    at android.os.Looper.loop(Looper.java:164)
    at android.app.ActivityThread.main(ActivityThread.java:6944)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:327)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1374)
Caused by: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.
    at com.tns.Module.bootstrapApp(Module.java:311)
    at com.tns.Runtime.run(Runtime.java:544)
    at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
    at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1125)
    at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6062)
    ... 8 more
Caused by: com.tns.NativeScriptException: Failed to find module: "./", relative to: app//
    at com.tns.Module.resolvePathHelper(Module.java:146)
    at com.tns.Module.bootstrapApp(Module.java:309)
    ... 12 more

Logs In Command Line and NativeScript Client

[18-11-10 17:43:53.724] (CLI) [./main.ns.ts] 1.22 KiB {bundle} [built]
[18-11-10 17:43:53.724] (CLI) [./package.json] 123 bytes {bundle} [optional] [built]
[18-11-10 17:43:53.724] (CLI)     + 403 hidden modules
[18-11-10 17:43:53.724] (CLI) ERROR in Patterns must be a string or an array of strings
[18-11-10 17:43:53.724] (CLI)  Webpack compilation complete.
[18-11-10 17:43:53.724] (CLI)  Executing webpack failed with exit code 2.
[18-11-10 17:43:53.724] (CLI)  # tns build android
[18-11-10 17:43:53.724] (CLI) ### Description
[18-11-10 17:43:53.724] (CLI) clean-webpack-plugin: /mnt/storage/builds/_/1bfec9e7b462a1843535f909d892c70d2010e1cf/5.0.0/5.0.0/no-sass-project/platforms/android/app/src/main/assets/app/**/* has been removed.
[18-11-10 17:43:53.724] (CLI) Executing webpack failed with exit code 2.
[18-11-10 17:43:53.724] (CLI) bc_GgX4lpDXQFHYT4ydmJ
[18-11-10 17:43:56.917] (CLI) Unable to apply changes on device: 5210ffc964ca44f3. Error is: Build failed..
[18-11-10 17:43:56.920] Error detected during LiveSync on 5210ffc964ca44f3 for C:\Users\userName\Desktop\no-sass-project. Error: Build failed.
[18-11-10 17:43:56.925] (CLI) Executing after-watch hook from C:\Users\userName\Desktop\no-sass-project\hooks\after-watch\nativescript-dev-sass.js
[18-11-10 17:43:56.925] (CLI) Executing after-watch hook from C:\Users\userName\Desktop\no-sass-project\hooks\after-watch\nativescript-dev-typescript.js
[18-11-10 17:43:56.925] (CLI) Executing after-watch hook from C:\Users\userName\Desktop\no-sass-project\hooks\after-watch\nativescript-dev-webpack.js
[18-11-10 17:43:56.925] (CLI) Stopping webpack watch

With Nativescript and Angular creating a blank new project for me I would assume it is suppose to be a HelloWorld project that works in Web, iOS, and Android right out of the gate.

UPDATE

I tried following the troubleshoot guide here such as reinstalling JDK 8 and that however the problem persists. I got it to run once, it failed and after about 4-10 minutes it rebuilt and was working. Since then I can not get it to work a second time. This leads to me believe there maybe a configuration issues somewhere such as the tsconfig json files. Taken a look in them and they seem to be fine.

Answer 1

It seems it may be difficult for the nativescript team as the packages it relies on keep changing rapidly. This is the package.json setup I used thanks to @NickIliev from the nativescript team, @skopekreep, and good old debugging. If you use this setup you should be fine.

Just be wary updating the packages in the future and test before committing your package.json.

As well as the main packages I would suggest you be careful updating and ensure you test:

typescript @types/jasmine nativescript-dev-webpack tns-core-modules

{
  "name": "myproject",
  "nativescript": {
  "id": "org.nativescript.myproject",
    "tns-android": {
    "version": "5.0.0"
   }
},
"version": "0.0.0",
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "android": "tns run android --bundle",
  "ios": "tns run ios --bundle"
},
"private": true,
"dependencies": {
  "@angular/animations": "~6.1.0",
  "@angular/common": "~6.1.0",
  "@angular/compiler": "~6.1.0",
  "@angular/core": "~6.1.0",
  "@angular/forms": "~6.1.0",
  "@angular/http": "~6.1.0",
  "@angular/platform-browser": "~6.1.0",
  "@angular/platform-browser-dynamic": "~6.1.0",
  "@angular/router": "~6.1.0",
  "core-js": "^2.5.4",
  "nativescript-angular": "~6.1.0",
  "nativescript-theme-core": "~1.0.4",
  "reflect-metadata": "~0.1.8",
  "rxjs": "^6.0.0",
  "tns-core-modules": "~5.0.2",
  "zone.js": "^0.8.26"
},
"devDependencies": {
  "@angular-devkit/build-angular": "^0.8.0",
  "@angular/cli": "^6.2.0",
  "@angular/compiler-cli": "^7.0.3",
  "@nativescript/schematics": "~0.4.0",
  "@types/jasmine": "2.8.6",
  "@types/jasminewd2": "~2.0.3",
  "@types/node": "~8.9.4",
  "codelyzer": "~4.2.1",
  "jasmine-core": "~2.99.1",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "~1.7.1",
  "karma-chrome-launcher": "~2.2.0",
  "karma-coverage-istanbul-reporter": "~2.0.0",
  "karma-jasmine": "~1.1.1",
  "karma-jasmine-html-reporter": "^0.2.2",
  "nativescript-dev-sass": "~1.6.0",
  "nativescript-dev-typescript": "~0.7.0",
  "nativescript-dev-webpack": "^0.17.0",
  "protractor": "~5.3.0",
  "ts-node": "~5.0.1",
  "tslint": "~5.9.1",
  "typescript": "^3.1.6"
}
}

Steps:

1. Install latest version of Node JS

2. Install latest version of NPM

3. npm i -g @angular/cli

4. npm i -g @nativescript/schematics

5. Go into the folder and replace the package.json, ensure to change name and id to your projects name

6. npm install

7. tns run android --bundle

Answer 2

When you build code-sharing projects you should use the --bundle flag. So your command should be:

tns run android --bundle or tns run ios --bundle

If you keep forgetting the --bundle flag, then you could use the scripts provided in package.json and run: npm run android or npm run ios

Additionally, if your project uses TypeScript 2.7, then you might need to update it to 2.8

As a side note: you don't need moduleId in code-sharing projects, as webpack is taking care of this for you.