Angular从RouterModule迁移到ProvideRouter（独立模式）路由问题

一、修复哈希路由下Resolver无法获取参数的问题 #

在独立模式使用withHashLocation()时，路由参数的解析逻辑与旧版RouterModule略有差异，需调整Resolver中获取参数的方式：

1. 通过ActivatedRouteSnapshot.paramMap获取参数
   在TransactionConfig Resolver中，直接从路由快照的paramMap读取参数，这是哈希路由模式下最可靠的方式：

   import { Injectable } from '@angular/core';
   import { Resolve, ActivatedRouteSnapshot, Router, UrlTree } from '@angular/router';
   import { Observable, of } from 'rxjs';
   
   @Injectable({ providedIn: 'root' })
   export class TransactionConfig implements Resolve<any> {
     constructor(private router: Router) {}
   
     resolve(route: ActivatedRouteSnapshot): Observable<any> | UrlTree {
       // 从paramMap中读取路由参数
       const id = route.paramMap.get('id');
       const product = route.paramMap.get('product');
       const step = route.paramMap.get('step');
   
       // 处理根路径跳转逻辑
       if (!id && route.data.forwardToResourceRoute) {
         // 生成目标UrlTree，确保参数正确传入
         return this.router.createUrlTree(['default-product', 'default-id', 'default-step']);
       }
   
       // 你的业务逻辑处理
       return of({ id, product, step });
     }
   }
   

2. 验证路由配置正确性
   确保provideRouter的配置无冲突，可临时开启调试追踪排查问题：

   import { provideRouter, withHashLocation, withDebugTracing } from '@angular/router';
   
   export const appConfig = {
     providers: [
       provideRouter(
         routes,
         withHashLocation(),
         withDebugTracing() // 临时开启，查看路由解析流程
       )
     ]
   };
   

   调试完成后可移除withDebugTracing()。

二、优化重复的路由配置 #

将FormPageComponent的通用路由配置抽离为基础模板，通过扩展实现复用，减少代码冗余：

1. 定义基础路由配置

   import { Route } from '@angular/router';
   
   // 抽离FormPage通用路由配置（省略path字段，后续动态添加）
   const baseFormRoute: Omit<Route, 'path'> = {
     loadComponent: () => import('./components/form-page/form-page.component').then(m => m.FormPageComponent),
     resolve: {
       transactionConfig: TransactionConfig,
     },
     canDeactivate: [CanDeactivateFormPageGuard],
   };
   

2. 复用基础配置生成路由数组

   const routes: Routes = [
     // 为两个动态路径生成路由项
     ...[':product/:id/:step', ':product/:id'].map(path => ({
       ...baseFormRoute,
       path,
       data: { forwardToResourceRoute: false },
     })),
     // 根路径路由，覆盖data字段
     {
       ...baseFormRoute,
       path: '',
       data: { forwardToResourceRoute: true },
     }
   ];
   

   后续若需修改loadComponent、resolve等通用配置，只需修改baseFormRoute即可，所有关联路由会同步更新。

内容的提问来源于stack exchange，提问作者U rock