Angular路由模块用服务实现动态路径名遇ngOnInit未执行及栈溢出问题

首先，我们来拆解你遇到的两个核心问题，然后给出完整的解决方案：

问题1：ngOnInit未被调用的原因 #

Angular的模块类（NgModule）不会触发组件/指令的生命周期钩子（比如OnInit），这些钩子仅适用于组件、指令和管道。模块的初始化逻辑需要通过专门的方式处理，而不是依赖ngOnInit。

问题2：添加AppRoutingModule到declarations导致栈溢出 #

declarations数组的作用是声明当前模块拥有的组件、指令、管道，绝对不能放入模块类。当你把AppRoutingModule放进declarations时，Angular会错误地将其当作组件处理，加上路由模块本身依赖RouterModule，进而引发循环引用，最终导致栈溢出。正确的做法是将路由模块放入imports数组。

解决方案：两种常量驱动路由的实现方式 #

方式一：静态常量（推荐，适合无需异步加载的场景） #

这种方式最简单直接，不需要服务，仅用一个常量文件统一管理路由名称：

1. 创建路由名称常量文件 route-names.const.ts：

export const ROUTE_NAMES = {
  CRISIS_CENTER: 'crisis-center',
  HEROES: 'heroes'
};

2. 修改AppRoutingModule，引用常量替代硬编码：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
import { PageNotFoundComponent } from './not-found.component';
import { ROUTE_NAMES } from './route-names.const';

const appRoutes: Routes = [
  { path: ROUTE_NAMES.CRISIS_CENTER, component: CrisisListComponent },
  { path: ROUTE_NAMES.HEROES, component: HeroListComponent },
  { path: '', redirectTo: `/${ROUTE_NAMES.HEROES}`, pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // 仅调试用，上线前移除
    )
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3. 在组件中跳转路由时也引用常量：

import { Router } from '@angular/router';
import { ROUTE_NAMES } from './route-names.const';

@Component({ /* ... */ })
export class SomeComponent {
  constructor(private router: Router) {}

  navigateToHeroes() {
    this.router.navigate([ROUTE_NAMES.HEROES]);
  }
}

方式二：异步加载路由名称（适合从后端接口获取的场景） #

如果路由名称需要从后端动态获取，我们需要用APP_INITIALIZER确保路由初始化前加载好数据：

1. 修改ConstantsService，添加异步加载方法：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class ConstantsService {
  private routeNames: Record<string, string> = {};

  constructor(private http: HttpClient) {}

  // 模拟从后端加载，替换为你的实际接口
  loadRouteNames(): Promise<void> {
    return this.http.get<Record<string, string>>('/api/route-names')
      .toPromise()
      .then(data => {
        this.routeNames = data;
      })
      .catch(() => {
        // 加载失败时使用默认值
        this.routeNames = {
          CRISIS_CENTER: 'crisis-center',
          HEROES: 'heroes'
        };
      });
  }

  getRouteNames(): Record<string, string> {
    return this.routeNames;
  }
}

2. 在根模块AppModule中配置APP_INITIALIZER，提前加载常量：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { ConstantsService } from './constants-service';
import { AppComponent } from './app.component';

// 初始化工厂函数，确保路由名称加载完成后再启动应用
export function loadRouteNamesFactory(constantsService: ConstantsService) {
  return () => constantsService.loadRouteNames();
}

@NgModule({
  declarations: [AppComponent], // 仅放组件、指令、管道
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule // 路由模块必须放在imports中
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadRouteNamesFactory,
      deps: [ConstantsService],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 修改AppRoutingModule，使用工厂函数动态生成路由：

import { NgModule, Inject } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
import { PageNotFoundComponent } from './not-found.component';
import { ConstantsService } from './constants-service';

// 动态生成路由配置的工厂函数
export function createAppRoutes(constantsService: ConstantsService): Routes {
  const routeNames = constantsService.getRouteNames();
  return [
    { path: routeNames.CRISIS_CENTER, component: CrisisListComponent },
    { path: routeNames.HEROES, component: HeroListComponent },
    { path: '', redirectTo: `/${routeNames.HEROES}`, pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
  ];
}

@NgModule({
  imports: [
    RouterModule.forRoot(
      createAppRoutes,
      { 
        enableTracing: true,
        initialNavigation: 'enabledBlocking' // 确保路由在初始化完成后加载
      }
    )
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
  // 注入ConstantsService确保工厂函数能访问到它
  constructor(@Inject(ConstantsService) constantsService: ConstantsService) {}
}

内容的提问来源于stack exchange，提问作者Jyotirmoy Pan