访问Controller时路由不匹配：URL分段错误问题排查

核心原因 #

点击页面中的<a>标签时，Angular路由系统会拦截客户端路由请求，尝试在自身路由配置中匹配/Auth/StartProcess路径，但该路径属于ASP.NET Core后端AuthController的接口，并非Angular组件路由，因此匹配失败抛出错误。而直接在地址栏输入完整URL时，请求由浏览器直接发送到后端服务器，不会经过Angular路由拦截，所以能正常访问。

解决方案 #

1. 强制浏览器原生跳转（最直接修复） #

修改home.component.html中的<a>标签，添加target="_self"属性，让浏览器直接处理跳转请求，绕过Angular路由拦截：

<div>
     <a href="/Auth/StartProcess" target="_self" class="btn btn-primary">START</a>
</div>

如果需要添加额外逻辑，也可以通过TypeScript代码触发原生跳转：

// home.component.ts中添加方法
startProcess() {
  window.location.href = '/Auth/StartProcess';
}

对应修改模板：

<div>
     <button (click)="startProcess()" class="btn btn-primary">START</button>
</div>

2. 清理无效Angular路由配置 #

你的路由配置存在冗余和错误规则，会干扰路由判断，需删除无效规则并修正配置：

• app-routing.module.ts：删除针对后端接口的重定向规则（Angular无需处理后端路由）：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PagesComponent } from './pages.component';

const routes: Routes = [
   {
        path: 'home',
        loadChildren: () =>
           import('./home/home.module').then((m) => m.HomeModule),
   },
   {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full',
   },
];

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

• pages-routing.module.ts：删除错误的带有空格的路由规则，同时将RouterModule.forRoot()改为RouterModule.forChild()（forRoot仅能在根模块使用）：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PagesComponent } from './pages.component';

const routes: Routes = [
   {
        path: 'home',
        loadChildren: () =>
           import('./home/home.module').then((m) => m.HomeModule),
   },
   {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full',
   },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class PagesRoutingModule {}

3. 适配部署环境子路径（可选） #

如果测试环境中Angular部署在子路径下（例如https://test.example.com/my-app/），需配置Angular基础路径确保接口请求正确：
在index.html中添加：

<base href="/my-app/">

或构建时指定：

ng build --base-href /my-app/

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