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

Question

我遇到了一个问题，请帮助我解决。问题是，当我在我的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

- Zain Khan

---

@ZalnKhAn 你需要在本地还是服务器上运行你的项目？你可以添加项目的基本URL，例如：<base href="/vbhfd/">。 - Abhishek

文件必须位于Web服务器的文档根目录中，否则您必须将路径放在“base”标签中。 - Osakr

你能给我展示一个演示，类似于我需要替换或放置的内容吗？ - Zain Khan

Answer 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）

- Tushar Walzade

---

与我的回答进行比较，并确保您的生产脚本与此处显示的名称相同。 - Tushar Walzade

对于 replaceState 错误，请配置您的路由器使用 useHash，如下所示 - RouterModule.forRoot(routes, { useHash: true })。 - Tushar Walzade

在添加了useHash之后，replaceState错误仍然存在。 - Zain Khan

请参考以下内容：https://stackoverflow.com/questions/49365057/angular-deployment-without-server-error-securityerror-failed-to-execute-rep - Tushar Walzade

你也可以在index.html文件中设置base href的值。 - Hamid Taebi

Answer 2

默认情况下，angular cli项目的href属性的base被定义为/。如果您正在构建该项目并直接打开index.html文件访问它，则HTML要加载的所有.js将从'/'目录加载。

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

解决方法有两种：一种是将所有文件复制到驱动器的根目录（不建议），另一种是创建本地服务器并提供静态文件（首选方法）。

- Sachin Gupta

---

对于 HTML 中引用的所有文件（例如上面的 runtime.js），如果源不是绝对路径，则浏览器将使用“base href='thisValue'”的值进行请求。在打开 HTML 文件时，“/”表示根目录（在 *nix 操作系统中）和分区的根目录（在 Windows 操作系统中）。因此，请求被发送到比如 C:\runtime.js，但该文件不存在，因此请求失败。 - Sachin Gupta