AppLazyLoadingMoudle
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
const ROUTES : Routes = [
/*
ProductModule (defined in the feature module) is loaded lazily when navigating to /products
*/
{path: '', component: AppComponent},
{path : 'products', loadChildren : () => import('./product/product.module').then(m => m.ProductModule) }
];
@NgModule({
imports : [RouterModule.forRoot(ROUTES, {enableTracing: true})],
exports: [RouterModule]
})
export class AppLazyLoadingMoudle {}
MainAppModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpClientModule} from "@angular/common/http";
import {RouterModule, Routes} from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {CommonHttpService} from './http-services/common-http.service';
import { ProductModule } from './product/product.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
// ProductModule
],
providers: [CommonHttpService],
bootstrap: [AppComponent]
})
export class MainAppModule { }
ProductFeatureRoutingModule
import { RouterModule ,Routes} from '@angular/router';
import {NgModule} from '@angular/core';
import { ProductComponent } from './product.component';
import { ProductItemComponent } from './product-item/product-item.component';
const ROUTES : Routes = [
{path: '', component: ProductComponent},
{path: ':id', component: ProductItemComponent}
];
@NgModule({
imports : [RouterModule.forChild(ROUTES)],
exports: [RouterModule]
})
export class ProductFeatureRoutingModule{}
ProductFeatureModule
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductItemComponent } from './product-item/product-item.component';
import { ProductComponent } from './product.component';
import {CommonHttpService} from '../http-services/common-http.service';
import { ProductFeatureRoutingModule } from './product.routing.module';
@NgModule({
declarations: [
ProductComponent,
ProductItemComponent
],
imports: [
CommonModule,
ProductFeatureRoutingModule
],
providers : [CommonHttpService]
})
export class ProductFeatureModule { }
app.component.html
<!-- Toolbar -->
<div class="toolbar" role="banner">
<span>Welcome</span>
</div>
<div class="content" role="main">
<!-- Highlight Card -->
<div class="card highlight-card card-small">
<span>{{ title }} app is running!</span>
</div>
<div class="card-container">
</div>
<div class="card-container">
</div>
<!-- Terminal -->
<div class="terminal" >
</div>
<!-- Links -->
<div class="card-container">
</div>
<!-- Footer -->
<footer>
Love Angular?
</footer>
</div>
<router-outlet></router-outlet>
Error: main.ts:6 ERROR Error: Uncaught (in promise): Error: NG04002: Cannot match any routes. URL Segment: 'products' Error: NG04002: Cannot match any routes. URL Segment: 'products' at Recognizer.noMatchError (router.mjs:3655:16)
Versions:
- Angular CLI: 16.2.0 Node: 16.18.0 Package Manager: npm 8.19.2
Angular: 16.2.0 animations, cli, common, compiler, compiler-cli, core, forms platform-browser, platform-browser-dynamic, router
| Package | Version |
|---|---|
| @angular-devkit/architect | 0.1602.0 |
| @angular-devkit/build-angular | 16.2.0 |
| @angular-devkit/core | 16.2.0 |
| @angular-devkit/schematics | 16.2.0 |
| @schematics/angular | 16.2.0 |
| rxjs | 7.8.1 |
| typescript | 5.1.6 |
| zone.js | 0.13.1 |
I am attempting to access ProductComponent from ProductFeatureModule using lazy loading technique from the root module(MainAppModule) with a separate routing module AppRoutingModule for better organization of code.
The products route loads successfully if I directly import the product into MainAppModule but fails when implementing lazy loading route concepts. I am uncertain as to why this is not functioning and what exactly am I overlooking?