Angular 2 app framework / main module and third party libraries
I am trying to find a good way to structure my Angular 2 application. Angular 2 styleguide recommends creating a main module. If I understand correctly, the purpose of the main module is to collect disposable classes and components and keep the root module thin. It also says that I have to import all the modules needed for the assets into the main module.
I'm a little confused when it comes to third party libraries that should be included in the forRoot () method (like NgBootstrap or angular2-notifications). Typically the forRoot () method should only be called in the root module. Should I include such modules in the root module or in the main module?
In the following example, I need to do some configuration for angular2-notifications. To keep my root module slim, I imported SimpleNotifications inside the main module.
- Is it correct? To make the application work, I still needed to import SimpleNotificationsModule.forRoot () into the application module.
- Why do I need to import SimpleNotificationsModule to Core Module again. You should not provide an application module. I thought that thanks to forRoot (), the main module uses the same imported modules as the app module the?
- Should I import SimpleNotifications inside the main module if yes? Should I actually call the forRoot () method there?
Application module
...
import {SimpleNotificationsModule} from 'angular2-notifications';
@NgModule({
declarations: [...],
imports: [
BrowserModule,
CoreModule,
NgbModule.forRoot(),
SimpleNotificationsModule.forRoot(),
],
bootstrap: [AppComponent]
})
export class AppModule {}
Application component
...
<notifications></notifications>
The main module
import {SimpleNotificationsModule} from 'angular2-notifications';
import {NotificationsComponent} from
'./notifications/notifications.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
HttpModule,
RouterModule,
SimpleNotificationsModule
],
declarations: [...],
exports: [NotificationsComponent]
})
export class CoreModule {
constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
throwIfAlreadyLoaded(parentModule, 'core module');
}
}
NotificationsComponent
import {Component, ViewEncapsulation} from '@angular/core';
@Component({
selector: 'notifications',
template: `<simple-notifications [options]="notificationOptions">
</simple-notifications>`,
styleUrls: ['./notifications.component.css'],
encapsulation: ViewEncapsulation.None
})
export class NotificationsComponent {
public notificationOptions = {
position: ['top', 'right'],
timeOut: 5000,
maxStack: 5,
lastOnBottom: true
};
}
source to share
No one has answered this question yet
Check out similar questions: