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.

@joeskeen

@joeskeen

@component({
selector: 'ns-root',
template: <GridLayout><Label text="Hello from Root Component"></Label><ns-app></ns-app></GridLayout>,
standalone: true,
imports: [CommonModule, AppComponent]
})
export class RootComponent {}

can you try importing the App Component into the Root Component

@akhil02hero

@akhil02hero but if you make the RootComponent standalone, you get the error I referenced earlier:

RootComponent class is a standalone component, which can not be used in the @NgModule.bootstrap array. Use the bootstrapApplication function for bootstrap instead.

The whole reason I made a RootComponent to hold the AppComponent was so RootComponent could be non-standalone (and thus work).

Is there no resolution here? If we upgrade to NativeScript 9, are our NativeScript Angular apps just bound to generate this error?

The `AppComponent` class is a standalone component, which can not be used in the `@NgModule.bootstrap` array. Use the `bootstrapApplication` function for bootstrap instead.

Hello! You can just follow the example in the demo of this repo:

runNativeScriptAngularApp({
  appModuleBootstrap: () => {
    if (__APPLE__) {
      Utils.ios.setWindowBackgroundColor('#a6120d');
    }
    // Note: Try SplitView by booting with
    // SplitViewDemoComponent as the root component
    // and comment/uncomment router below
    // try with iPad!
    return bootstrapApplication(AppComponent, {
      providers: [
        provideNativeScriptHttpClient(withInterceptorsFromDi()),
        provideNativeScriptRouter(routes),
        // provideNativeScriptRouter(SPLIT_VIEW_ROUTES),
        ZONELESS ? provideZonelessChangeDetection() : provideNativeScriptNgZone(),
      ],
    });
  },
});

Which means just using bootstrapApplication in the "appModuleBootsrap" function

@edusperoni

@edusperoni So I replace the entire contents of my existing AppModule.ts with that?

registerLocaleData(localeEs);
registerLocaleData(localeFr);

@NgModule({
    declarations: [UserCurrencyPipe, UserDatePipe, PositiveNumberPipe, ValidateDirective],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptFormsModule,
        NativeScriptHttpClientModule,
        NativeScriptUIListViewModule,
        NativeScriptUIChartModule,
        NativeScriptDateTimePickerModule,
        DropDownModule,
        PagerModule,
    ],
    providers: [
        { provide: ErrorHandler, useClass: HoustersErrorHandler },
        { provide: LOCALE_ID, useValue: 'en-US' },
        { provide: LOCALE_ID, useValue: 'es-US' },
        { provide: LOCALE_ID, useValue: 'fr-FR' },
    ],
    bootstrap: [AppComponent],
    schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {
    constructor(private injectorService: InjectorService) {}
}

I realized that you're talking about replacing main.ts, when it's currently set to this:

import { NativeScriptNgZone, platformNativeScript, runNativeScriptAngularApp } from '@nativescript/angular';
import { init } from '@nativescript/background-http'
import { AppModule } from './app/app.module';

init();

runNativeScriptAngularApp({
    appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule)
});

However, then it will bypass my AppModule class so my imports and providers won't be loaded... I end up with many build errors like this:

ERROR in src/app/app.component.html:1:1 - error NG8001: 'GridLayout' is not a known element:
1. If 'GridLayout' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.

1 <GridLayout columns="*">

You need to decide if you want to use standalone components or NgModules. If you want to use standalone then you need to add NO_ERRORS_SCHEMA to every component, and import at least the NativeScriptCommonModule in them. And then do your "AppModule" imports in the providers in main.ts (see https://angular.dev/api/core/importProvidersFrom)

Otherwise, you just need to add standalone: "false" to your components and they will work as they were before.

Standalone components is a significant refactor. I also hate to say that the DX on them isn't really good outside of the web because with NO_ERRORS_SCHEMA the angular compiler doesn't warn you when you're missing an import (it's a pending issue on the angular repo)

@edusperoni

@edusperoni Gotcha. I did what you suggested and set all of my components to standalone: false, unfortunately I wasn't able to get it to work. I got past the build errors, but then it just failed to run.

webpack 5.101.2 compiled with 21 warnings in 18415 ms
Webpack compilation complete. Watching for file changes.
spawn /Users/justintoth/Dev/housters/UI/hooks/before-checkForChanges/nativescript-core.mjs EACCES

 *  The terminal process "/bin/zsh '-l', '-c', 'npm run ios'" terminated with exit code: 127.

I tried running the generated UI.xcodeproj file in Xcode, but it errors about missing a file. This seems to point to CocoaPods installations being missing, and sure enough I can't run pod install from the platforms/ios directory because there is no Pod file generated by the build.

/Users/justintoth/Dev/housters/UI/platforms/ios/UI/build-debug.xcconfig:3:1 could not find included file '../plugins-debug.xcconfig' in search paths

Make sure to clean and maybe update your cli. That error is an access error on a file in your filesystem

@edusperoni

Thanks @edusperoni, it turns out my Nativescript Firebase packages weren't updated as a part of the NS upgrade, and it was erroring without giving me the true error message about mismatching versions in CocoaPods. Once I upgraded the packages and cleaned and installed pods, everything started working. Exciting to be on NS 9, thanks again!

Navigation Menu

Repository navigation

Using Standalone Components #142

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Using Standalone Components #142

Description

Activity

akhil02hero commented on Nov 8, 2024

joeskeen commented on Nov 13, 2024

justintoth commented on Jan 12, 2026

edusperoni commented on Jan 12, 2026

justintoth commented on Jan 12, 2026

justintoth commented on Jan 12, 2026

edusperoni commented on Jan 13, 2026

justintoth commented on Jan 15, 2026

edusperoni commented on Jan 15, 2026

justintoth commented on Jan 16, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions