没有服务器的角度部署 - 错误：SecurityError：无法在“历史”上执行“replaceState”

Question

我在 Angular v5 中有一个简单的 Web 应用程序。这是一个纯粹的客户端应用程序，它不使用任何服务器端（这是一个基本的计算器应用程序，它从 JSON 文件加载具有一些测量值的数据，并根据该 JSON 向用户显示一些分析）。

在开发过程中，我通过运行 -ng serve 命令，使用 Angular-cli “serve” 测试了应用程序，它运行良好。

现在我不会捆绑我的应用程序并开始使用它。我想在没有任何服务器的情况下在我的机器上本地运行这个应用程序。
根据Angular documentation，要将应用程序捆绑到部署，我应该运行命令：ng build --prod --base-href=./。在那里标记--prod 将部署应用程序的minified 和uglified 版本。 --base-href=./ 将在 index.html 中设置 <base href="./"> 以允许我直接从本地机器加载应用程序文件（所有 ABC.bundles.js 文件）。

现在，当我打开 dist/index.html 文件时，我可以看到所有脚本都已加载，但是控制台中出现错误：

ERROR 错误：未捕获（承诺中）：SecurityError：执行失败 'History' 上的 'replaceState'：带有 URL 的历史状态对象 'file:///C:/.../dist/' 不能在具有来源的文档中创建 'null' 和 URL 'file:///C:/.../dist/index.html'。

如何在没有服务器的情况下部署/捆绑我的应用程序以在本地运行？

Answer 1

我也遇到了同样的问题，部署到服务器后无法正常工作，我添加了HashLocationStrategy。

https://angular.io/api/common/HashLocationStrategy

https://angular.io/guide/router#hashlocationstrategy

从 Google.com 请求后，页面未加载并抛出 404 页面未找到

网址---http://techeducation.in

我在评论或删除后解决了这个问题...

<base href="http://www.techeducation.in/" /> 来自dist 文件夹的 index.html 文件。

Answer 2

在您的路线配置中添加；

RouterModule.forRoot(routes, {useHash: true});

在您的 index.html 中执行此操作；

<!-- <base href="/"> --> <script>document.write('<base href="' + document.location + '" />');</script>

然后使用 --base-href ./ 例如构建

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

来源https://github.com/angular/angular/issues/13948

Answer 3

尝试使用HashLocationStrategy

https://angular.io/api/common/HashLocationStrategy https://angular.io/guide/router#hashlocationstrategy

在你的模块中

imports [
RouterModule.forRoot(routes, {useHash: true})
]

Answer 4

使用 angular-router 时，您需要一个服务器端，因为路由器用于提供页面。

要解决这些问题，您有 2 个选择：

1. 使用某种轻量级服务器，例如 NPM 的 http-server，它允许您从命令行在本地计算机上运行服务器。
   

2. 完全放弃 angular-router - 是的，这是一个有点极端的解决方案，我敢肯定，对于应用程序中超过 2 页的任何人来说，这都不是一个有效的解决方案。但是，如果您有一个非常简单的应用程序，只有一个页面并且您不需要路由功能，那么这是一个有效的解决方案。