IllegalArgumentException: Cannot add a null child view to a ViewGroup (after updating from 10.0.0-rc.5 to rc.6)

[funder7]

Environment

• CLI: 6.8.0-rc.4
• Cross-platform modules: 7.0.0-rc.24
• Android Runtime: 6.5.3
• iOS Runtime: 6.5.2
• Plugin(s): nativescript-google-maps-sdk, nativescript-oauth2, nativescript-ui-dataform
• NativeScript-Angular: 10.0.0-rc.6
• Angular: 10.0.4

Describe the bug After updating @nativescript/angular the application won't launch on Android (emulator or real device), showing the following error:

System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to start activity ComponentInfo{it.italdev.potpot.nsapp/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: Error: java.lang.IllegalArgumentException: Cannot add a null child view to a ViewGroup
System.err: 
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{it.italdev.potpot.nsapp/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: Error: java.lang.IllegalArgumentException: Cannot add a null child view to a ViewGroup
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2913)
System.err:     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3048)
System.err:     at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:78)
System.err:     at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:108)
System.err:     at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:68)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1808)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     at android.os.Looper.loop(Looper.java:193)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6669)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
System.err: Caused by: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: Error: java.lang.IllegalArgumentException: Cannot add a null child view to a ViewGroup
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1286)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1173)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1160)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1138)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1134)
System.err:     at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:19)
System.err:     at android.app.Activity.performCreate(Activity.java:7136)
System.err:     at android.app.Activity.performCreate(Activity.java:7127)
System.err:     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1271)
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2893)
System.err:     ... 11 more
System.err: Caused by: java.lang.IllegalArgumentException: Cannot add a null child view to a ViewGroup
System.err:     at android.view.ViewGroup.addView(ViewGroup.java:4857)
System.err:     at android.view.ViewGroup.addView(ViewGroup.java:4837)
System.err:     at androidx.appcompat.app.AppCompatDelegateImpl.setContentView(AppCompatDelegateImpl.java:478)
System.err:     at androidx.appcompat.app.AppCompatActivity.setContentView(AppCompatActivity.java:150)
System.err:     ... 22 more

To Reproduce 1) create an angular code sharing project 2) update @nativescript/angular from rc.5 to rc.6

Expected behavior The application should start without any error

Sample project I cannot share my project, but I can create a sample, the problem is that I'm working with some plugins that I'm updating.

[NathanWalker]

Can you share what your root app.component.html looks like?

[funder7]

These two, one for web, the other for mobile

app.component.html

<router-outlet></router-outlet>

app.component.tns.html

  <page-router-outlet></page-router-outlet>

[funder7]

Hi, I've tried all the versions going from rc.3 up to rc.5, the error is showing after the update from rc.5 to 6. I also tried updating @nativescript/core to the latest rc.24, no luck!

[funder7]

Hi @NathanWalker, there are any kind of informations that I can share to help you discover the source of this?

[lonemanotzi]

This is reproduceable in a shared project. (only shared project has this issue) Created a sample project by running command: ng new -c=@nativescript/schematics sass-project --shared --style=scss run ng serve Everything is working great. run nsc run android --emulator this generates the error@funder7 reported.,

[funder7]

thanks @lonemanotzi. Have you tried with the latest 10.0.0-rc.10 ?

[lonemanotzi]

same error on rc.1 and 10.0.6 angular versions when running on emulator (ng serve works fine on both versions: ) If you comment out on application.tns.html, I can see the landing page (ie the contents of application page). The moment I add , it is throwing this error.

[NathanWalker]

@funder7 @lonemanotzi @nativescript/schematics ~10.0.0 has now been published alongside @nativescript/angular ~10.0.0

Here's a couple examples if starting fresh (which are already documented) but here for quick reference:

A. Starting a new Angular web project and adding {N} to it afterwards:

ng new workspace
cd workspace
ng add @nativescript/schematics --skipAutoGeneratedComponent

