//主路由模块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 { }
将
SettingsComponent,ProfileSettingsComponent,PasswordSettingsComponent
放在settings.module.ts
的declarations
中,把app.module.ts
中他们的部分删除。