Angular 2 - 由AppModule聲明的意外模塊

我是新來的角，並嘗試在具有以下目錄結構的Angular2應用程序中分離我的模塊。Angular 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 { }

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

來源

2016-12-01 mdanishs

你應該在imports部分聲明子模塊父模塊，而不是聲明。 –

你應該把這個評論作爲答案。它爲我工作！ –

您需要正確導入HomeModule在imports部分，不declarations：

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

我建議this物品，其精美的解釋@NgModule東西

來源

2017-09-21 13:40:28

Angular 2 - 由AppModule聲明的意外模塊

回答

相關問題