Angular项目Router-outlet无法自动加载初始组件问题求助

问题原因 #

你遇到的问题源于Angular独立组件模式下，provideRouter默认的初始导航策略为enabledNonBlocking，该策略会异步处理初始路由，导致根路径的重定向规则在应用启动时未被触发；而手动点击路由链接时，路由导航是主动触发的，因此能正常加载对应组件。

修复步骤 #

修改main.ts中的路由提供配置，显式指定初始导航策略为enabledBlocking：

bootstrapApplication(AppComponent, {
    providers: [
        importProvidersFrom(BrowserModule, CommonModule),
        // 新增initialNavigation配置，强制同步处理初始路由
        provideRouter(APP_ROUTES, { initialNavigation: 'enabledBlocking' }),
        provideNoopAnimations(),
    ]
})
.catch(err => console.error(err));

额外说明 #

• enabledBlocking会在应用启动阶段同步处理初始路由，确保根路径重定向规则被立即执行，从而自动加载Config组件。
• 你当前的路由重定向配置（redirectTo: '/config'）本身没有问题，无需修改。

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