Angular2 - Import Addons auf jedem Modul ... im Routing?

Question

Muss ich zum Beispiel importieren: "import { Angular2FontawesomeModule } from 'angular2-fontawesome/angular2-fontawesome'", import { MaterialModule } from '@angular/material'; ... für beide Module? (home.module.ts und app.module.ts)

wenn ich das in meinem Login und Dashborad Komponente verwenden möchte?

becouse ich Fehler haben wie „Unbehandelte Versprechen Ablehnung: Template Fehler analysieren: binden kann nicht auf‚Name‘, da es nicht eine bekannte Eigenschaft von‚fa‘ist ....“

-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

Sie können ein allgemeines/geteiltes Modul mit all diesen gebräuchlichen Importen erstellen, danach importieren Sie dieses geteilte Modul in jedes Modul (in Imports Array), wo Sie die gleiche Funktionalität wollen. Bitte beachten Sie diese link.