Angular App-Routing LoadChildren 找不到模块

Question

I am new to Angular and following a video tutorial. I am stuck on the App-Rounting where it is trying to load child components. Here is the code so far

app-routing.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule, Routes } from "@angular/router";

import { HomeComponent } from "./home/home.component";

const appRoutes: Routes = [
  { path: "", component: HomeComponent },
  {
    path: "customers",
    loadChildren: "../app/customers/customers.module#CustomersModule"
  }
];

@NgModule({
  imports: [CommonModule, RouterModule.forRoot(appRoutes)], // add the routes to import array
  exports: [RouterModule], // after import, export the RouterModule after adding appRoutes
  declarations: []
})
export class AppRoutingModule {} 

I tried change the loadChildren: "../app/customers/customers.module#CustomersModule" to loadChildren: "app/customers/customers.module#CustomersModule"

The file tree structure is the following

src\
  app\
    app-routing.module.ts
    customers\
      customers.module.ts
      customers.module.spec.ts

I am not sure why it can't find and load the customers.module.ts. At first, I didn't have the customers.moudle.spec.ts and added it but it still throw the same error on the chrome console.

node version is v14.16.0 node version is 6.14.11

Any help is appreciated for this newbie.

Thanks

Answer 1

I think your tutorial is old,you must use new syntax

const routes: Routes = [
  {
    path: 'items',
    loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
  }
];