Nativescript-angular: router-outlet usage throws exception if not nested under a page-router-outlet

Created on 14 Jun 2018 · 3Comments · Source: NativeScript/nativescript-angular

_From @bytesoftly on June 14, 2018 10:20_

When using a router-outlet by itself in an app with Angular for Android causes the following exception:

Error: java.lang.IllegalArgumentException: Cannot add a null child to a ViewGroup

On reading router documentation I was not clear on why this happens, there is no mention that router-outlet components cannot be used in this way compared to page-router-outlet components.

I believe this tutorial on your site would not currently work with Nativescript 4.0.0 for this reason and that the breaking change happened at some point between that tutorial and now.

Reproduction

To reproduce this error, try the following:

Create a new Angular project tns create tester --ng
Open up app.component.html and replace <page-router-outlet></page-router-outlet> with <router-outlet></router-outlet>
Run tns debug android and an uncaught Java exception will be thrown

Version
Nativescript 4.0.0

_Copied from original issue: NativeScript/NativeScript#5955_

Source

tsonevn

👍1

Most helpful comment

@bytesoftly indeed there is a breaking change, but you can still have an application without page-router-outlet.

When your application is not using page-router-outlet you need to bootstrap with an additional argument in main.ts

// replace
// platformNativeScriptDynamic().bootstrapModule(AppModule);

// with
platformNativeScriptDynamic({ createFrameOnBootstrap: true })
    .bootstrapModule(AppModule);

NickIliev on 15 Jun 2018

👍2 🎉1

All 3 comments

@bytesoftly indeed there is a breaking change, but you can still have an application without page-router-outlet.

When your application is not using page-router-outlet you need to bootstrap with an additional argument in main.ts

// replace
// platformNativeScriptDynamic().bootstrapModule(AppModule);

// with
platformNativeScriptDynamic({ createFrameOnBootstrap: true })
    .bootstrapModule(AppModule);

NickIliev on 15 Jun 2018

👍2 🎉1

@NickIliev Thank you, that makes sense as something now creates the frame.

Would it be possible to add this to the documentation: https://docs.nativescript.org/core-concepts/angular-navigation#pages? I feel this is a the first goto page for people learning about routers.

It would also be fab if this tutorial could be updated.

Let me know if this is the wrong place to make the above two suggestions.