Angular 4+ASP.NET MVC项目路由配置报错：未设置base href求助

嘿，这个报错我太熟了！Angular的路由系统必须明确应用的基础URL路径，不然压根没法正确解析路由跳转和资源路径。给你几个靠谱的解决办法，选适合你项目的就行：

方法1：在index.html中添加标签（最常用） #

直接在index.html的<head>标签里加上这一行，一定要放在所有CSS、JS资源加载标签之前：

<base href="/">

如果你的应用部署在ASP.NET MVC项目的子目录（比如/MyApp/），就把href改成对应的路径：

<base href="/MyApp/">

方法2：在根模块中配置APP_BASE_HREF令牌 #

如果不想修改index.html，可以在你的根模块（比如AppModule）里手动注入APP_BASE_HREF令牌，指定基础路径：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { APP_BASE_HREF } from '@angular/common'; // 导入这个令牌
import { DashboardComponent } from '../../Components/dashboard/dashboard.component';
import { TraitComponent } from '../../Components/trait/trait.component';

// 注意！你的路由里path有个多余的空格，要改成空字符串作为默认路由
const routes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'trait', component: TraitComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  declarations: [DashboardComponent, TraitComponent],
  providers: [
    // 配置基础路径
    { provide: APP_BASE_HREF, useValue: '/' }
  ]
})
export class YourRoutingModule { }

这里要特别提醒：你原来的路由里path: ' '（带空格）是无效的，默认路由应该用空字符串''。

方法3：构建时通过CLI参数指定base-href #

如果用Angular CLI构建项目，可以在构建命令里直接指定基础路径，CLI会自动帮你在生成的index.html里添加标签：

# 根路径部署
ng build --base-href /

# 子目录部署
ng build --base-href /MyApp/

小提示 #

• 基础路径的href值建议以斜杠开头和结尾，避免路由解析时出现奇怪的问题；
• 如果你的ASP.NET MVC项目配置了路由规则，要确保Angular的基础路径和MVC的路由前缀匹配，避免冲突。

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