I try to create an app with two differents module, where one for my front-office and one for my back-office. Route work perfectly with the front-office, I made it for my main module.
When I navigated with the second module, when I tip the link in the browser navigation bar, It redirect me to the perfect component. But when I use routeLink inside my template to navigate inside my back-office, it doesn't work.
Here's my configuration of second module (back.module.ts) :
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BackComponent } from './back.component';
import { Page1Component } from '../page1.component';
import { Page2Component } from '../page2.component';
@NgModule({
declarations: [
BackComponent,
Page1Component,
Page2Component
],
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'back',
component: MainAdministrationComponent,
children: [
{
path: 'page1',
component: Page1Component
},
{
path: 'page2',
component: Page2Component
},
{
path:'',
redirectTo: '/back/page1',
pathMatch: 'full'
}
]
}
])
],
providers: [],
bootstrap: [BackComponent]
})
export class BackModule { }
This is my template inside back.component.hmtl
<ul class="nav navbar-nav">
<li>
<a route-link="/back/page1" routeLinkActive="active"><i class="material-icons">home</i> Page 1</a>
</li>
<li>
<a route-link="/back/page2" routeLinkActive="active"><i class="material-icons">event</i> Page 2</a>
</li>
</ul>
In my back-office module I use angular material and I don't know if it have conflict with something
In Angular you only can to have one RouterModule.forRoot([]) usually it calls app.module and the others modules use RouterModule.forChild().
I use the signature for link
<a [routerLink]="['/examplePath']" routerLinkActive="active">
and
<router-outlet></router-outlet>
for insert the template of component.
I hope that it helps you