/ / loadchidren settings.module.ts routing error
/ / access http://localhost:4200/settings Error: Component SettingsComponent is not part of any NgModule or the module has not been imported into your module. error
/ / app-routing.module.ts (main routing module)
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
const routes: Routes = [
{
path: "settings",
loadChildren: "./modules/settings/settings.module-sharpSettingsModule"
}
];
@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 { }