I have an application with some modules.
Here is my root module:
// imports...
@NgModule({
bootstrap: [ AppModule ],
declarations: [
AppComponent,
...APP_PIPES // Array with my pipes
],
imports: [ // import Angular's modules
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
RouterModule.forRoot(ROUTES),
...APP_MODULES, // Array with my modules
...THIRD_PARTY_MODULES // Array with libs modules
],
providers: [ // expose our Services and Providers into Angular's dependency injection
ENV_PROVIDERS,
APP_PROVIDERS
]
})
export class AppModule {
...
}
And here's ONE of my common modules:
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MenuComponent } from './menu.component';
@NgModule({
declarations: [ MenuComponent ],
exports: [ MenuComponent ],
imports: [ CommonModule ],
providers: [ ]
})
export class MenuModule {
...
}
I thought it's the correct way to do this, however I'm getting the following error:
AppModule is not part of any NgModule or the module has not been imported into your module
I searched for AppModule in my whole application and I'm using only it in my app.module.ts
.
Am I missing to import/export something? Any help would be great. Thanks.
This
bootstrap: [ AppModule ],
should be
bootstrap: [ AppComponent ],
Here you need to pass the AppModule
platformBrowserDynamic().bootstrapModule(AppModule);