IE自动移除Angular 5应用的上下文根路径，如何阻止该行为？

这种情况我之前做项目时也碰到过，核心原因是IE对HTML5 History API的支持特性，加上Angular路由策略的适配问题，结合你的场景，给你几个可行的解决方案：

1. 确保正确配置APP_BASE_HREF #

Angular需要明确知道应用的基础上下文路径，你可以在AppModule中通过APP_BASE_HREF提供者来配置，这样路由生成的所有URL都会带上/sampleapp前缀，也能让IE正确识别应用的根路径：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/sampleapp' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 检查服务器的URL重写规则 #

IE出现地址栏路径被移除但应用能加载的情况，大概率是服务器把根路径（/）也指向了你的Angular应用资源，导致IE在跳转时自动去掉了上下文路径。你需要根据服务器类型配置正确的重写规则：

Apache服务器（.htaccess） #

在应用根目录的.htaccess文件中添加以下规则，确保只有/sampleapp路径下的请求才会被转发到index.html：

RewriteEngine On

# 存在的文件或目录直接访问，不重写
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# 不存在的资源转发到/sampleapp/index.html
RewriteRule ^ /sampleapp/index.html

Nginx服务器 #

在Nginx配置文件中添加对应的location规则：

location /sampleapp {
  try_files $uri $uri/ /sampleapp/index.html;
}

3. 切换到HashLocationStrategy（备选方案） #

如果上面的方法都无法解决，可以考虑切换到Hash路由模式，这种模式不依赖HTML5 History API，兼容性更好，地址栏会变成http://www.example.com/sampleapp/#/，但能确保/sampleapp上下文路径被保留：

在路由模块中配置useHash: true：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { YourComponent } from './your-component.component';

const routes: Routes = [
  // 你的路由配置
  { path: '', component: YourComponent }
];

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

4. 确认IE兼容Polyfills是否齐全 #

Angular 5在IE中运行需要额外的polyfills支持，确保你的polyfills.ts文件中包含了IE9-11所需的polyfills（尤其是和History API相关的）：

// IE9-11的基础polyfills
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

// Angular必备的polyfills
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

按照上面的步骤逐一排查，应该就能解决IE中上下文路径被移除的问题了。

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