Angular路由应用base-href配合http-server出现路径重复重定向问题

核心问题是传入--base-href的参数myapp是不符合HTML规范的相对路径，并非http-server与Angular存在兼容性问题。

• 当构建时传入不带根斜杠的myapp作为base-href值，打包生成的index.html中会写入<base href="myapp">，这是相对路径基准。
• 启用Angular路由时，框架初始化阶段会校验当前URL的格式（比如末尾斜杠补全、根路径匹配），触发客户端重定向时会基于当前页面的URL拼接相对基准路径：访问http://localhost:8080/myapp/时，当前路径为/myapp/，相对路径myapp拼接后就得到/myapp/myapp/，触发重复子路径的异常。
• 未引入路由模块时，Angular不会执行路径校验和客户端重定向逻辑，因此不会触发该问题。

--base-href 编译选项 #

这是构建阶段的静态配置，作用有两个：

• 直接将配置值写入打包产物index.html的原生<base>标签中，浏览器解析所有相对路径的资源请求（比如JS、CSS、图片引用）时，会默认以这个标签的值作为路径基准。
• 若代码中未手动配置APP_BASE_HREF令牌，Angular路由、位置服务等模块会默认读取DOM中<base>标签的href值作为应用的部署根路径。

注意：HTML规范中<base>标签的href值必须为绝对路径、或站点根路径开头的绝对相对路径（即/开头），传入不带根斜杠的相对路径会出现非预期的路径拼接行为。正确传参示例为ng build --base-href /myapp/，按规范传参即使不配置APP_BASE_HREF也不会出现路径重复问题。

APP_BASE_HREF 依赖注入令牌 #

这是Angular框架运行时的动态配置，优先级高于<base>标签的静态配置：

• 框架内的路由、Location等服务读取应用部署根路径时，会优先从依赖注入容器中查找APP_BASE_HREF的配置值，只有未提供该配置时才会回退读取DOM中的<base>标签值。
• 测试中配置useValue: '/myapp'时，传入的是/开头的站点根相对路径，路径解析永远从域名根目录开始计算，不会出现相对路径拼接错误，因此可以规避重定向异常。

如果需要将Angular应用部署在/myapp子路径下，二选一即可：

• 构建时传入符合规范的参数：ng build --base-href /myapp/，无需额外修改代码
• 代码中配置APP_BASE_HREF令牌值为/myapp，构建时无需传--base-href参数（注意静态资源路径引用仍需要和部署路径匹配，更推荐第一种方案）

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