Angular 6 lazy loading problem with routes

Question

I want use lazy loading in your app. A have 2 modules: login and cars. Lazy loading is working fine, but route /add-car not working. Why? Path /add-car is not found and redirect to PageNotFoundComponent.

app.routing.module.ts

const appRoutes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'login'
    },
    {
        path: 'cars',
        canLoad: [AuthCanLoadGuard],
        loadChildren: './cars/cars.module#CarsModule',
    },
    {
        path: 'user-account',
        component: UserAccountComponent,
        canActivate: [AuthGuardsService]
    },
    {
        path: '**',
        component: PageNotFoundComponent
    }
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes, {enableTracing: true})],
    exports: [RouterModule]
  })

cars.routing.module.ts

const carsRoutes: Routes = [
    {
        path: '',
        component: CarsComponent,
        children: [
            {
                path: '',
                component: CarsListComponent,
                resolve: { cars : CarsListResolve } // przeniesione z app.routing.module.ts
            },
            {
                path: ':id',
                component: CarsDetailsComponent,
                canDeactivate: [FormCanDeactivateGuard],
                resolve: { car: CarResolve }
            }
        ]
    },
    {
        path: '/add-car',
        component: AddCarComponent,

    }
];

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

Aragorn · Accepted Answer · 2018-12-20 19:50:30Z

2

Path cannot start with a slash. Adjust /add-car to add-car:

{
        path: 'add-car',
        component: AddCarComponent,

    }

And, as mentioned in the answer above, you'll also need the /cars context. As add-car is a child, it is only available under /cars, so path you'd use is in the browser is /cars/add-cars

edited Dec 20, 2018 at 19:50

answered Dec 20, 2018 at 19:45

Aragorn

5,3295 gold badges28 silver badges40 bronze badges

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

Comments

nircraft · Accepted Answer · 2018-12-20 19:48:47Z

1

You should be redirecting to cars/add-car since add-car is the part of cars.routing.module.ts; Also when you route, make sure to use { relativeTo: this.route }. Ex: this.router.navigate(['../add-car'], { relativeTo: this.route });

edited Dec 20, 2018 at 19:48

answered Dec 20, 2018 at 19:37

nircraft

8,5085 gold badges33 silver badges46 bronze badges

Comments

maciek77 · Accepted Answer · 2018-12-21 06:19:49Z

0

If I can get /car-add path I should add this path in app.routing.module.ts? It will be correct add addCarComponent outside cars module?

answered Dec 21, 2018 at 6:19

maciek77

276 bronze badges

Collectives™ on Stack Overflow

Angular 6 lazy loading problem with routes

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related