I recently started learning angular4 and currently working on routing in angular. I followed angular routing docs and started implementing some simple functionality of child routing. And I am stuck with it. Below is my code. Can anybody please tell what am I doing wrong?
Dashboard module is imported into root module which has its own routes insite it.
app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { DashboardModule } from './dashboard/dashboard.module';
@NgModule({
declarations: [
AppComponent,
PageNotFoundComponent,
],
imports: [
BrowserModule,
DashboardModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Root level routing module which has default route that redirects to dashboard compoent.
app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const routes: Routes = [
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
},
{
path: 'dashboard',
loadChildren: 'app/dashboard/dashboard.module#DashboardModule',
data: {preload: true}
},
{
path: 'login',
component: LoginComponent,
},
{
path: '**',
component: PageNotFoundComponent
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
export class AppRoutingModule { }
This is the routing configuration for child routes present in dashboard module
app/dashboard/dashboard-routing.ts
import { NgModule } from '@angular/core';
import { RouterModule, Route } from '@angular/router';
import { DispatchesComponent } from './dispatches/dispatches.component';
import { DashboardComponent } from './dashboard.component';
import { TransactionsComponent } from './transactions/transactions.component';
const dashBoardRoutes : Route[] = [
{
path: 'dashboard',
component: DashboardComponent,
pathMatch: 'full',
children: [
{
path: 'dispatches',
component: DispatchesComponent
},
{
path: 'txns',
component: TransactionsComponent
},
{
path: '',
component: DispatchesComponent,
pathMatch: 'full'
},
]
},
]
@NgModule({
imports: [
RouterModule.forChild(dashBoardRoutes)
],
declarations: [],
exports: [
RouterModule
]
})
export class DashboardRoutingModule { }
And finally I imported these routes into dashboard module
app/dashboard/dashboard.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard.component';
import { RouterModule } from '@angular/router';
import { SharedModule } from './../shared/shared.module';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { DispatchesModule } from './dispatches/dispatches.module';
import { TransactionsModule } from './transactions/transactions.module';
@NgModule({
imports: [
DispatchesModule,
CommonModule,
SharedModule,
TransactionsModule,
RouterModule,
DashboardRoutingModule,
],
declarations: [DashboardComponent]
})
export class DashboardModule { }
And here is html in dashboard component
dashboard.component.html
<p>
dashboard works!
</p>
<button routerLink="/login">Go to login</button>
<div>
<app-sidebar></app-sidebar>
</div>
<div class="dashboard-routes">
<button routerLink="dispatches">dispatches</button>
<button routerLink="txns">Transactions</button>
</div>
<div>
<router-outlet></router-outlet>
</div>
When I navigate to localhost:4200
it sucessfully redirects to dashboard as expected and displaying dispatches component inside it.
But when I click on either dispatches or txns. These child components are not rendering inside dashboards router-outlet
. and taking to this page below
What am I doing wrong?
This generally occurs when there is a mismatch in the routes specified, or a component which is not present in our routing configuration, or if there is the use of multiple routes in our angular application which is not properly configured.
Their order is important because the Router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. List routes with a static path first, followed by an empty path route, which matches the default route.
To set up a redirect, configure a route with the path you want to redirect from, the component you want to redirect to, and a pathMatch value that tells the router how to match the URL.
Do the following changes:
import { Routes } from '@angular/router';
const dashBoardRoutes : Routes = [
{
path: '',
component: DashboardComponent,
children: [
{
path: 'dispatches',
component: DispatchesComponent
},
{
path: 'txns',
component: TransactionsComponent
},
{
path: '',
component: DispatchesComponent
},
]
},
]
With the old configuration, to render DashboardComponent
, you would need to navigate to:
root/dashboard/dashboard
This is because you are prefixing all the lazy loaded routes with dashboard
already in the main routing config.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With