Import modules in the AppModule for separation of concerns in Angular2

Question

Templates like from the ASP.NET Core JavaScript services came with a single module called AppModule . Since my application is divided into two logical areas, It seems a good idea to use two modules (AreaA, AreaB) for them. My idea was to import both in AppModule , including shared ressources like Pipes (which can cause trouble here).

So for testing purpose, I created a Module called ModuleA

import { HomeComponent } from './home/home.component';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';

@NgModule({
    declarations: [
         HomeComponent
    ],

    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.

        RouterModule.forChild([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
        ])
    ]
})

export class ModuleAModule {}

It's imported in the AppModule like this

import { ModuleAModule } from './module-a/module-a.module';
import { NavMenuComponent } from './shared/navmenu/navmenu.component';
import { AppComponent } from './shared/app/app.component';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        NavMenuComponent
    ],

    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        ModuleAModule
    ]
})

export class AppModule {}

This gave me an exception

Exception: Call to Node module failed with error: Error: Template parse errors: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

The <router-outlet> tag is used in the app.component as placeholder for the main content. But its working when I set the routes in the main app module like this

imports: [
    UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
    ParentAreaModule,
    RouterModule.forRoot([
        {path: 'home',component:HomeComponent}

    ])
]

This would force me to define all routes in the app.module . It requires imports to all my components across different modules, which seems to be a mess for me. I would like to set the routes in the sub-modules itselfs. The best solution would be an automatically added prefix for each module (like module-a for the first module).

Answer 1

import { ModuleAModule } from './module-a/module-a.module';
import { NavMenuComponent } from './shared/navmenu/navmenu.component';
import { AppComponent } from './shared/app/app.component';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        NavMenuComponent
    ],

    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        ModuleAModule,
        RouterModule
    ]
})

export class AppModule {}

Answer 2

Make use of feature module if you have many features and want a separation in your app module. Shared modules are modules which are common features between your application. Core modules are modules which further split the app modules into things that are only specific to app module.

My suggestion will be to first develop the app and then look for modules and split them up.