Angular 13路由匹配错误：点击Portfolio导航页面无法加载

开发者阿泽

2026-8-13

问题分析与修复方案

核心问题

点击Portfolio导航时出现路由匹配错误，根源在于组件重复声明、路由组件配置错误以及模块依赖缺失三个问题叠加导致。

具体修复步骤

1. 修复组件重复声明问题

Angular规定组件只能属于一个模块，当前OnlineComponent同时在AppModule和OnlineModule中声明，这会导致组件识别异常。
修改app.module.ts：

@NgModule({
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        HttpClientModule,
        AppRoutingModule,
        OnlineModule // 新增导入OnlineModule
    ],
    declarations: [
        AppComponent,
        // 移除OnlineComponent的声明
        SigninComponent
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: BasicAuthInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
        fakeBackendProvider
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

2. 修正Administration模块的默认路由组件

administration-routing.module.ts中默认路由错误绑定了OnlineComponent，应替换为AdministrationComponent（当前模块的根组件）：

export const ADMINISTRATION_ROUTES: Routes = [
  {
    path: '',
    component: AdministrationComponent, // 替换为AdministrationComponent
  }, 
  {
    path: 'portfolio',
    component: PortfolioComponent,
  },
];

3. 让Administration模块识别PortfolioComponent

AdministrationModule未导入PortfolioModule，导致路由中配置的PortfolioComponent无法被识别，修改administration.module.ts：

@NgModule({
  imports: [CommonModule, AdministrationRoutingModule, PortfolioModule], // 新增导入PortfolioModule
  declarations: [AdministrationComponent],
})
export class AdministrationModule {}