Angular 6，在 ng build index.html 在控制台中出现错误之后

Posted 2023-03-15

【中文标题】Angular 6，在 ng build index.html 在控制台中出现错误之后

【英文标题】：Angular 6, after ng build index.html gets errors in console

【发布时间】：2019-05-27 20:21:55

【问题描述】：

我遇到了一个问题，请帮我解决这个问题。 问题是当我在 CLI 中执行 ng build 并转到 dist 文件夹并运行 index.html 文件时，控制台会收到文件路径的错误。

Failed to load resource: net::ERR_FILE_NOT_FOUND
polyfills.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
styles.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
scripts.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
vendor.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
main.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
/D:/favicon.ico:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

【问题讨论】：

@ZalnKhAn 您必须在本地或服务器上运行您的项目。？您可以添加项目i.e:- <base href="/vbhfd/">的基本网址。

文件必须在网络服务器的文档根目录下，否则必须将路径放在“base”标签中

你能给我看一个演示，比如我要替换或放置的东西吗？

【参考方案1】：

只和路径有关，在构建时只需使用--base-href标志，如下-

ng build --prod --base-href ./

现在它会在您的 index.html -

中生成类似于以下内容的行

<base href="./">
<!-- Note the file names here -->
<script type="text/javascript" src="runtime.30458714a8af1a2e7153.js"></script>
<script type="text/javascript" src="polyfills.db85ebdc34f3cf0f4d3f.js"></script>
<script type="text/javascript" src="scripts.e8fe6486441dc07e00c6.js"></script>
<script type="text/javascript" src="main.f9ea86a83ded92312d0f.js"></script>

就是这样！它适用于任何地方，您只需部署生产版本即可开始使用！

另外，请注意，如果您尝试直接从文件中运行 index.html，它将不起作用。您需要将其放在 http 服务器上（例如，XAMPP 用于本地）

【讨论】：

这个问题出现在 main.786282d324cee4d6299d.js:1 错误错误：未捕获（承诺中）：SecurityError：无法在“历史”上执行“replaceState”：具有 URL 文件的历史状态对象:///D:/angular/erp-core/dist/erp-core/' 不能在来源为“null”且 URL 为“file:///D:/angular/erp-core/dist/”的文档中创建erp-core/index.html'。错误：无法在“历史”上执行“replaceState”：无法在原始文档中创建 URL 为“file:///D:/angular/erp-core/dist/erp-core/”的历史状态对象

由于评论框的强度，我从中删除了一些基本标签

将其与我更新的答案进行比较，请确保您的生产脚本与此处显示的名称相同。

只运行上面的命令&不要更改index.html中的任何内容，就是这样

也可以在index.html文件中设置base href值

【参考方案2】：

对于 Angular cli 项目，href 属性的默认 base 定义为 /。如果您正在构建项目并通过直接打开 index.html 文件来访问它，那么 HTML 想要加载的所有 .js 都将从 '/' directory 加载。

例如，如果您使用的是 Windows，并且您的构建存在于 C:\users\xys\ng\dist\index.html 中，并且您有 <script type="text/javascript" src="runtime.js"></script> 在您的 HTML 中，浏览器将在 C:\runtime.js 中查找 .js 文件。

要解决这个问题，您可以将所有文件复制到驱动器的根目录（不建议），或者您可以创建一个本地服务器，然后将静态文件提供给该服务器（首选方法）。

【讨论】：

对于您的 HTML 中引用的所有文件（如上例中的 runtime.js），如果源不是绝对路径，浏览器将使用 value of base href='thisValue' 发出请求。打开 HTML 文件时，/ 指的是根目录（在 *nix 操作系统上）和分区的根目录。在 Windows 操作系统的情况下。所以向C:\runtime.js 发出请求，但由于文件不存在而失败