angular5 loadchildren component加载失败
//主路由模块loadchidren settings.module.ts路由报错
//访问http://localhost:4200/settings 出现Error: Component SettingsComponent is not part of any NgModule or the module has not been imported into your module. 错误
//app-routing.module.ts(主路由模块)
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'settings',
loadChildren: './modules/settings/settings.module#SettingsModule'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
//settings.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { SettingsComponent } from '../../Components/settings/settings.component';
import { PasswordSettingsComponent } from '../../Components/password-settings/password-settings.component';
import { ProfileSettingsComponent } from '../../Components/profile-settings/profile-settings.component';
export const ROUTES: Routes = [
{
path: '',
component: SettingsComponent,
children: [
{ path: 'profile', component: ProfileSettingsComponent },
{ path: 'password', component: PasswordSettingsComponent }
]
}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(ROUTES)
],
})
export class SettingsModule {}
//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SettingsComponent } from './Components/settings/settings.component';
import { ProfileSettingsComponent } from './Components/profile-settings/profile-settings.component';
import { PasswordSettingsComponent } from './Components/password-settings/password-settings.component';
@NgModule({
declarations: [
AppComponent,
SettingsComponent,
ProfileSettingsComponent,
PasswordSettingsComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
将
SettingsComponent,ProfileSettingsComponent,PasswordSettingsComponent
放在settings.module.ts
的declarations
中,把app.module.ts
中他们的部分删除。