请求提供符合Angular官方定义的路由特性模块示例

Alright, let's walk through concrete examples of Angular routed feature modules that follow all the official guidelines you referenced. I'll cover both lazy-loaded (the most common type) and preloaded variants, with explanations of how each aligns with the rules.

Lazy-Loaded Routed Feature Module Example #

This is the standard case—since all lazy-loaded modules qualify as routed feature modules. Let's create a ProductsModule for managing product data:

1. The Feature Module File (products.module.ts) #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';

// Define routes scoped to this module
const routes: Routes = [
  {
    path: '', // Acts as the module's root when lazy-loaded (matches the parent route path)
    component: ProductListComponent,
    children: [
      { path: ':id', component: ProductDetailComponent } // Nested route for product details
    ]
  }
];

@NgModule({
  declarations: [ProductListComponent, ProductDetailComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes) // Use forChild() instead of forRoot() for feature modules
  ]
  // No exports array: routed feature modules don't need to expose components (they're only used via routing)
  // No providers array: avoid app-wide singletons here—only add module-scoped services if necessary
})
export class ProductsModule { }

2. Configure Lazy Loading in the Root Routing Module (app-routing.module.ts) #

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

const routes: Routes = [
  // Other root routes (e.g., home, auth)
  {
    path: 'products',
    // Lazy-load the module when the user navigates to /products
    loadChildren: () => import('./products/products.module').then(m => m.ProductsModule)
  }
];

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

Compliance Check for Lazy-Loaded Variant: #

• ✅ It's a lazy-loaded module, so it qualifies as a routed feature module
• ✅ No exports: components are only used internally via routing, never in external templates
• ✅ Not imported in AppModule: only referenced via loadChildren to avoid preloading
• ✅ No app-wide providers: follows the guideline to avoid singleton services in routed feature modules

Preloaded Routed Feature Module Example #

Preloaded modules are still routed feature modules, but they need to be imported in another module so the compiler knows about their components. Let's create an OrdersModule:

1. The Feature Module File (orders.module.ts) #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { OrderListComponent } from './order-list/order-list.component';
import { OrderDetailComponent } from './order-detail/order-detail.component';

const routes: Routes = [
  {
    path: '',
    component: OrderListComponent,
    children: [
      { path: ':id', component: OrderDetailComponent }
    ]
  }
];

@NgModule({
  declarations: [OrderListComponent, OrderDetailComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class OrdersModule { }

2. Import the Module in AppModule #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { OrdersModule } from './orders/orders.module'; // Import the preloaded module

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    OrdersModule // Required so the compiler can find the module's components for preloading
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Enable Preloading in app-routing.module.ts #

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

const routes: Routes = [
  // Other routes
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules // Preload the module after the app initializes
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Compliance Check for Preloaded Variant: #

• ✅ Imported in AppModule: allows the compiler to recognize its components for preloading
• ✅ No exports: components are still only used via routing
• ✅ Avoids app-wide providers: follows the same guideline as lazy-loaded modules

Key Additional Notes #

• Always use RouterModule.forChild() for routed feature modules—forRoot() is reserved for the root routing module to avoid duplicate router services.
• Never import a lazy-loaded routed feature module into any other module (including AppModule)—this will trigger immediate loading and break the lazy-loading pattern.
• If you must add services to a routed feature module, make them module-scoped (e.g., @Injectable({ providedIn: ProductsModule })) instead of using providedIn: 'root' to prevent them from becoming app-wide singletons.

内容的提问来源于stack exchange，提问作者stephan.peters