Angular路由异常：点击链接URL变更但对应组件未渲染

问题根源分析 #

• 重复调用RouterModule.forRoot()：CoreRoutingModule和AppRoutingModule都使用了RouterModule.forRoot()，Angular中forRoot()仅能在根模块调用一次，重复调用会导致路由配置冲突，引发解析异常。
• 错误的引导组件配置：AppModule的bootstrap数组同时指定了AppComponent和HeaderComponent，Angular应用只能有一个根引导组件，多余的引导组件会打乱路由渲染逻辑。
• 路由配置冗余：movies/post路由同时在CoreRoutingModule和AppRoutingModule中定义，重复配置会导致路由解析优先级混乱。

修复步骤 #

1. 修正CoreRoutingModule的路由注册方式 #

将CoreRoutingModule中的RouterModule.forRoot()改为RouterModule.forChild()，功能模块需用forChild()注册子路由：

const routes: Routes = [
    {
        path: 'movies/post',
        component: PostMoviePageComponent
    }
]

export const CoreRoutingModule = RouterModule.forChild(routes)

2. 清理AppRoutingModule的冗余路由 #

删除AppRoutingModule中重复的movies/post路由，避免配置冲突：

const routes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'home'
    },
    {
        path: 'home',
        component: HomepageComponent
    },
    {
        path: '**',
        component: NotFoundPageComponent
    }
];

export const AppRoutingModule = RouterModule.forRoot(routes);

3. 修正AppModule的引导组件配置 #

仅保留AppComponent作为根引导组件，HeaderComponent需作为子组件嵌入到AppComponent模板中：

@NgModule({
    declarations: [
        AppComponent,
        HomepageComponent,
        NotFoundPageComponent,
        // 若PostMoviePageComponent未在其他模块声明，需添加至此
        PostMoviePageComponent
    ],
    imports: [
        BrowserModule,
        CoreModule,
        AppRoutingModule, // 无需重复导入RouterModule，AppRoutingModule已导出
        HttpClientModule,
        SharedModule
    ],
    providers: [MoviesService],
    bootstrap: [AppComponent] // 仅保留根引导组件
})
export class AppModule { }

4. 确保AppComponent模板包含路由出口 #

在AppComponent的HTML模板中添加<router-outlet>，这是路由组件的渲染容器：

<app-header></app-header> <!-- 嵌入HeaderComponent -->
<router-outlet></router-outlet> <!-- 路由组件将在此处渲染 -->

5. 检查组件声明范围 #

若PostMoviePageComponent在CoreModule中声明，需将其导出以允许其他模块使用：

@NgModule({
    declarations: [HeaderComponent, PostMoviePageComponent],
    imports: [
        CommonModule,
        CoreRoutingModule
    ],
    exports: [HeaderComponent, PostMoviePageComponent]
})
export class CoreModule { }

验证修复 #

完成修改后重启Angular应用：

• 点击导航链接时，URL变化的同时对应组件应正常渲染
• 直接访问http://localhost:4200/movies/post，应显示PostMoviePageComponent的"HELLO"内容

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