I am developing a large application using Angular 2 and ASP.net MVC.
I have approximately 120 components in my application which are all declared in @ngModule declarations block:
@NgModule({
imports: [CommonModule],
declarations: [Component1, Component2, Component3, ..., Component120]
})
Is there a mechanism where I can shorten this?
You can build a shared module and add the components to this module, then you only have to add the shared module to imports: [MySharedModule] and all components and directives exported by MySharedModule become available to the importing module.
@NgModule({
imports: [ CommonModule ],
declarations: [ Component1, Component2, Component3.... Component120
],
exports: [ Component1, Component2, Component3.... Component120 ],
})
export class MySharedModule {}
@NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
imports: [BrowserModule, MySharedModule]
})
class AppModule {}
imports: [ CommonModule ], twice.I'm afraid there is not a shorter way to achieve what you are trying to do.
But if it is possible, you can divide your application in multiple parts. This means you will have more than one app.module.ts.
module/submodule, think in such a way that each module should not have more than10-15components, the you can create NgModule for eachsubmodule& load them lazily via router feature(this can also add boost in application performance).