My multiple router outlet link is not working in Angular

Question

I have added 2 router-outlet in my Angular app and when I am giving the URL for the other router-outlet, then the link is showing some error.

This is my app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
import { FrontpageComponent } from './Mycomponents/frontpage/frontpage.component';
import { RegisterpageComponent } from './Mycomponents/registerpage/registerpage.component';
import { LoginpageComponent } from './Mycomponents/loginpage/loginpage.component';

const routes: Routes = [
  {path: '', component: LoginpageComponent},
  {path: 'loginpage', component: LoginpageComponent},
  {path: 'registerpage', component: RegisterpageComponent},
  {path: 'frontpage', component: FrontpageComponent, outlet: 'dashboard'},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In this, I have added my routing.

This is my app.component.html:

<div class="main_wrapper">
    <div class="container no_padding">
        <nav>
                <a routerLink="/loginpage" class="mya2">Login</a>
                <a routerLink="/registerpage" class="mya2">Register</a>
                <a [routerLink]="['frontpage']" [skipLocationChange]="true" class="mya2">Other Page</a>
            </nav>
    </div>
    <div class="container-fluid no_padding">
        <div class="row no_margin">
            <div class="col-md-12 no_padding">
                <router-outlet></router-outlet>
            </div>

        </div>
    </div>

    <div class="container no_padding">
        <div class="row">
            <router-outlet name="dashboard"></router-outlet>
        </div>
    </div>
</div>

In this, my router outlet name dashboard is not working means the routing frontpage is showing the error, incorrect path.

The problem is that when I am clicking on the a tag with router link frontpage, it is showing an error.

Error:

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'frontpage' Error: Cannot match any routes. URL Segment: 'frontpage'

Any help is much appreciated.

Md Rafee Md Rafee · Accepted Answer · 2019-09-08T15:20:40

you can access the secondary router outlet by using (outletname: route) Example:

localhost:4200/loginpage(dashboard:frontpage)

Live Example: Stackblitz

I also implemented your case too. See the Example Stackblitz

My multiple router outlet link is not working in Angular

1 Answers