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         


        

Answer 1

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.)