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
  };
}

      

+3


source to share





All Articles