Routing error finding routing module in test angular project-CodePudding

I was running a test project on lazy loading and followed the pluralsite article exactly (as far as I can tell) but I get this error when trying to follow the link to my component. The error says it can't find the first.module.

It seems pretty simple. The article is:

The files look like:

The code looks like:

app.module.ts:

The app-routing.module.ts:

first-routing.module.ts:

first.module.ts:

app.component.html:

I also tried changing the route in app-routing.module.ts to:

That just got me the same error with this new routing:

I looked at Sakthi's suggestion, which does work but not sure why the other format doesn't work. I also noticed that when looking at the DevTools the first-first-module.js doesn't show up as the author mentioned would appear when I hit the "First" link. It followed the path and displayed the component, but didn't show up in the network tab of DevTools. Is that because I didn't use the other format?

Thanks,

Tom

CodePudding user response：

You don't need to include the first.module file path in app-routing.module.ts .You have to import the first.module in app-routing.module.ts and use it like this.

import {FirstModule} from './first/first.module';
const routes: Routes = [
    {
        path: 'First',
        loadChildren: () => FirstModule
    },
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

CodePudding user response：

In Angular version 8, loadChildren string syntax was deprecated you can use new import() syntax

in your app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FirstModule } from './first/first.module';

const routes: Routes = [
    {
        path: 'First',
        loadChildren: () => import('./first/first.module').then(m => m.FirstModule)
    },
  ]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }