我是角色新手并尝试在具有以下目录结构的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 { }
家庭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);
答案 0 :(得分:16)
您需要在HomeModule
部分正确导入imports
,而不是declarations
:
@NgModule({
imports: [BrowserModule, routing, HttpModule, ReactiveFormsModule, HomeModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [UserAuthenticationService]
})
export class AppModule {
}
我推荐this文章,它精美地解释了@NgModule事物
答案 1 :(得分:0)
如果有人进行了建议的更正后仍遇到相同的问题,则package.lock.json可能来自另一个操作系统(例如,通过提交)或不是最新的。因此,建议删除package.lock.json并发送以下命令行:npm install