CODEWITHSUNDEEP
angulartypescriptangular5
Valentine
Valentine

Reputation: 325

Angular 5 : Different router-outlet in different modules + lazy loading

I have two modules and each have a routing module file and a router-outlet within their html. I want to load components depending in which module I am.

My file tree look like this:

project
|-- module2
|-- -- profil
|-- -- - profil.component.html 
|-- -- - profil.component.ts
|-- -- - profil.component.spec.ts
|-- -- - profil.component.css
|-- -- module2-routing.module.ts
|- module1-routing.module.ts
|- module1.module.ts
|- module1.component.ts
|- module1.component.spec.ts
|- module1.component.css

I have the following files:

module1-routing.module.ts 

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'module2', loadChildren: './module2/module2.module#Module2Module' }
];

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

module1.component.html

<router-outlet name="m1"></router-outlet>

module2-routing.module.ts

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

import { HomeComponent } from './home/home.component';
import { ProfilComponent } from './profil/profil.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'profil', component: ProfilComponent }
];

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

module2/home.component.html

<div id="module2-home">

  <app-header></app-header>
  <router-outlet name='m2'></router-outlet>

</div>

I tried to use the outlet option (example: { path: 'profil', component: ProfilComponent, outlet: 'm2' } ) in my routing files, but got this error :

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

Upvotes: 1

Views: 3629

Answers (2)

Abdus Sattar
Abdus Sattar

Reputation: 289

// appRouting-routing.module.ts
        const routes: Routes = [
      { path: '', redirectTo: '/login', pathMatch: 'full' },
      { path: 'login', component: LoginComponent },
      { path: 'dashboard', component: DashboardComponent },
      {
        path: 'modules', component: ModulesComponent,
        children: [
          { path: 'module1', component: Module1Component, children: Module1_ROUTE },
          { path: 'module2', component: Module2Component, children: Module2_ROUTE }
        ]
      }
    ];


    //export your child routes from your module1 and module2 routing.ts files
    //example:
   export const Module1_ROUTE: Routes = [
        { path: '', redirectTo: '/home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent }
    ];

refer child routes documentation. This will resolve your problem.

Upvotes: 2

Abdus Sattar
Abdus Sattar

Reputation: 289

To avoid ambiguity, Use your module name in path for your routes in such a way that no two routes have the same path. Hope this will solve your problem.Refer Angular 2 Different modules same routing

Upvotes: 0

Related Questions