Using Standalone Components

Is your feature request related to a problem? Please describe.

According to the Issues list, it should theoretically be possible to create a NativeScript Angular application that contains standalone components; however, I have yet to figure out how to do that without crashing the application.

If you look at the application that is generated using ng new today, everything is standalone, from the main.ts down. It seems that currently @nativescript/angular only supports bootstrapping a module, as opposed to an application/component. If I want my main app component to be a standalone component, I can import it into the AppModule:

@NgModule({
  imports: [NativeScriptModule, AppRoutingModule, AppComponent],
  bootstrap: [AppComponent],

but then it creates the compile error AppComponent class is a standalone component, which can not be used in the @NgModule.bootstrap array. Use the bootstrapApplication function for bootstrap instead.

When I remove the bootstrap option:

The module AppModule was bootstrapped, but it does not declare '@NgModule.bootstrap' components nor a "ngDoBootstrap" method. Please define one of these.

This happens even if I provide an ngDoBootstrap() function:

export class AppModule {
  ngDoBootstrap() {
    console.log('ngDoBootstrap');
  }
}

OK, so Angular wants an App Module when bootstrapped to have a non-standalone component to bootstrap. Let's try that:

@Component({
  selector: 'ns-root',
  template: `<GridLayout><Label text="hello"></Label></GridLayout>`,
})
export class RootComponent {}

@NgModule({
  imports: [NativeScriptModule, AppRoutingModule],
  declarations: [RootComponent],
  bootstrap: [RootComponent],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

This works, but as soon as you try to drop in your standalone component:

@Component({
  selector: 'ns-root',
  template: `<ns-app></ns-app>`,
})
export class RootComponent {}

@NgModule({
  imports: [NativeScriptModule, AppRoutingModule, AppComponent],
  declarations: [RootComponent],
  bootstrap: [RootComponent],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

You get a nasty error (at least on my Android Emulator):

System.err: An uncaught Exception occurred on "main" thread.
  System.err: Unable to start activity ComponentInfo{org.nativescript.tracker/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: setActivityContent(file: src/webpack:/tracker/node_modules/@nativescript/core/ui/frame/callbacks/activity-callbacks.js:234:0)
  System.err:   at onCreate(file: src/webpack:/tracker/node_modules/@nativescript/core/ui/frame/callbacks/activity-callbacks.js:46:0)
  System.err:   at onCreate(file: src/webpack:/tracker/node_modules/@nativescript/core/ui/frame/activity.android.js:24:0)
  System.err:   at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:4048)
  System.err:   at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:4235)
  System.err:   at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:112)
  System.err:   at android.app.servertransaction.TransactionExecutor.executeNonLifecycleItem(TransactionExecutor.java:174)
  System.err:   at android.app.servertransaction.TransactionExecutor.executeTransactionItems(TransactionExecutor.java:109)
  System.err:   at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:81)
  System.err:   at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2636)
  System.err:   at android.os.Handler.dispatchMessage(Handler.java:107)
  System.err:   at android.os.Looper.loopOnce(Looper.java:232)
  System.err:   at android.os.Looper.loop(Looper.java:317)
  System.err:   at android.app.ActivityThread.main(ActivityThread.java:8705)
  System.err:   at java.lang.reflect.Method.invoke(Native Method)
  System.err:   at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:580)
  System.err:   at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:886)
  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:1302)
  System.err:   at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188)
  System.err:   at com.tns.Runtime.callJSMethod(Runtime.java:1175)
  System.err:   at com.tns.Runtime.callJSMethod(Runtime.java:1153)
  System.err:   at com.tns.Runtime.callJSMethod(Runtime.java:1149)
  System.err:   at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:57)
  System.err:   at android.app.Activity.performCreate(Activity.java:9002)
  System.err:   at android.app.Activity.performCreate(Activity.java:8980)
  System.err:   at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1526)
  System.err:   at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:4030)
  System.err:   ... 13 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:5077)
  System.err:   at android.view.ViewGroup.addView(ViewGroup.java:5057)
  System.err:   at androidx.appcompat.app.AppCompatDelegateImpl.setContentView(AppCompatDelegateImpl.java:719)
  System.err:   at androidx.appcompat.app.AppCompatActivity.setContentView(AppCompatActivity.java:207)
  System.err:   ... 24 more

Describe the solution you'd like

A clear and concise example of how to develop a NativeScript Angular app, using standalone components.

首先重現針對 main.ts 和 AppModule 所描述的 standalone-components 設定，包括模組引導以及 Android 模擬器失敗的問題。追蹤 NativeScript Angular 如何引導應用程式，並記錄一個可正常運作的 standalone-components 範例；完成的標準是該範例能夠啟動且不會出現回報的 null-child error。