2016-12-01 6 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 { } 

дом-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); 
+8

Вы должны объявить дочерние модули в разделе импорта родительского модуля, а не деклараций. –

+1

Вы должны поместить этот комментарий в качестве ответа. Это сработало для меня! –

ответ

0

Вам нужно правильно импортировать HomeModule в разделе imports, не declarations:

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

Я рекомендую this статью, которая прекрасно объясняет @NgModule вещь