각도 2 - AppModule에 의해 예기치 않은 모듈이 선언되었습니다.

Question

다음과 같은 디렉토리 구조를 갖는 Angular2 앱에서 각진하고 새로운 모듈을 분리하려고합니다.

나는 나의 모듈과 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 { } 

홈 라우팅 .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 { } 

당신은 제대로 가져올 필요

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); 

Answer 1

app.routing.ts 당신의 HomeModuleimports 섹션에서하지 declarations :

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

나는 아름답게 @NgModule을 설명 this 기사를 추천합니다 물건