I am trying to lazy load a module while also sending along a parameter.
{
path: 'venuedetail',
loadChildren: () => System.import('../containers/venue-detail/venue-detail.module').then((file: any) => {
return file.default;
})
},
basically I would like to lazy load this module while send a parameter like: venuedetail/40 <- this number represents an ID.
Here is the module I am lazy loading:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { VenueDetailRouterModule } from './venue-detail.routes';
import { VenueDetailComponent } from './venue-detail.component';
import { VenueDetailService } from '../../shared/http/venue-detail/venue-detail.service';
@NgModule({
imports: [
CommonModule,
VenueDetailRouterModule
],
declarations: [
VenueDetailComponent
],
providers: [VenueDetailService],
exports: [RouterModule]
})
export default class VenueDetailModule { }
and here is the route config for the lazy loaded module.
import { Routes, RouterModule } from '@angular/router';
import { VenueDetailComponent } from 'app-containers';
let VENUEDETAILROUTES: Routes = [{
path: '',
component: VenueDetailComponent,
children: [
{
path: ':id',
component: VenueDetailComponent
}
]
}];
export let VenueDetailRouterModule = RouterModule.forChild(VENUEDETAILROUTES);
The url changes to venuedetail/40 , but the component never initializes.