Angular 2-AppModule声明了意外模块 [英] Angular 2 - Unexpected Module declared by AppModule

问题描述

我是angel的新手，并试图在具有以下目录结构的Angular2应用程序中分离模块。

I am new to angular and trying to separate my modules in Angular2 app having the following directory structure.

我在AppModule中声明了我的模块和其他组件，但是我在浏览器控制台中遇到一个错误，即 AppModule声明了意外的HomeModule

I have my module and other components declared in the AppModule, but I am getting an error in browser console that 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

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

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

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

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

推荐答案

您需要正确导入进口部分中的> HomeModule ，而不是声明：

You need to correctly import your HomeModule in the imports section, not declarations:

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

我建议这篇文章很好地解释了@NgModule的事情

I recommend this article which beautifully explains the @NgModule thing

这篇关于Angular 2-AppModule声明了意外模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！