Angular路由异常：访问/login路径跳转至首页并报错

Let's break down what's causing your routing issue and walk through how to fix it step by step:

What's Going Wrong #

1. Duplicate RouterModule.forRoot() Calls: You're calling RouterModule.forRoot() in both AppModule and RoutingModuleModule. Angular only allows one forRoot() call (in the root module, which is AppModule) to initialize the routing system—having two creates conflicts that break route matching.
2. Circular Module Import: Your RoutingModuleModule is importing itself in its own imports array, which creates a circular reference and disrupts module loading.
3. Component Declaration Gap: LoginComponent is only declared in RoutingModuleModule, but it needs to be accessible to the root module (AppModule) since your routes are resolved there.

Solution 1: Use a Feature Routing Module (Recommended Best Practice) #

Separating routing into a dedicated module keeps your code organized and follows Angular's recommended patterns.

Step 1: Fix routing-module.module.ts

Update the file to remove the circular import, remove component declarations (routing modules shouldn't declare components), and use forChild() instead of forRoot():

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' } // Optional: Redirect root path to task page
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes) // Use forChild() for feature routing modules
  ],
  exports: [RouterModule] // Export RouterModule so AppModule can access the routes
})
export class RoutingModuleModule { }

Step 2: Update app.module.ts

Import your fixed routing module into AppModule, add LoginComponent to declarations, and remove the duplicate RouterModule.forRoot() call:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
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';
import { LoginComponent } from './components/login/login.component'; // Import LoginComponent
import { RoutingModuleModule } from './routing-module.module'; // Import your routing module

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    TaskManagerComponent,
    TaskFormComponent,
    TaskListComponent,
    TaskDetailComponent,
    TaskItemComponent,
    LoginComponent // Add LoginComponent to declarations
  ],
  imports: [
    BrowserModule,
    RoutingModuleModule // Use the routing module instead of defining routes here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Solution 2: Consolidate Routes in AppModule (Simpler for Small Apps) #

If you prefer to keep all routing logic in the root module, merge your route configurations into AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
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';
import { LoginComponent } from './components/login/login.component';

// Merge all routes into a single array
const appRoute: Routes = [
  { path: '', component: TaskManagerComponent },
  { path: 'login', component: LoginComponent },
  { path: 'task', component: TaskManagerComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    TaskManagerComponent,
    TaskFormComponent,
    TaskListComponent,
    TaskDetailComponent,
    TaskItemComponent,
    LoginComponent // Add LoginComponent here
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoute) // Only one forRoot() call in the root module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Either solution should resolve the routing error—you'll be able to access /login without being redirected back to the root page.

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