模块路由路径延迟加载问题。导航到 http://localhost:4200/products 时出错

Question

AppRoutingMoudle

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 AppRoutingMoudle {}

---

应用模块

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, //provides HttpClient service that can be 
                     // injected into component & services
   
   // ProductModule
  ],
  providers: [CommonHttpService], // provide the HttpService globally
  bootstrap: [AppComponent]
})
export class AppModule { }

---

产品路由模块

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 ProductRoutingModule{}

---

产品模块

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 { ProductRoutingModule } from './product.routing.module';

@NgModule({
  declarations: [
    ProductComponent,
    ProductItemComponent
  ],
  imports: [
    CommonModule,
    ProductRoutingModule
  ],
  providers : [CommonHttpService] // Make HttpService available for product components
                                  // and its child components.
})
export class ProductModule { }

---

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>

---

错误：main.ts：6错误错误：未捕获（承诺中）：错误：NG04002：无法匹配任何路由。 URL 段：“产品” 错误：NG04002：无法匹配任何路由。 URL 段：“产品” 在Recognizer.noMatchError（router.mjs：3655：16）

---

版本：

• Angular CLI：16.2.0 节点：16.18.0 包管理器：npm 8.19.2

角度：16.2.0 动画、cli、常见、编译器、compiler-cli、核心、表单 平台浏览器、平台浏览器动态、路由器

套餐	版本
@Angular-devkit/架构师	0.1602.0
@Angular-devkit/构建-Angular	16.2.0
@Angular-devkit/核心	16.2.0
@Angular-devkit/原理图	16.2.0
@schematics/角度	16.2.0
rxjs	7.8.1
打字稿	5.1.6
zone.js	0.13.1

我正在尝试使用根模块（AppModule）的延迟加载从 ProductModule 访问 ProductComponent，使用单独的路由模块 AppRoutingModule 以获得更清晰的代码。

如果我直接将产品导入 AppModule，则产品路由加载成功，但如果我使用延迟加载路由概念，则会失败。 我不明白为什么这不起作用，我到底错过了什么？

Answer 1

1. 导入产品模块到主模块
2. 创建产品模块和产品路由模块
3. 将产品路由模块导入产品模块