Angular 构建 index.html 不起作用答案

【问题标题】：Angular build index.html not workingAngular 构建 index.html 不起作用
【发布时间】：2018-08-15 09:00:55
【问题描述】：

我已经构建了 Angular 项目并获得了 dist 文件夹。当我尝试在浏览器中打开 index.html 时。我收到以下错误，例如无法加载资源和找不到 inline.bundle.js 的文件,polyfil.bundle.js 和许多文件。虽然这个文件添加在脚本标签中并且我没有更改这个文件的路径仍然无法正常工作。但是如果我从实时服务器运行它它正在工作。解释为什么没有服务器它不能工作？为什么它没有加载 js 文件的 inline.bundle.js,polyfill.bundle.js？

【问题讨论】：

你必须使用localhost:4200打开页面，运行ng start时说。

标签： javascript node.js angular npm-live-server

【解决方案1】：

找不到您的文件，因为基本 URL 已更改。

您可以通过在您的index.html 中使用<base href="./"> 来解决此问题。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

【讨论】：

它正在工作，谢谢。为什么如果我删除基本元素它仍然工作？
是的，如果元素不存在，它就是在工作
我不确定先生，我不知道删除此标签后默认的基本网址是什么
这对我不起作用。当我添加<base href="./"> 时，我什么也没得到。当我删除基本标签时，出现错误。 Please provide a value for the APP_BASE_HREF token or add a base element to the document.

【解决方案2】：

您也可以使用ng build --base-href ./命令，这样就不需要修改HTML文件了。

【讨论】：

【解决方案3】：

根据 Mozilla：

The HTML <base> element specifies the base URL to use for 
all relative URLs in a document. There can be only one <base> element in a document.

这意味着所有已编译的资源都相对于系统的根目录进行引用。例如，样式和图像与 index.html 位于同一文件夹中。将基本 url 设为 <base href="/"> 或 <base href="foldername of the index.html">使其引用当前文件夹。

【讨论】：