Angular 15默认路由设置失效问题求助

你的路由配置逻辑本身没有问题，但**AppModule的imports数组中重复导入了RouterModule.forRoot([])，这会完全覆盖AppRoutingModule中定义的所有路由规则**，导致实际生效的路由配置为空。此时访问任何路径都会匹配到通配符路由**，最终重定向到login。

问题根源 #

AppRoutingModule已经通过RouterModule.forRoot(routes)完成了完整的路由配置，并且导出了RouterModule。但在AppModule的imports里，你在导入AppRoutingModule之后，又导入了RouterModule.forRoot([])——Angular会以最后导入的RouterModule.forRoot()配置为准，所以之前的路由规则被清空了。

解决方案 #

移除AppModule中imports数组里的RouterModule.forRoot([])，只保留AppRoutingModule的导入即可。

修改后的AppModule代码示例：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HomeModule } from './home/home.module';
import { PoModule } from '@po-ui/ng-components';
import { LoginModule } from './login/login.module';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
// 请确保LoadingInterceptor已正确导入
import { LoadingInterceptor } from './your-path-to/loading.interceptor';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    PoModule,
    NgbModule,
    HomeModule,
    FormsModule,
    LoginModule,
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    // 移除这行重复的RouterModule导入
    // RouterModule.forRoot([]),
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS, 
      useClass: LoadingInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

额外检查点 #

确认AppComponent的模板中包含<router-outlet></router-outlet>标签，这是路由组件渲染的必要容器。

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