Angular配置通配符路由NotFoundComponent后JS文件相对路径加载异常

问题根因 #

你当前使用相对路径引用JS资源，浏览器解析相对路径时会以当前URL的最后一级路径作为基准目录拼接资源地址：

• 访问/instructions时，基准目录是根路径/，因此拼接后资源地址为/env.js，加载正常
• 访问/instructions/foo时，基准目录是/instructions/foo/，拼接后资源地址为/instructions/foo/env.js，路径不存在导致加载失败

解决方案 #

方案一（推荐）：启用base标签 #

把index.html中你注释掉的base标签取消注释即可，这个标签会统一指定页面内所有相对路径资源的解析基准为站点根目录：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>EEOI</title>
  <base href="/">
  <script src="env.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

如果你的项目需要部署在域名的子目录下，把href的值改为对应子目录路径即可，比如部署在/eeoi/目录下就写<base href="/eeoi/">。

方案二：改为根路径绝对引用 #

如果不方便使用base标签，直接把JS资源的引用路径改为以/开头的根路径即可，强制浏览器从站点根目录加载资源：

<script src="/env.js"></script>

两种方案任选其一都可以解决多层级路由下资源加载路径错误的问题。

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