Angular5 loadchildren component failed to load

/ / 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 { }

Mar.03,2021

put SettingsComponent,ProfileSettingsComponent,PasswordSettingsComponent in declarations of settings.module.ts , and delete their parts from app.module.ts .

Menu