I have an angular app which is loading lazily module.

At first the app is navigating to home where it loads the module ( named module1) :

main routing :

const routes: Routes = [
    { path: "", redirectTo: "/home", pathMatch: "full" },
    { path: "home", loadChildren: "./module1/module1.module#Module1Module" }, 

];

At module1 - there's also routing table :

const routes: Routes = [
    {
        path: "", ponent: Home1Component,
        children: [
            { path: 'bird', outlet: 'under', ponent: Home2Component } 
        ]
    }
];

So since it's loading lazily , when the app starts - it goes to /home where there it loads the Home1Component

But Home1Component also has a button in it which suppose to set a value to the outlet route .

home1ponent.html:

<input value="click to activate aux route"  type="button" (click)="go()"/>
<router-outlet  ></router-outlet>
<router-outlet name='under'></router-outlet>  //<---- I want to activate  only this

This is how I try to activate the outlet route :

  public go() {
    this.router.navigate([{ outlets: { under: ['bird'] } }], { relativeTo: this.route })
  }

But I get an error :

Error: Cannot match any routes. URL Segment: 'home'

Question :

Why am I getting this error and how can I fix it ?

Online code here : Stackblitz

I have an angular app which is loading lazily module.

At first the app is navigating to home where it loads the module ( named module1) :

main routing :

const routes: Routes = [
    { path: "", redirectTo: "/home", pathMatch: "full" },
    { path: "home", loadChildren: "./module1/module1.module#Module1Module" }, 

];

At module1 - there's also routing table :

const routes: Routes = [
    {
        path: "", ponent: Home1Component,
        children: [
            { path: 'bird', outlet: 'under', ponent: Home2Component } 
        ]
    }
];

So since it's loading lazily , when the app starts - it goes to /home where there it loads the Home1Component

But Home1Component also has a button in it which suppose to set a value to the outlet route .

home1.ponent.html:

<input value="click to activate aux route"  type="button" (click)="go()"/>
<router-outlet  ></router-outlet>
<router-outlet name='under'></router-outlet>  //<---- I want to activate  only this

This is how I try to activate the outlet route :

  public go() {
    this.router.navigate([{ outlets: { under: ['bird'] } }], { relativeTo: this.route })
  }

But I get an error :

Error: Cannot match any routes. URL Segment: 'home'

Question :

Why am I getting this error and how can I fix it ?

Online code here : Stackblitz

• javascript
• angular
• angular-routing

• I believe this is a bug with angular lazy loading aux route. I had a similar issue. This might help stackoverflow./questions/45394728/… – Jason White Commented Dec 17, 2017 at 18:02
• @jmw5598 I see your answer but can you please apply this to my code? Because I dont see how it's going to work – Royi Namir Commented Dec 17, 2017 at 18:25
• I can. I'll apply it as soon as I can get in a puter. Might be a few hours. – Jason White Commented Dec 17, 2017 at 18:28

1 Answer 1

Well with the help of @jmw5598 who referenced me to the problem/bug with the router .

There is a problem with default empty location for lazy loaded modules.

Here is a working solution for the problem .

The key thing to understand is that lazy modules should not have empty root path

Related specific description :