Angular 4 Lazy Loading with parameters

Question

Hello I am attempting to lazy load a "detail module" while also sending parameters via the URL.

Here is my lazy loaded route:

{
    path: 'venue/:name/:id',
    loadChildren: () => System.import('../containers/activity-detail/activity-detail.module').then((file: any) => {
        return file.default;
    })
},

I would like to route to this 'activity-detail.module' and then load details using the ":name", and "id:" parameters.

The module which loads has its own routes file.

export const VenueDetailRoutes: Route[] = [
    {
        path: '',
        redirectTo: 'venue/:name/:id',  
        pathMatch: 'full'
    },
    {
        path: 'venue/:name/:id', 
        component: VenueDetailComponent,
        data: {
            shouldDetach: true, // Route will be resused. See CustomResuseStrategy.
            title: null
        }
    },
    {
        path: '**',
        redirectTo: '/'
    }

];

It seems without the first default object nothing works. I get the error:

{
    path: '',
    redirectTo: 'venue/:name/:id', 
    pathMatch: 'full'
},

TypeError: Cannot read property 'path' of null

With the default object in place I get the error:

Error: Cannot redirect to 'venue/:name/:id'. Cannot find ':name'.

Any help would be greatly appreciated.

Stefan Falk · Accepted Answer · 2019-05-26 10:49:47Z

19

I don't think that this works:

{
    path: '',
    redirectTo: 'venue/:name/:id',  
    pathMatch: 'full'
},

It can't match an "empty" path to a path with parameters.

The syntax for your lazy loaded route is quite a bit more complex than mine. Mine looks like this:

{
    path: 'movies',
    loadChildren: './movies/movie.module#MovieModule'
},

Notice that "parent" route ('movies' in this example) is defined here on the lazy loaded route, and NOT repeated in the loaded modules routes.

For example:

RouterModule.forChild([
  { path: '', component: MovieListComponent },
  { path: 'search', component: MovieSearchComponent },
  { path: ':id', component: MovieDetailComponent }
])

I would think in your case that the loaded module's routes should look something like this:

export const VenueDetailRoutes: Route[] = [
    {  
       path: ':name/:id', 
       component: VenueDetailComponent,
        data: {
            shouldDetach: true, // Route will be resused. See CustomResuseStrategy.
            title: null
        }
    }    
];

(Though you may want to consider leaving off the custom reuse strategy until you have the basic routes working.)

edited May 26, 2019 at 10:49

Stefan Falk

25.8k62 gold badges224 silver badges422 bronze badges

answered Oct 24, 2017 at 23:38

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

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

4 Comments

David Aguirre Over a year ago

you def deserve a hug and cuddle. Thank you very much.

user292701 Over a year ago

ouch, and on same month as Harvey Weinstein outing.

Takatalvi Over a year ago

Great! It worked for my project this example for RouterModule.forChild was very helpful. A parameter in the lazy loading path for the module was my error and it affected the ngx-translator with localize-router so the url in the change of language gets errors.

Junaid Over a year ago

Thanks, mate, you saved my day. I was using { path: '/:id'} but from your answer, I got to knew that it has to be { path: 'id' } without the backslash.

Collectives™ on Stack Overflow

Angular 4 Lazy Loading with parameters

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related