Angular2 multiple components different imports

Question

I am pretty new to Angular2, and i'm trying to modify a template. Basically, by default, all views are nested in a template with Header, Footer and TopNavbarModule.

I am trying to avoid importing these modules for some view components.

So I have built my blank.component and imported it in app.module but I am still importing the 3 view modules I don't want in app.module, otherwise they would not be imported at all (neither for the "blank" pages, or "other" pages).

I think that maybe I have to declare another NgModule in app.module or creating a separate blank.module - any ideas?

Definition of app.module

import {NgModule} from '@angular/core'
import {RouterModule} from "@angular/router";
import {AppComponent} from "./app.component";
import {BlankComponent} from "./blank.component";
import {BrowserModule} from "@angular/platform-browser";
import {HttpModule} from "@angular/http";
import {ROUTES} from "./app.routes";
import {LocationStrategy, HashLocationStrategy} from '@angular/common';

// App views
import {MainViewModule} from "../views/main-view/main-view.module";
import {DashboardViewModule} from "../views/dashboard-view/dashboard-view.module";

// App modules/components
import {NavigationModule} from "../views/common/navigation/navigation.module";
import {FooterModule} from "../views/common/footer/footer.module";
import {TopnavbarModule} from "../views/common/topnavbar/topnavbar.module";
import {LoginViewModule} from "../views/login-view/login-view.module";

@NgModule({
    declarations: [AppComponent, BlankComponent],
    imports     : [

        // Angular modules
        BrowserModule,
        HttpModule,

        // Views
        MainViewModule,
        DashboardViewModule,
        LoginViewModule,

        // Modules
        NavigationModule,
        FooterModule,
        TopnavbarModule,

        RouterModule.forRoot(ROUTES)
    ],
    providers   : [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap   : [AppComponent]
})

export class AppModule {}

Definition of blank.component

import {Component} from '@angular/core';
import { correctHeight, detectBody } from './app.helpers';

// Core vendor styles
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../../node_modules/font-awesome/css/font-awesome.css'
import '../../node_modules/animate.css/animate.min.css'

// Main Inspinia CSS files
import '../../src/assets/styles/style.css'

declare var jQuery:any;

@Component({
    selector   : 'blank',
    templateUrl: 'blank.template.html',
})

export class BlankComponent {

}

Answer 1

It sounds like the MainViewModule, DasboardViewModule and LoginViewModule are feature modules so I'd probably structure it like below:

• AppModule

• HomeModule - I'd have navigation, topnavbar, and footer components all defined in a single module, then import this into AppModule. You could keep the 3 separate modules if you like but I'm not sure what you gain from that.

• Then in `app.routing' you can lazy load those 'view' modules as required.

..

 const appRoute: Routes = [
       path: '',
       component: BlankComponent,
       children: [
         { 
            path: 'main',
            loadChildren: 'app/views/main-view/main-view.module#MainViewModule'
         },
         { 
            path: 'login',
            loadChildren: 'app/views/login-view/login-view.module#LoginViewModule'
         }
         { 
            path: 'dashboard',
            loadChildren: 'app/views/dashboard-view/dashboard-view.module#DashboardViewModule'
         }
       ]
]

The template for BlankComponent (defined in app.module) would be the only place using the top-nav/footer components and providing a router-outlet where the 'view' would be displayed. Something like this:

<app-top-nav></app-top-nav> <router-outlet></router-outlet> <app-footer></app-footer>

The AppModule imports are minimal:

@NgModule({
  imports: [
    //Angular modules
    BrowserModule,
    HttpModule,
    CoreModule, //your module containing services (see module guidance)
    SharedModule, //your modules with commons pipes, directives etc (see module guidance)
    HomeModule, //your module contains the navbar, footer etc
    routing
  ],
  providers: [
    appRoutingProviders,
  ],
  declarations: [AppComponent, BlankComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

The feature (view) modules would then only be importing a SharedModule if they used common components, along with any Angular module dependencies. I typically have the SharedModule re-export common Angular dependencies like the forms module, so that consumers of the SharedModule don't need to remember to import those every time.

Not sure if that is exactly what you had in mind, but hopefully it helps!