Angular2-在路由中在每个模块上导入插件？

Question

Do I must import for example: "import { Angular2FontawesomeModule } from 'angular2-fontawesome/angular2-fontawesome'" , import { MaterialModule } from '@angular/material'; ... for both module? (home.module.ts and app.module.ts)

if I wanna use this in my login and dashborad Component?

becouse I have error like "Unhandled Promise rejection: Template parse errors: Can't bind to 'name' since it isn't a known property of 'fa'...."

-app
  -login
    *login.component.html
    ...
  -home
    -dasborad
      *dashboard.component.html
      ...
    -users
      *user.component.html
      ...
    *home.component.html
    *home.component
    *home.module
  -toolbar
    *toolbar.component.html
  *app.component
  *app.module

---

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpModule, BaseRequestOptions, Http } from '@angular/http';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Angular2FontawesomeModule } from 'angular2-fontawesome/angular2-fontawesome'
import { MaterialModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ResponsiveModule } from 'ng2-responsive'
import 'hammerjs';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { LoginViewComponent } from './login/login-view.component';

import { HomeModule } from "./home/home.module"

const appRoutes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: '**', component: LoginComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    LoginViewComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    Angular2FontawesomeModule,
    MaterialModule,
    FlexLayoutModule,
    ResponsiveModule,

    RouterModule.forRoot(appRoutes),
    HomeModule
  ],
  exports: [ RouterModule ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

home.module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';
import { TopToolbarComponent } from '../toolbar/toolbar.component';

import { DashboardComponent } from './dashboard/dashboard.component';
import { UserComponent } from './user/user.component';


export const homeRoutes: Routes = [
    {
        path: 'home',
        component: HomeComponent,
        children:[
            { path: '', component: DashboardComponent },
            { path: 'dashboard', pathMatch: 'full', component: DashboardComponent },
            { path: 'user', pathMatch: 'full', component: UserComponent }
        ]
    }
]

@NgModule({
    imports: [
        RouterModule.forChild(homeRoutes)
    ],
    exports: [ 
        RouterModule 
    ],
    declarations: [ 
        TopToolbarComponent, 
        TopSearchComponent,
        HomeComponent,

        DashboardComponent,
        UserComponent
    ]
})

export class HomeModule{}

Answer 1

You can create a common/shared module with all these common imports, after this just import this shared module to every module (in Imports array) where you want the same functionality. Please refer to this link .