Lazy load module with route params and named router outlet

Issue

I have a route / component that requires a route parameter and has a named outlet. I want to lazy load a module and activate this route. Here are my routes:

Profile Module (sub module) Routes:

const routes: Routes = [
{
  path: ':id', component: ProfileComponent
  children: [
   { path: 'list/:id', component: ListComponent, outlet: 'sidebar' },
   { path: 'risk/:id', component: RiskComponent, outlet: 'sidebar' }
  ], 
];

Parent Module Routes

const routes: Routes = [
  { path: 'projects/profile',
    loadChildren: './profile/profile.module#ProfileModule' }
 ]

Loading the route results in the error:

Error: Cannot match any routes. URL Segment: 'projects/profile/-3'

When I use an empty string for the path in the sub module, there is no error and the module loads but the component doesn't load. I found this help with lazy loading route params and this help with lazy loading named router outlets, but neither worked.

My question is: How do I lazy load a route with a route parameter and named router outlet?

--Edit--

Here is a demo app that shows my problem. I created 3 main routes: one that lazy loads a submodule without named outlets, one the that lazy loads with a named outlet, and one that doesn't use lazy loading. In the UI, the link to the route that has a named outlet produces the error above.

Solution

So after trial and error I found an answer. I created this demo that implements it. As a note I need multiple router-outlets with route params (the demo only contains a component that has one router outlet, but my actual app has two. Hence I need it to be named)

Parent Module

As Thomas Cayne mentions, the link to lazy loading the module is the following (Note the lack of :id route parameter. This is because this route is used for lazy loading only):

{ path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) },

Sub Module

The routing in the submodule is the following: (The top level route has the :id route param as its component needs to use the :id. The child outlet in my case requires an :id as well. The outlet uses the param to load its data.)

 const appRoutes: Routes = [
  { 
   path: 'test/:id', component: ProfileComponent,
   children: [
    { path: 'bar/:id', component: SidebarComponent, outlet:'sidebar' }
   ] 
  },
 ];

Parent Template

Finally the routerLink that correctly routes to the component with a named router outlet and route params through a lazy loaded module is as follows:

<a [routerLink]="['/', 'profile', 'test', 3, { outlets: { sidebar: ['bar', 3 ] } }]">Working Router outlet and route params</a>

Answered By - afriedman111