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

[tsonevn]

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

[NickIliev]

@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);

[bytesoftly]

@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.

[NickIliev]

@bytesoftly thanks - logged as TODO here