Issue
So,I have right now 2 modules with in my app. Each have their own Routing module.
Only the Module components are being loaded and the rest is not.
I tried to get all the possible routes which are defined in the app and I got the following, so I know that the routes are not even being registered, But somehow I don't get an error saying the URL has not been defined.
The Output is as follows.
/ create-test.component.ts:20
/create-test create-test.component.ts:20
/login create-test.component.ts:20
My Routing files are as follows:
CreateTestRoutingModule
import { NgModule } from "@angular/core";
import { CreateTestComponent } from './create-test.component';
import { RouterModule, Routes } from '@angular/router';
import { DesignTestComponent } from './design-test/design-test.component';
import { PlanTestComponent } from './plan-test/plan-test.component';
import { TestHistoryComponent } from './test-history/test-history.component';
import { QuestionsListComponent } from './questions-list/questions-list.component';
const routes: Routes = [
{
path: '',
component: CreateTestComponent,
children: [
{
path: 'design-test', component: DesignTestComponent
},
{
path: 'plan-test', component: PlanTestComponent
},
{
path: 'test-history', component: TestHistoryComponent
},
{
path: 'questions-list', component: QuestionsListComponent
}
]
}
]
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CreateTestRoutingModule {
}
DashboardRoutingModule
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { HomeComponent } from './home/home.component';
import { SignoutComponent } from './signout/signout.component';
import { AccountComponent } from './account/account.component';
const routes: Routes = [
{
path: '',
component: DashboardComponent,
children: [
{ path: '', redirectTo: 'home'},
{ path: 'home', component: HomeComponent},
{ path: 'account', component: AccountComponent},
{ path: 'signout', component: SignoutComponent}
]
}
]
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DashboardRoutingModule{
}
AppRoutingModule
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './shared/guard/auth.guard';
import { LoginComponent } from './login/login.component';
const routes: Routes = [
{ path: '', loadChildren: './dashboard/dashboard.module#DashboardModule', canActivate: [AuthGuard]},
{ path: 'create-test', loadChildren: './createtest/create-test.module#CreateTestModule', canActivate: [AuthGuard]},
{ path: 'login', component: LoginComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
My end result that i want is like this
/
/login
/home
/account
/signout
/create-test
/create-test/design-test
/create-test/plan-test
/create-test/test-history
/create-test/questions-list
P.S
I would like an explanation regarding why it is not throwing an error for a route that is not possible and also how I can go to /home
but its not on the possible routes.
I don't know how the documentation has confused me.
Thanks in advance !
Solution
Only the Module components are being loaded and the rest is not.
This is because your AppRoutingModule
defines all the routes as lazy loaded and angular has not yet got a chance to load any of your lazy loaded modules.
Reason
The order of routes in your code is such that the first ''
route matches any/every url, so angular returns the 1st entry alone.
Try the below code -
const routes: Routes = [
{ path: 'create-test', loadChildren: './createtest/create-test.module#CreateTestModule', canActivate: [AuthGuard]},
{ path: 'login', component: LoginComponent},
{ path: '', loadChildren: './dashboard/dashboard.module#DashboardModule', canActivate: [AuthGuard]},
];
Answered By - Pankaj
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.