Hello All,
I am facing one issue related to routing, I am having parent routing where I want to load few data which is common to all child routs. And I am seeing the url is changing in browser but its not actually loading the child component.
Here is AppRoutingModule:
import { NgModule } from ‘@angular/core’;
import { PreloadAllModules, RouterModule, Routes } from ‘@angular/router’;
const routes: Routes = [
{ path: ‘’, redirectTo: ‘testseries’, pathMatch: ‘full’ },
{
path: 'login',
loadChildren: () => import('./Page/login/login.module').then( m => m.LoginPageModule)
},
{
path: 'course',
loadChildren: () => import('./Page/course/course.module').then( m => m.CoursePageModule)
},
{
path: 'testseries',
loadChildren: () => import('./Page/test/test.module').then( m => m.TestPageModule)
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
Its navigating to testseries and its loading file in testseries component I am loading few data which is required for all child routs
import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
import { TestPage } from ‘./test.page’;
const routes: Routes = [
{
path: 'exams',
component: TestPage,
children: [
{ path: '', redirectTo: 'examlisting', pathMatch: 'full' },
{
path: 'examlisting',
loadChildren: () => import('./examlisting/examlisting.module').then(m => m.ExamlistingPageModule)
},
{
path: 'testlisting',
loadChildren: () => import('../../Page/test/testlisting/testlisting.module').then(m => m.TestlistingPageModule)
}
]
},
// {
// path: ‘’,
// redirectTo: ‘/testseries/exams/examlisting’,
// pathMatch: ‘full’
// }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class TestPageRoutingModule { }
in the browser I am seeing the URL is getting changed to http://localhost:/testseries/exams/examlisting but it not loading examlisting component. Can someone help me in this what mistake I am doing.