Angular路由异常：访问/login时出现Cannot GET /login 404错误

问题描述 #

在开发Angular+Spring项目的登录/注册功能时，遇到组件路由加载异常：访问localhost:4200/login或localhost:4200/register时，对应组件未加载，浏览器显示Cannot GET /login并返回404 Not Found错误；但访问localhost:4200时HomeComponent可正常加载。

已尝试的操作：

• 在app-routing.module.ts中添加{ useHash: true }配置
• 修改index.html中的base href为"/"和"./"
  问题仍未解决。

相关代码 #

app.component.ts #

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'CodeQuizzer-ui';
}

app-routing.module.ts #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {RegisterComponent} from './pages/register/register.component';
import {LoginComponent} from './pages/login/login.component';
import {HomeComponent} from './pages/home/home.component';

export const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'register',
    component: RegisterComponent
  },
  {
    path: '',
    component: HomeComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

login.component.ts #

import { Component } from '@angular/core';
import {AuthenticationRequest} from '../../api/models/authentication-request';
import {FormsModule} from '@angular/forms';
import {CommonModule} from '@angular/common';
import {Router} from '@angular/router';
import {AuthenticationService} from '../../api/services/authentication.service';
import {TokenService} from '../../services/token/token.service';

@Component({
  selector: 'app-login',
  imports: [
    FormsModule,
    CommonModule,
  ],
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss'
})
export class LoginComponent {

  authRequest: AuthenticationRequest = {email: '', password: ''};
  errorMsg: Array<string> = [];

  constructor(
    private router: Router,
    private autheService: AuthenticationService,
    private tokenService: TokenService,
  ) {
  }

  login() {
    this.errorMsg = [];
    this.autheService.authenticate({
      body: this.authRequest
    }).subscribe({
      next: (res) => {
        this.tokenService.token = res.token as string;
        this.router.navigate(['home']);
      },
      error: (err) => {
        console.log(err);
        if (err.error.validationErrors) {
          this.errorMsg = err.error.validationErrors;
        } else {
          this.errorMsg.push(err.error.error);
        }
      }
    })
  }

  register() {
    this.router.navigate(['register']);
  }
}

index.html #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CodeQuizzerUi</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

解决方案 #

1. 修正Hash模式下的访问路径 #

启用useHash: true后，Angular路由基于URL的锚点（#后内容）工作，正确的访问路径应为：

• 登录页：localhost:4200/#/login
• 注册页：localhost:4200/#/register

直接访问localhost:4200/login会被浏览器当作服务器静态资源请求，而开发服务器无对应资源，因此返回404。

2. 适配Angular独立组件架构的路由配置 #

若项目使用Angular 17+独立组件模式（无AppModule），需在main.ts中通过provideRouter提供路由配置，而非仅依赖AppRoutingModule：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app-routing.module';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
});

若仍使用NgModule架构，需确保AppModule导入AppRoutingModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 验证组件导入路径正确性 #

确认app-routing.module.ts中组件的导入路径与实际文件位置一致，避免因路径错误导致组件无法加载。

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