Angular 2 app structure / Core Module and Third Party Libraries

Question

I try to find a good way to structure my Angular 2 app. The Angular 2 styleguide recommends the creation of a core module. If I understand right the goal of the core module is to collect single-use classes and components and keep the root module slim. There is also written that I should import all modules required by the assets into the core module.

I am a little bit confused when it comes to third party libraries that need to be included with the Method forRoot() (Like NgBootstrap or angular2-notifications). Normally the forRoot() Method should only be called in the root module. Should I include such modules inside the root Module or in the core 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 core module.

Is this the correct way? To make the app work I still needed to import SimpleNotificationsModule.forRoot() in the App Module.
Why do I need to import SimpleNotificationsModule again in the Core Module. Shouldn't it be provided by the app module. I thought that thanks to forRoot() they core module uses the same imported modules as ther app module?
Should I import SimpleNotifications inside core module, if yes? Should I really call the forRoot() Method there?

App Module

...
import {SimpleNotificationsModule} from 'angular2-notifications';

@NgModule({
    declarations: [...],
    imports: [
     BrowserModule,
     CoreModule,
     NgbModule.forRoot(),
     SimpleNotificationsModule.forRoot(),
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

App Component

...
<notifications></notifications>

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

score 1 · Answer 1 · answered Nov 14 '18 at 19:04

.forRoot() is used when we want to register providers for services from the module.

Import the module without forRoot() if you need to reference component/directives or models from the module. No restrictions on how many time to import the module in the application.
Import module with forRoot() if you need to provide services from the module. Usually, we import the module this way only ones to use services as singletons.

In summary, the forRoot() convention represents a way to import an NgModule along with its providers using the ModuleWithProviders interface. The NgModule forRoot() Convention

Core module usually used also to story singletons (like authentication service, logging, notifications service) and components which are used only once (application header, navigation bar, notifications bar). This module imported only ones to the root of the application.

Now your questions:

Simple import SimpleNotificationsModule.forRoot() in your Core module, and make sure what you import Core module in App module. No need to import SimpleNotificationsModule into App module. Also, you can remove NgbModule.forRoot() from App module and place it into Core module imports.

If you would have features modules (like UserManagementModule), then you can import SimpleNotificationsModule (without .forRoot()), and you will have all references for notification components without creating second instances of notification services.

Angular 2 app structure / Core Module and Third Party Libraries

1 Answers1