Having two modules with routing module files and router-outlets in their html, I aim to load components based on the current module.
The file tree structure is as follows:
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
The relevant files are:
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>
Setting the outlet option (example: { path: 'profil', component: ProfilComponent, outlet: 'm2' } ) in my routing files triggered this error :
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home'
Error: Cannot match any routes. URL Segment: 'home'