ng build 无法在“History”上执行“replaceState”：无法在原始“null”和 URL 的文档中创建具有 URL 的历史状态对象

Posted 2023-03-15

【中文标题】ng build 无法在“History”上执行“replaceState”：无法在原始“null”和 URL 的文档中创建具有 URL 的历史状态对象

【英文标题】：ng build failed to execute 'replaceState' on 'History': A history state object with URL cannot be created in a document with origin 'null' and URL

【发布时间】：2018-07-02 02:31:26

【问题描述】：

我使用的是 Google Chrome 版本 52，我希望能够通过访问 index.html 在本地运行我的应用程序，而无需服务器。

我可以点击我的应用程序的登录页面。但是，当我尝试导航到另一个页面或单击任何按钮时，它无法工作。

我试过很多方法，比如：

导入前添加脚本reference one和reference two 将基本 href 从 / 更改为 ./ 更改路由器配置以使用哈希并将基本 href 更改为 <script>document.write('<base href="' + document.location + '" />');</script> 使用ng build --prod --allow-file-access-from-files

这是我遇到的确切错误：

我已经尝试了一天，如果有人可以提供帮助，我将不胜感激。

我不想运行网络服务器，我必须让它在 Chrome 上运行。

编辑： 适用于 Safari

不适用于 Chrome、Firefox、Opera、IE、Microsoft Edge

谢谢！

【问题讨论】：

你使用角度路由器吗？如果您刷新页面，您是否能够访问yourdomain.com/ 的根目录？

@JiiB 嗨，是的，我使用角度路由器进行导航。刷新后，我在我的根页面上。

如果您使用ng serve，导航是否有效，或者您是否有同样的问题，例如捆绑版本？

@JiiB 是的，导航适用于 ng serve，没有观察到错误

【参考方案1】：

有几个原因可能会导致您的路由器出现问题。如果您在生产环境中遇到问题，请确保您遵循以下步骤：

第 1 步：

在 index.html 的标题部分添加一个基本标记：

<base href="/">

第 2 步：

在您的根目录中创建一个.htaccess 文件，并在您的 index.html 中设置ErrorDocument，如下例所示。

RewriteEngine On

ErrorDocument 404 /

这应该可以解决您的问题。

说明：

当您加载页面时，例如。 G。 domain.com/settings，您的浏览器向服务器发送一个请求，并期望一个 settings.html 文件作为响应。

如果 ErrorDocument 指向 index.html 文件，Angular 路由器可以正确处理请求并将您重定向到 domain.com/settings 而不会出错。

【讨论】：

我已经按照你说的尝试了，将.htaccess文件放在我的dist文件夹中，还是不行。错误和我上面提供的截图一模一样。

【参考方案2】：

最后我使用Web Server for Chrome 来托管一个简单的本地服务器，这不是我想要的，但总比没有好。

仍然希望有人能解决这个问题。

谢谢！

【参考方案3】：

使用哈希定位策略，将 index.html 中的基本标签完全移除。