RadSideDrawer crashes when activating async boot in Angular app

[amine2050]

Tell us about the problem

RadSideDrawer crashes on app start when async boot is activated in an Angular app

Which platform(s) does your issue occur on?

Android (NativeScript for Angular)

Please provide the following version numbers that your issue occurs with:

I reproduced the problem with both NativeScript 7 and 8, Angular 10 and 11. Following are the dependencies of the latest @nativescript/template-drawer-navigation-ng template, which I used to reproduce the issue:

"dependencies": {
    "@angular/animations": "~11.2.7",
    "@angular/common": "~11.2.7",
    "@angular/compiler": "~11.2.7",
    "@angular/core": "~11.2.7",
    "@angular/forms": "~11.2.7",
    "@angular/platform-browser": "~11.2.7",
    "@angular/platform-browser-dynamic": "~11.2.7",
    "@angular/router": "~11.2.7",
    "@nativescript/angular": "~11.8.0",
    "@nativescript/core": "~8.0.0",
    "@nativescript/theme": "~3.0.1",
    "nativescript-ui-sidedrawer": "~9.0.3",
    "reflect-metadata": "~0.1.13",
    "rxjs": "~6.6.7",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~11.2.7",
    "@nativescript/android": "8.0.0",
    "@nativescript/types": "~8.0.0",
    "@nativescript/webpack": "beta",
    "@ngtools/webpack": "~11.2.6",
    "typescript": "~4.0.0"
  }

Please tell us how to recreate the issue in as much detail as possible.

1. Create a new NativeScript Angular project using the template @nativescript/template-drawer-navigation-ng
2. Add the option async: true to platformNativeScriptDynamic() in main.ts

   import { platformNativeScriptDynamic } from '@nativescript/angular';
   import { AppModule } from '@src/app/app.module';
   platformNativeScriptDynamic({ async: true }).bootstrapModule(AppModule);

3. Run the app on Android and you should get this error: JS: ERROR TypeError: Cannot read property 'nativeView' of undefined

I tracked down the exception. It is happening in ui-sidedrawer.android.js on line 106 page = this.mainContent.nativeView;

It seems to be a timing problem caused by the asynchronous boot. The app was trying to access the main content view before it had been initialized.

I use the async boot option along with the APP_INITIALIZER to load settings before starting the app: https://blog.nativescript.org/angular-launch-animations/index.html