Angular新手遇RoutingModuleModule未定义错误，无法访问/login路由

我来帮你排查这个问题，你遇到的RoutingModuleModule is not defined错误主要来自两个关键问题：循环模块引用和路由模块配置冲突，下面一步步来修复：

1. 修复自定义路由模块的循环引用问题 #

打开你的routing-module.module.ts，你会发现模块的imports数组里引用了RoutingModuleModule——这就是当前模块本身，这种循环引用会直接导致模块未定义的错误，而且完全没必要。同时，你在app.module.ts和自定义路由模块里都使用了RouterModule.forRoot()，这也会引发路由配置冲突。

修改后的routing-module.module.ts代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule , Routes} from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { TaskManagerComponent } from './components/task-manager/task-manager.component';

const routes:Routes=[
  { path : 'login',component:LoginComponent },
  { path : 'task' ,component:TaskManagerComponent },
  { path:'' , redirectTo: '/task', pathMatch: 'full' } // 新增默认路由重定向，替代原app.module里的默认路由
];

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes) // 只在这里保留forRoot配置，统一管理所有路由
    // 移除 RoutingModuleModule 这一行，消除循环引用
  ],
  exports:[RouterModule]
})
export class RoutingModuleModule { }

2. 修复AppModule的路由模块导入问题 #

打开app.module.ts，你需要移除重复的RouterModule.forRoot(appRoute)配置，并且正确导入你的自定义路由模块（注意要先添加模块的导入语句）：

修改后的app.module.ts代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// 新增自定义路由模块的导入语句，确保路径正确
import { RoutingModuleModule } from './routing-module.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { TaskManagerComponent } from './components/task-manager/task-manager.component';
import { TaskFormComponent } from './components/task-manager/task-form/task-form.component';
import { TaskListComponent } from './components/task-manager/task-list/task-list.component';
import { TaskDetailComponent } from './components/task-manager/task-detail/task-detail.component';
import { TaskItemComponent } from './components/task-manager/task-list/task-item/task-item.component';

// 移除原appRoute配置，因为已经移到自定义路由模块里了

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    TaskManagerComponent,
    TaskFormComponent,
    TaskListComponent,
    TaskDetailComponent,
    TaskItemComponent,
  ],
  imports: [
    BrowserModule,
    // 移除 RouterModule.forRoot(appRoute)，避免路由配置冲突
    RoutingModuleModule // 只保留自定义路由模块的导入
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 验证修复效果 #

完成以上修改后，重启你的Angular开发服务器：

ng serve

现在访问127.0.0.1/login应该就能正常加载LoginComponent了，访问根路径会自动重定向到/task页面。

额外提示：通常我们会把自定义路由模块命名为AppRoutingModule（而不是RoutingModuleModule），这样更符合Angular的命名规范，避免混淆。

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