Angular2-导入每个模块上的加载项。。。在路由中？

我是否必须导入，例如：

从'angular2 fontawesome/angular2 fontawesome'导入{angular2fontawesome模块}

，

从'@angular/material'导入{MaterialModule}。。。对于两个模块？（home.module.ts和app.module.ts）

如果我想在我的登录和dashborad组件中使用它

因为我有类似“未处理的承诺拒绝：模板解析错误：
无法绑定到'name'，因为它不是'fa'的已知属性….”


应用程序模块

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


主页模块

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

您可以使用所有这些公共导入创建一个公共/共享模块，之后只需将此共享模块导入到需要相同功能的每个模块（在
imports
array中）。请参考这个

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