Angular 2 - Unerwartete Modul von AppModule

Question

Ich bin neu zu eckig und versuchen, meine Module in Angular2 App mit der folgenden Verzeichnisstruktur zu trennen.

Ich habe mein Modul und andere in der AppModule erklärte Komponenten, aber ich einen Fehler in der Browser-Konsole bekommen, dass 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 { } 

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

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

Answer 1

Sie benötigen korrekt importieren HomeModule im imports Abschnitt nicht declarations:

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

Ich empfehle this Artikel, die sehr schön die @NgModule erklärt Thing