不允许在 chrome 上加载本地资源 - 错误，生产构建后 Angular 应用程序未运行

Posted 2023-03-15

【中文标题】不允许在 chrome 上加载本地资源 - 错误，生产构建后 Angular 应用程序未运行

【英文标题】：Not allowed to load local resource -error on chrome, Angular app is not running after production build

【发布时间】：2020-04-08 00:52:50

【问题描述】：

我在部署 Angular 应用时遇到问题。如果部署，它不会发生在另一台机器上。我的应用没有运行，它在 Chrome 上显示以下错误：

不允许加载本地资源

在 Mozilla 中：

元素的'src'属性不是有效的URI

问题是，如果从其他机器部署，它完全可以正常工作。所以我猜问题出在节点或打字稿或ng或其他任何版本上。我是服务器部署的新手，这种问题对我来说是新的。

我正在使用以下命令生成部署文件夹：

ng build --prod --base-href /candidate/

以下是我的版本详情：

节点版本： v10.16.3

应用程序typescirpt 版本： Version 2.9.2

机器上全局安装的typescript版本：Version 3.6.3

我删除了node modules 和package-lock.json 文件并在生产构建之前运行npm install。我没有收到任何错误，并且能够成功生成 dist 文件夹。

如果部署文件夹是从安装了升级或降级节点版本的机器上部署的，则部署文件夹可以完美运行。

我发现了很多关于浏览器上显示的错误的建议，尝试升级节点全局版本但没有办法。我很不确定我在这里缺少什么。在这种情况下，任何形式的提醒都会很棒。

【参考方案1】：

深入挖掘后，我发现问题不在于版本，而在于构建后在 index.html 文件中生成的基本 URL。

在 Windows 上使用 git-bash 时会出现此问题。

git-bash 将命令的最后一个参数 - ng build --prod --base-href /candidate/ 视为相对于其二进制文件夹的路径，并在参数前面加上它（它转换“似乎是”相对路径转换为绝对路径）。

所以，我使用 PowerShell 而不是 Git-Bash，问题就解决了。 base-href 参数在那里处理得很好。

要解决 git-bash 的问题，请通过 this link，它实际上帮助我解决了我的特定问题。