UI Router升级后路由加载但组件不加载问题求助

问题背景 #

移除AngularJS并迁移路由到纯Angular后，按用户类型拆分的带层级前缀路由（如core.error.not-found、admin.news）出现异常：路由能正常匹配，但关联组件无法加载；移除前缀（如改为error.not-found）后组件加载恢复正常。临时修复方式是在路由定义中显式配置views: {'!$default': <Ng2ViewDeclaration>ErrorComponent}，但需要全局统一配置避免重复代码，且当前无法升级到Angular 13+版本。

全局解决方案 #

方案1：自定义路由封装函数 #

创建工具函数自动为路由补全默认视图配置，无需逐个路由手动编写：

import { Ng2StateDeclaration } from '@uirouter/angular';

// 自动为未配置views的路由添加!$default视图目标
export function withDefaultView(state: Ng2StateDeclaration): Ng2StateDeclaration {
  if (!state.views && state.component) {
    return {
      ...state,
      views: {
        '!$default': { component: state.component }
      }
    };
  }
  return state;
}

使用示例：

// core模块路由
const coreRoutes: Ng2StateDeclaration[] = [
  withDefaultView({
    name: 'core.error.not-found',
    url: '/404',
    component: NotFoundComponent
  }),
  withDefaultView({
    name: 'core.auth.login',
    url: '/login',
    component: LoginComponent
  })
];

// admin模块路由
const adminRoutes: Ng2StateDeclaration[] = [
  withDefaultView({
    name: 'admin.news',
    url: '/news',
    component: AdminNewsComponent
  })
];

方案2：全局状态注册钩子 #

通过UI Router的全局配置钩子，遍历所有注册的路由并自动补全默认视图：

import { UIRouterModule, StateProvider } from '@uirouter/angular';

export function configureUIRouter(stateProvider: StateProvider) {
  // 遍历所有已注册状态，自动添加默认视图配置
  stateProvider.stateRegistry.forEach(state => {
    if (!state.views && state.component) {
      state.views = {
        '!$default': { component: state.component }
      };
    }
  });
}

@NgModule({
  imports: [
    UIRouterModule.forRoot({
      states: [...coreRoutes, ...adminRoutes],
      config: configureUIRouter
    })
  ]
})
export class AppModule {}

懒加载路由注意：如果使用懒加载模块，需要在对应模块的UIRouterModule.forChild配置中添加相同的钩子函数，或者直接使用方案1的封装函数定义懒加载路由。

原理说明 #

• 混合架构时期，UI Router默认将组件挂载到根级默认视图$default；移除AngularJS后，带层级前缀的路由会被解析为需挂载到对应父路由的子视图（如core.error.not-found会尝试查找core.error下的子视图容器）
• !$default语法强制指定路由组件挂载到根级默认视图，跳过层级视图匹配逻辑
• 全局方案通过自动注入该配置，实现所有路由统一遵循此规则，避免重复代码

内容的提问来源于stack exchange，提问作者Samantha Adrichem