10

I have a problem with lazy loading not about to route to a named router-outlet. Can someone look at where I when wrong? I have a mainpage where there is a link to Product -> default router outlet and Product Detail -> named router outlet.

  <div>
   <div><a [routerLink]="['product']"> Product </a> </div>
   <div><a [routerLink]="['productdetail',{outlets:{productdetail: 'detail'}}]"> Product Detail </a> </div>
  <div> <router-outlet></router-outlet></div>
  <div> <router-outlet name="detail"></router-outlet>
</div>

Below is the plunker code.

Plunker Code

AlbertK
  • 429
  • 2
  • 8
  • 21

3 Answers3

13

This is known bug, you can track the issue here

The workaround or we can say solution to this issue is, use non-empty paths for your top level routes if auxilary(i.e. named) routes exist in a lazy loaded module.

The only flaw I can see is, an additional url segment added in routes

MainRoutingModule: Top level non-empty path(i.e. "path: 'load'")

import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { MainpageComponent } from './mainpage.component';
import { ProductComponent } from './product.component';
import { ProductDetailComponent } from './productdetail.component';

const childroutes: Routes = [

 { path: 'load', component: MainpageComponent  ,
    children: [ 
      {path: 'product', component: ProductComponent
      {path: 'productdetail', component: ProductDetailComponent,
        outlet: 'detail' 
      },

    ]
 },


];

export const routing: ModuleWithProviders = RouterModule.forChild(childroutes);

const newLocal: NgModule = {
    imports: [RouterModule.forChild(childroutes) ],
    exports: [RouterModule, ],
    declarations: []
};

@NgModule(newLocal)


export class MainRoutingModule { }

MainpageComponent:The correct syntax to use the secondary routes.

[routerLink]="[{outlets:{detail:['productdetail']}}]"

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-main',
  template: `
  <div>

  <div><a [routerLink]="['product']"> Product </a> </div>
  <div><a [routerLink]="[{outlets:{detail:['productdetail']}}]"> Product Detail </a> </div>
  <div> <router-outlet></router-outlet></div>
  <div> <router-outlet name="detail"></router-outlet>

</div>
  `,
  encapsulation: ViewEncapsulation.None,
})

export class MainpageComponent {}

LoginComponent:

Use [routerLink]="['mainpage/load']" to load the main module.

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-login',
  template: `This is login page place holder <br> <a [routerLink]="['mainpage/load']">Go to Main Page</a>`,

})

export class LoginComponent implements Oninit, OnDestroy {
constructor() {}

ngOnInit(): void {}

}

Demo:https://plnkr.co/edit/0ZpNL3lvbRbexLzQqRZh?p=preview

mohit uprim
  • 5,226
  • 2
  • 24
  • 28
  • Thanks for pointing out that it is a bug. Thanks again for fixing the code. Hope this will help others. – AlbertK Nov 26 '17 at 00:27
  • The referenced issue is closed. You can track it now here https://github.com/angular/angular/issues/12842 – Filip Molcik Jul 12 '18 at 11:47
  • 1
    I'm trying to get a Nativscript-angular app up and running and this just fixed an issue for me regarding routing. Thank you! – iKnowNothing Dec 20 '19 at 15:32
  • @mohit-uprim I have nested lazy loaded modules in my application and am trying to route to a lazy module inside of another component with a named router, how can I change my routing configurations to allow for this? I have my demo code here https://stackblitz.com/edit/angular-nested-routeroutlets?embed=1&file=src/app/dashboard/modules/content/components/sidebar/sidebar.component.ts – Dale Aug 06 '20 at 04:35
0

Let's say routes are part of profile ProfileComponent (example.com/profile)

profile.component.ts

<a routerLink="/profile/about">About</a>
<a routerLink="/profile/edit">Edit</a>
<a routerLink="/profile/settings">Settings</a>
<router-outlet></router-outlet>

There are three different components:

  • AboutComponent
  • EditComponent
  • SettingsComponent

Then routes will look like:

{
    path: 'profile',
    component: ProfileComponent,
    children: [
        {
            path: 'about',
            component: AboutComponent
        },
        {
            path: 'edit',
            component: EditComponent
        },
        {
            path: 'settings',
            component: SettingsComponent
        }
    ]
}
Nebojsa Sapic
  • 9,285
  • 1
  • 22
  • 23
  • What if we have 3 different modules instead of components? I have a login and 3 more routes that are lazy loaded modules with close to 5 submodules in each one, so how does it change the outlet calls since we cannot add outlet parameter to lazy loaded routes and all subfolders are in the same root level which is app folder, so how this has to be implemented? – Luis Parada Sep 17 '18 at 20:43
  • my routes are like this: ``` { path: "", canActivate: [AuthGuard], loadChildren: "./login/login.module#LoginModule" }, { path: "login", loadChildren: "./login/login.module#LoginModule" }, { path: "home", loadChildren: "./home/home.module#HomeModule" }, { path: "message", loadChildren: "./message/message.module#MessageModule" }, { path: "newConversation", loadChildren: "./newConversation/newConversation.module#NewConversationModule" }, { path: "account", loadChildren: "./account/account.module#AccountModule" }, ``` how do we call the named outlet exactly? – Luis Parada Sep 17 '18 at 20:47
  • Hey @LuisParada Please check this answer if it can help https://stackoverflow.com/questions/41857876/angular-2-submodule-routing-and-nested-router-outlet – Nebojsa Sapic Sep 20 '18 at 06:36
  • 2
    But this isn't lazy loading – Simon_Weaver Feb 15 '19 at 08:56
0

Got the solution to the problem, by avoiding empty paths "". Thanks to the courtesy of Domenic Helfenstein, who took time to reproduce the problem here.

Tomasz O.
  • 534
  • 7
  • 13