2016-12-01 11 views
1

次のディレクトリ構造を持つAngular2アプリで角をつけてモジュールを分離しようとしました。角2 - AppModuleによって予期しないモジュールが宣言されました

は、私は私のモジュールとAppModuleで宣言された他のコンポーネントがありますが、私はUnexpected HomeModule declared by AppModule

app 
--authentication 
---- htmls, ts, css 
--home 
----dashboard 
--------html, ts, css 
----representativs 
--------html, ts, css 
----home-routing.module.ts 
----home.module.ts 
--app.routing.ts 
--app.module.ts 

app.module.ts

import { routing } from "./app.routing" 
import { AppComponent } from './app.component'; 
import { HomeModule } from "./home/home.module"; 

@NgModule({ 
    imports: [BrowserModule, routing, HttpModule, ReactiveFormsModule], 
    declarations: [ AppComponent, HomeModule], 
    bootstrap: [AppComponent], 
    providers: [UserAuthenticationService] 
}) 
export class AppModule { } 

home.moduleブラウザコンソールでエラーを取得しています。 ts

import { NgModule } from '@angular/core'; 
import { DashboardComponent } from './dashboard/dashboard.component'; 
import { RepresentativesComponent } from './representatives/representatives.component'; 
import { HomeRoutingModule } from "./home-routing.module"; 

@NgModule({ 
    imports: [ 
     HomeRoutingModule 
    ], 
    declarations: [ 
     DashboardComponent, 
     RepresentativesComponent, 
    ] 
}) 
export class HomeModule { } 

home-routing.ts

const homeRoutes: Routes = [ 
    { 
     path: 'home', 
     component: HomeComponent, 
     children: [ 
      { 
       path: "representatives", 
       component: RepresentativesComponent 
      }, 
      { 
       path: "dashboard", 
       component: DashboardComponent 
      }, 
      { 
       path: "", 
       redirectTo: "dashboard", 
       pathMatch: "full" 
      } 
     ] 
    } 
] 

@NgModule({ 
    imports: [ 
     RouterModule.forChild(homeRoutes) 
    ], 
    exports: [ 
     RouterModule 
    ] 
}) 
export class HomeRoutingModule { } 

あなたは正しくimportsセクション、ないdeclarationsであなたのHomeModuleをインポートする必要がありapp.routing.ts

import { AuthenticationComponent } from "./authentication/authentication.component"; 
import { HomeComponent } from "./home/home.component"; 

const routes: Routes = [ 
    { 
     path: 'auth/:action', 
     component: AuthenticationComponent 
    }, 
    { 
     path: 'auth', 
     redirectTo: 'auth/signin', 
     pathMatch: 'prefix' 
    }, 
    { 
     path: '', 
     redirectTo: 'home', 
     component: HomeComponent 
    } 
] 

export const routing = RouterModule.forRoot(routes); 
+8

あなたは、インポートセクションで子モジュールを宣言する必要があります宣言にではなく、親モジュールの –

+1

このコメントを回答として入力してください。それは私のために働いた! –

答えて

0

:私は美しく@NgModuleを説明this記事をお勧めします

@NgModule({ 
    imports: [BrowserModule, routing, HttpModule, ReactiveFormsModule, HomeModule], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent], 
    providers: [UserAuthenticationService] 
}) 
export class AppModule { 
} 

物事

関連する問題