// start apps:
npm run ios
npm run android 

B. Starting a new Angular NativeScript shared codebase from the start:

npm i -g @nativescript/schematics
ng new -c=@nativescript/schematics workspace --shared --style=scss
cd workspace

// start apps:
npm run ios
npm run android 

C. If updating existing @nativescript/schematics projects:

1. Delete webpack.config.js (the updated @nativesript/webpack dependency will regenerate a new correct one using latest webpack plugins). If you had customizations, use git change sets to compare the diff.
2. Update package.json as follows (at least in part - can use as a guide):

"scripts": {
  "clean": "npx rimraf hooks node_modules package-lock.json platforms",
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "android": "tns run android --no-hmr",
  "ios": "tns run ios --no-hmr",
  "mobile": "tns run",
  "preview": "tns preview",
  "ngcc": "ngcc --properties es2015 module main --first-only",
  "postinstall": "npm run ngcc"
},
"dependencies": {
  "@angular/animations": "~10.0.0",
  "@angular/common": "~10.0.0",
  "@angular/compiler": "~10.0.0",
  "@angular/core": "~10.0.0",
  "@angular/forms": "~10.0.0",
  "@angular/platform-browser": "~10.0.0",
  "@angular/platform-browser-dynamic": "~10.0.0",
  "@angular/router": "~10.0.0",
  "core-js": "^2.6.9",
  "@nativescript/angular": "~10.0.0",
  "@nativescript/core": "rc",
  "@nativescript/theme": "~2.2.1",
  "reflect-metadata": "~0.1.12",
  "rxjs": "~6.5.5",
  "tslib": "1.10.0",
  "zone.js": "~0.10.2"
},
"devDependencies": {
  "@angular/cli": "~10.0.0",
  "@angular/compiler-cli": "~10.0.0",
  "@angular-devkit/build-angular": "~0.1000.2",
  "@nativescript/tslint-rules": "~0.0.5",
  "@types/jasmine": "~3.5.0",
  "@types/jasminewd2": "~2.0.3",
  "@types/node": "^12.11.1",
  "codelyzer": "^5.1.2",
  "jasmine-core": "~3.5.0",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "~4.4.1",
  "karma-chrome-launcher": "~3.1.0",
  "karma-coverage-istanbul-reporter": "~2.1.0",
  "karma-jasmine": "~3.0.1",
  "karma-jasmine-html-reporter": "^1.4.2",
  "@nativescript/webpack": "~2.0.0",
  "protractor": "~5.4.3",
  "ts-node": "~8.3.0",
  "tslint": "~6.1.0",
  "typescript": "~3.9.0",
  "node-sass": "^4.7.1"
}

3. Clean your projects with npm run clean if using the clean scripts from the example scripts above.

[lonemanotzi]

@NathanWalker, Thank You! I can confirm this is now working (I tried option 2). I was getting an error after I followed option 2. "__decorator is not defined". To fix this, I needed to make the "noEmitHelpers: false" (default is true) and both web and app is working as expected.

[funder7]

It didn't fix the problem in my project... I will try do a comparison with a fresh code sharing project..

[funder7]

Hello everyone, I have to bump this issue up, as the problem is still present in @nativescript/angular v10 stable.

I thought that it was related to something wrong in the project that I was working on, but now it happened again in another one. It's a simple demo application supplied with a plugin, so the search field narrows down a bit.

here's the commit with the change needed to make the application run.

This time it happened with nativescript@6.8.0-stable, @nativescript/core@rc, same runtimes and Angular version.

I can say for sure that moving from rc.5 to rc.6 is what causes the exception.

If you need a project to use to reproduce the issue, then checkout the repository in the link above: use the on in demo-angular folder, the branch is feature/nativescript-7-compat just checkout HEAD^1 and you will have the exception when the application starts up.

Let me know if I can do something else to solve this.

[funder7]

Closing: solved by following "Upgrading tips for Angular 10 projects" blog post.