Hey there! Let's dive into how to set up clean, maintainable CRUD routes in Angular, along with some tried-and-true best practices for SPA routing—especially when you're working with lazy-loaded modules, which is super common in larger Angular apps.

一、构建合理的CRUD路由（以产品目录为例） #

You mentioned a basic setup:

• 列表页: /products
• 创建页: /products/create
• 详情页: /products/:id
• 编辑页: /products/:id/edit

This works, but as you noted, it can feel a bit disorganized if you don't structure it properly. The fix here is to leverage Angular's child routes and tie them to a lazy-loaded feature module, which keeps all product-related routing logic grouped together.

步骤1：在AppRoutingModule中配置懒加载入口 #

First, set up the root route that triggers lazy loading for the products module:

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 其他全局路由（比如首页、登录页）
  {
    path: 'products',
    // 懒加载products模块
    loadChildren: () => import('./products/products.module').then(m => m.ProductsModule)
  },
  // 404路由
  { path: '**', component: PageNotFoundComponent }
];

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

步骤2：在ProductsRoutingModule中配置CRUD子路由 #

Now, inside the lazy-loaded products module, define all CRUD routes as child routes under the empty path (which maps to /products):

// products-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductCreateComponent } from './product-create/product-create.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { ProductEditComponent } from './product-edit/product-edit.component';

const routes: Routes = [
  {
    path: '', // 对应根路径 /products
    component: ProductListComponent,
    children: [
      { path: 'create', component: ProductCreateComponent }, // /products/create
      { path: ':id', component: ProductDetailComponent }, // /products/:id
      { path: ':id/edit', component: ProductEditComponent } // /products/:id/edit
    ]
  }
];

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

This structure keeps all product-related routes neatly organized under a single parent route, and the lazy loading ensures the products module is only loaded when a user navigates to any /products path—great for keeping your initial app bundle size small.

二、SPA路由定义的最佳实践 #

Here are some key best practices to follow when defining routes in any Angular SPA:

• Leverage lazy-loaded modules for feature areas: Split your app into feature-based modules (like Products, Users, Orders) and lazy load them. This reduces initial load time and keeps your codebase modular.
• Stick to RESTful routing conventions: Use semantic paths that make sense (e.g., /products for list, /products/:id for detail, /products/create for new entries). This makes your routes intuitive for both developers and users.
• Keep routing hierarchy logical but flat: Avoid overly nested routes (like /products/category/:catId/item/:id/edit) unless your business logic truly requires it. Flat, logical routes are easier to maintain and debug.
• Use route guards for access control: Protect sensitive routes (like edit pages) with guards like CanActivate (for authentication) or CanDeactivate (to prevent unsaved changes).
• Handle 404s gracefully: Always include a wildcard route (**) that redirects to a custom 404 page—this improves user experience when someone enters an invalid URL.
• Avoid hardcoding route paths: Instead of navigating with string literals (e.g., router.navigate(['/products/create'])), define route path constants or use Angular's Router service with named routes to reduce errors and make updates easier.

内容的提问来源于stack exchange，提问作者Danny Mencos