René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Using Standalone Components","articleBody":"**Is your feature request related to a problem? Please describe.**\r\n\u003c!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]. --\u003e \r\n\r\nAccording 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. \r\n\r\nIf 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`:\r\n\r\n```ts\r\n@NgModule({\r\n  imports: [NativeScriptModule, AppRoutingModule, AppComponent],\r\n  bootstrap: [AppComponent],\r\n```\r\n\r\nbut 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.`\r\n\r\nWhen I remove the `bootstrap` option:\r\n\r\n```\r\nThe module AppModule was bootstrapped, but it does not declare '@NgModule.bootstrap' components nor a \"ngDoBootstrap\" method. Please define one of these.\r\n```\r\nThis happens even if I provide an `ngDoBootstrap()` function:\r\n\r\n```ts\r\nexport class AppModule {\r\n  ngDoBootstrap() {\r\n    console.log('ngDoBootstrap');\r\n  }\r\n}\r\n```\r\nOK, so Angular wants an App Module when bootstrapped to have a non-standalone component to bootstrap. Let's try that:\r\n```ts\r\n@Component({\r\n  selector: 'ns-root',\r\n  template: `\u003cGridLayout\u003e\u003cLabel text=\"hello\"\u003e\u003c/Label\u003e\u003c/GridLayout\u003e`,\r\n})\r\nexport class RootComponent {}\r\n\r\n@NgModule({\r\n  imports: [NativeScriptModule, AppRoutingModule],\r\n  declarations: [RootComponent],\r\n  bootstrap: [RootComponent],\r\n  schemas: [NO_ERRORS_SCHEMA],\r\n})\r\nexport class AppModule {}\r\n```\r\nThis works, but as soon as you try to drop in your standalone component:\r\n```ts\r\n@Component({\r\n  selector: 'ns-root',\r\n  template: `\u003cns-app\u003e\u003c/ns-app\u003e`,\r\n})\r\nexport class RootComponent {}\r\n\r\n@NgModule({\r\n  imports: [NativeScriptModule, AppRoutingModule, AppComponent],\r\n  declarations: [RootComponent],\r\n  bootstrap: [RootComponent],\r\n  schemas: [NO_ERRORS_SCHEMA],\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\nYou get a nasty error (at least on my Android Emulator):\r\n\r\n```\r\nSystem.err: An uncaught Exception occurred on \"main\" thread.\r\n  System.err: Unable to start activity ComponentInfo{org.nativescript.tracker/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed\r\n  System.err: Error: java.lang.IllegalArgumentException: Cannot add a null child view to a ViewGroup\r\n  System.err:\r\n  System.err: StackTrace:\r\n  System.err: setActivityContent(file: src/webpack:/tracker/node_modules/@nativescript/core/ui/frame/callbacks/activity-callbacks.js:234:0)\r\n  System.err:   at onCreate(file: src/webpack:/tracker/node_modules/@nativescript/core/ui/frame/callbacks/activity-callbacks.js:46:0)\r\n  System.err:   at onCreate(file: src/webpack:/tracker/node_modules/@nativescript/core/ui/frame/activity.android.js:24:0)\r\n  System.err:   at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:4048)\r\n  System.err:   at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:4235)\r\n  System.err:   at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:112)\r\n  System.err:   at android.app.servertransaction.TransactionExecutor.executeNonLifecycleItem(TransactionExecutor.java:174)\r\n  System.err:   at android.app.servertransaction.TransactionExecutor.executeTransactionItems(TransactionExecutor.java:109)\r\n  System.err:   at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:81)\r\n  System.err:   at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2636)\r\n  System.err:   at android.os.Handler.dispatchMessage(Handler.java:107)\r\n  System.err:   at android.os.Looper.loopOnce(Looper.java:232)\r\n  System.err:   at android.os.Looper.loop(Looper.java:317)\r\n  System.err:   at android.app.ActivityThread.main(ActivityThread.java:8705)\r\n  System.err:   at java.lang.reflect.Method.invoke(Native Method)\r\n  System.err:   at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:580)\r\n  System.err:   at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:886)\r\n  System.err: Caused by: com.tns.NativeScriptException: Calling js method onCreate failed\r\n  System.err: Error: java.lang.IllegalArgumentException: Cannot add a null child view to a ViewGroup\r\n  System.err:   at com.tns.Runtime.callJSMethodNative(Native Method)\r\n  System.err:   at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302)\r\n  System.err:   at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188)\r\n  System.err:   at com.tns.Runtime.callJSMethod(Runtime.java:1175)\r\n  System.err:   at com.tns.Runtime.callJSMethod(Runtime.java:1153)\r\n  System.err:   at com.tns.Runtime.callJSMethod(Runtime.java:1149)\r\n  System.err:   at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:57)\r\n  System.err:   at android.app.Activity.performCreate(Activity.java:9002)\r\n  System.err:   at android.app.Activity.performCreate(Activity.java:8980)\r\n  System.err:   at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1526)\r\n  System.err:   at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:4030)\r\n  System.err:   ... 13 more\r\n  System.err: Caused by: java.lang.IllegalArgumentException: Cannot add a null child view to a ViewGroup\r\n  System.err:   at android.view.ViewGroup.addView(ViewGroup.java:5077)\r\n  System.err:   at android.view.ViewGroup.addView(ViewGroup.java:5057)\r\n  System.err:   at androidx.appcompat.app.AppCompatDelegateImpl.setContentView(AppCompatDelegateImpl.java:719)\r\n  System.err:   at androidx.appcompat.app.AppCompatActivity.setContentView(AppCompatActivity.java:207)\r\n  System.err:   ... 24 more\r\n```\r\n\r\n**Describe the solution you'd like**\r\n\r\nA clear and concise example of how to develop a NativeScript Angular app, using standalone components.","author":{"url":"https://github.com/joeskeen","@type":"Person","name":"joeskeen"},"datePublished":"2024-10-30T18:27:34.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":10},"url":"https://github.com/142/angular/issues/142"}