4

I have some project and I want to use lazy loading for component. In app.module.ts file I removed from import section three record with my routing to different components. In my app-routing.module.ts I created APP_ROUTES like below:

const APP_ROUTES : Route[] = [
    { 
            path: '', pathMatch: 'full', 
        redirectTo: 'login'
    },
    { 
        path: 'cars', 
        loadChildren: 'app/cars/cars.module#CarsModule' 
    }
];

@NgModule({
        imports: [
            RouterModule.forRoot(APP_ROUTES)
        ],
        exports: [
            RouterModule
        ]
})

I have a main folder which name is cars and I pasted CarsRoutingModule from app.module.ts like I said before into cars.module.ts (section imports). I created ROUTES in my cars modul into cars-routing.module.ts like below:

const CARS_ROUTES : Route[] = [
    {
        path: '',
        component: <any> CarsComponent,
        children: [
            {
                path: '',
                component: <any>CarsListComponent
            },
            { 
                path: ':id', 
                component: <any>CarDetailsComponent,
                resolve: { car: CarResolve }
            }
        ]
    }
];

@NgModule({
        imports: [
            RouterModule.forChild(CARS_ROUTES)
        ],
        exports: [
            RouterModule
        ]
})

and I think it's ok. Ok, so I have second module login.module.ts where I pasted LoginRoutingModule from app.module.ts like I said before into login.module.ts (section imports). I created ROUTES like below:

const LOGIN_ROUTES : Route[] = [
     { 
         path: 'login', 
         component: <any>LoginComponent,
        }
];

@NgModule({
        imports: [
            RouterModule.forChild(LOGIN_ROUTES)
        ],
        exports: [
            RouterModule
        ]
})

and it looks good for me too. I compiled my project without errors. I have login screen so it good, but when I completed login and password and I am into dashboard - I don't see anything like chunk.js (into Sources tab too) like below: Debugger screen

Guess but correct me if I'm wrong - in angular 4+ we don't have chunk.js file? I checked something else. When I don't have lazy loading in my projekt I have more modules on my login site: enter image description here

Like we can see on the left side my debugger in ng folder I have: AppModule, CarsModule, CoreModule, LoginModule, SharedModule. When I add lazy-loading in the same place like up, I have only AppModule, CoreModule and like below: enter image description here

So now, can I be sure that my lazy-loading works good?

1 Answer 1

2

I know what was wrong. Code is very good but I used ng serve. When I used ng serve --aot(Ahead-of-Time) and I have cars.module.chunk.js!

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.