CODEWITHSUNDEEP
angularnativescript
Alex161
Alex161

Reputation: 71

"The AppComponent class is a standalone component, which can not be used in the @NgModule.bootstrap array" with Nativescript

my Nativescript-Angular project was full workable two month ago, but now unexpectedly shutdown, I even don't know what exactly changing made in my environment, Angular look as the same version

Angular CLI: 18.1.3
Node: 22.6.0
Package Manager: npm 10.8.2
OS: win32 x64
Angular: 18.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.7
@angular-devkit/build-angular   18.1.3
@angular-devkit/core            18.1.3
@angular-devkit/schematics      18.1.3
@ngtools/webpack                18.1.3
@schematics/angular             18.1.3
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.14.8

Nativescript is the same version

ns --version
8.8.0

But unexpectedly I receive this error message:

"The AppComponent class is a standalone component, which can not be used in the @NgModule.bootstrap array. Use the bootstrapApplication function for bootstrap instead.(-996009) app.module.ts(23, 1): The 'bootstrap' array is present on this NgModule." and project stop compiling.

this was my old app.module.ts

...
registerElement('NativeAdView', () => require('@nativescript/firebase-admob').NativeAdView);
registerElement('BannerAd', () => require('@nativescript/firebase-admob').BannerAd);
registerElement('MediaView', () => require('@nativescript/firebase-admob').MediaView);

@NgModule({
   bootstrap: [AppComponent],
   imports: [NativeScriptModule, AppRoutingModule, InstallModule, NativeScriptFormsModule, FormsModule, ReactiveFormsModule,CheckBoxModule  ],
   declarations: [AppComponent, ListComponent, ItemDetailComponent, ...demoCOMPONENTS, WelcomeComponent,AddNewComponent,SecurityComponent,MoreComponent ],
   providers: [],
   schemas: [NO_ERRORS_SCHEMA],
   })
   export class AppModule {}

I try to change project to Angular standalone components, add to each declaration

 @Component({
   standalone: true,

and change app.module.ts:

...
registerElement('NativeAdView', () => require('@nativescript/firebase-admob').NativeAdView);
registerElement('BannerAd', () => require('@nativescript/firebase-admob').BannerAd);
registerElement('MediaView', () => require('@nativescript/firebase-admob').MediaView);

@NgModule({
   imports: [NativeScriptModule, AppRoutingModule, InstallModule, NativeScriptFormsModule, FormsModule, ReactiveFormsModule,CheckBoxModule  ],
   providers: [
       importProvidersFrom(NativeScriptRouterModule.forRoot([])), 
   ],
   schemas: [NO_ERRORS_SCHEMA],
   })
   export class AppModule {}

But have no positive result, I receive just million lines of error during compiling process, no more. Now project looks as fully destroyed and I even don't know what tiny changing in my developer environment destroyed cool workable project.

my src\app\app-routing.module.ts looks as :

const routes: Routes = [
   { path: '', redirectTo: '/list', pathMatch: 'full' },
   { path: 'welcome', component: WelcomeComponent },
   { path: 'list', component: ListComponent },
   { path: 'item/:name', component: ItemDetailComponent },
  ...
]
@NgModule({
   imports: [NativeScriptRouterModule.forRoot(routes)],
   exports: [NativeScriptRouterModule],
})
export class AppRoutingModule {}

this router was worked fine, but now this module show me error: "This export contains errors, which may affect components that depend on this NgModule"

Upvotes: 1

Views: 162

Answers (1)

Naren Murali
Naren Murali

Reputation: 57986

Try updating your main.ts to support standalone component bootstrapping.

...
registerElement('NativeAdView', () => require('@nativescript/firebase-admob').NativeAdView);
registerElement('BannerAd', () => require('@nativescript/firebase-admob').BannerAd);
registerElement('MediaView', () => require('@nativescript/firebase-admob').MediaView);

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(NativeScriptRouterModule.forRoot([])),
  ]
});

The imports have to be individually added to each component, only then the errors will go away which say "--- is not a known element."

If you want to save time, you should try the standalone migration from angular instead.

Migrate an existing Angular project to standalone

ng generate @angular/core:standalone

Also explore the other migrations which will be helpful to migrate to standalone and signals, throughout the application.

Upvotes: 0

Related Questions