Angular路由定义：如何从单文件切换为多文件配置？

Hey there! I totally get wanting to split up your Angular routes into multiple files—keeping a single giant routing module can get messy fast as your app grows. Let me walk you through a couple of solid approaches to do this cleanly.

Approach 1: Split Routes by Feature Module (Eager Loading) #

This works great if you want to keep route definitions grouped with their respective feature modules, while still loading everything upfront.

Step 1: Create a Route File for Each Feature #

For your empresa module, create a dedicated route file (e.g., empresa.routing.ts) in the module's folder:

// src/app/modules/empresa/empresa.routing.ts
import { Routes } from '@angular/router';
import { EmpresaListaComponent } from './empresa-lista/empresa-lista.component';
import { EmpresaDetalheComponent } from './empresa-detalhe/empresa-detalhe.component';

export const empresaRoutes: Routes = [
  {
    path: 'empresas',
    children: [
      { path: '', component: EmpresaListaComponent },
      { path: ':id', component: EmpresaDetalheComponent }
    ]
  }
];

Step 2: Merge Routes in the Main Routing Module #

Update your app.routing.module.ts to import and spread the feature routes into the main route array:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
// Import the feature route array
import { empresaRoutes } from './modules/empresa/empresa.routing';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  // Merge the feature routes using the spread operator
  ...empresaRoutes,
  // Add other feature routes here (e.g., ...authRoutes, ...userRoutes)
  { path: '**', redirectTo: '' } // Always keep wildcard route at the END
];

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

Approach 2: Lazy Loading with Module-Specific Routing #

For larger apps, lazy loading is a better choice—it loads feature modules only when needed, improving initial load time. Each feature module gets its own routing module.

Step 1: Create a Routing Module for the Feature #

Make a EmpresaRoutingModule in your empresa module folder:

// src/app/modules/empresa/empresa-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { EmpresaListaComponent } from './empresa-lista/empresa-lista.component';
import { EmpresaDetalheComponent } from './empresa-detalhe/empresa-detalhe.component';

const routes: Routes = [
  {
    path: '', // Path is empty here because we define the parent path in the main route
    children: [
      { path: '', component: EmpresaListaComponent },
      { path: ':id', component: EmpresaDetalheComponent }
    ]
  }
];

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

Step 2: Update the Feature Module #

Make sure your EmpresaModule imports its routing module:

// src/app/modules/empresa/empresa.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EmpresaRoutingModule } from './empresa-routing.module';
import { EmpresaListaComponent } from './empresa-lista/empresa-lista.component';
import { EmpresaDetalheComponent } from './empresa-detalhe/empresa-detalhe.component';

@NgModule({
  declarations: [EmpresaListaComponent, EmpresaDetalheComponent],
  imports: [
    CommonModule,
    EmpresaRoutingModule // Import the feature routing module
  ]
})
export class EmpresaModule { }

Step 3: Configure Lazy Loading in Main Routing #

Update app.routing.module.ts to use lazy loading for the feature module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  // Lazy load the EmpresaModule when the 'empresas' path is accessed
  {
    path: 'empresas',
    loadChildren: () => import('./modules/empresa/empresa.module').then(m => m.EmpresaModule)
  },
  { path: '**', redirectTo: '' }
];

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

Quick Tips #

• Always place the wildcard (**) route at the end of your main route array to avoid overriding other routes.
• You can add route guards, resolvers, and other route configurations directly in each feature's route file to keep concerns separated.
• For very large apps, you can even split routes further within a feature (e.g., empresa-lista.routing.ts, empresa-detalhe.routing.ts) and merge them into the feature's main route array.

内容的提问来源于stack exchange，提问作者Rafael Augusto