Why Lazy load routing is not working in angular12?-CodePudding

I have modules which i want to lazy load. But when i defining their lazy load routes so these routes are not working and not loading in browser. When i try to navigate to their route by browser so it takes me to dashboard every time.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CoreModule } from './core/core.module';
import { ClaimModule } from './modules/claim/claim.module';
import { DependentModule } from './modules/dependent/dependent.module';
import { ProfileModule } from './modules/profile/profile.module';

import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    CoreModule,
    ClaimModule,
    DependentModule,
    ProfileModule,
    FormsModule,
    RouterModule,
    ModalModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-module.routing.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './core/components/login/login.component';
import { AuthGuard } from './core/guard/auth.guard';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  {
    path: '',
    canActivate: [AuthGuard],
    loadChildren: () => import('./core/core.module').then(m => m.CoreModule)
  },
  {
    path: 'dependent',
    canActivate: [AuthGuard],
    loadChildren: () => import('./modules/dependent/dependent.module').then(m => m.DependentModule)
  },
  {
    path: 'profile',
    loadChildren: () => import('./modules/profile/profile.module').then(m => m.ProfileModule)
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

profile-module.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ProfileComponent } from './profile.component';

const routes: Routes = [
  { path: '', component: ProfileComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProfileRoutingModule { }

profile.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProfileComponent } from './profile.component';
import { ProfileRoutingModule } from './profile-routing.module';


@NgModule({
  declarations: [
    ProfileComponent
  ],
  imports: [
    CommonModule,
    ProfileRoutingModule
  ],
  exports: [ProfileComponent]
})
export class ProfileModule { }

core-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout/layout.component';

const routes: Routes = [

  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: () => import('./../modules/dashboard/dashboard.module').then(m => m.DashboardModule) },
    ]
  },
  {
    path: '**',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  }

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CoreRoutingModule { }

layout.component.html

<div class="wrapper w-100">

  <!-- Navbar -->
  <app-header></app-header>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <app-sidebar></app-sidebar>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <router-outlet></router-outlet>
  </div>
  <!-- /.content-wrapper -->

  <!-- Control Sidebar -->
  <app-control-sidebar></app-control-sidebar>
  <!-- /.control-sidebar -->

  <!-- Main Footer -->
  <app-footer></app-footer>
</div>
<!-- ./wrapper -->

Here is my all route configuration. But whenever i try to navigate to /profile route so it always takes me to dashboard. I don't know why it is not loading the module and its component.

CodePudding user response：

app-module.routing.ts

empty path should have pathMatch: 'full' otherwise all url will go to coreRoutingModule

{
    path: '',
    canActivate: [AuthGuard],
    loadChildren: () => import('./core/core.module').then(m => m.CoreModule),
    pathMatch: 'full'
  },

Docs: https://angular.io/api/router/Route#pathMatch

CodePudding user response：

Please post you app.module.ts for a better understanding