Angular2 - 各モジュールのアドオンのインポート...ルーティングの？

Question

インポートする必要がありますか： "import { Angular2FontawesomeModule } from 'angular2-fontawesome/angular2-fontawesome'"、import { MaterialModule } from '@angular/material'; ...どちらのモジュールにも対応していますか？ （home.module.tsとapp.module.ts）

ログインとダッシュボードコンポーネントでこれを使用したいのですが？

私のようなエラーが持っているbecouse「未処理の約束の拒絶反応を：テンプレートは、エラーを解析する：それは 『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

これらの共通インポートをすべて使用して共通/共有モジュールを作成することができます。この共有モジュールを同じ機能を使用するすべてのモジュール（Importsアレイ）にインポートするだけです。これはlinkを参照してください。