没有服务器的角度部署-错误:SecurityError:无法在“历史记录"上执行"replaceState" [英] Angular deployment without server - Error: SecurityError: Failed to execute 'replaceState' on 'History'

问题描述

我在Angular v5中有一个简单的Web应用程序.这是一个纯粹的客户端应用程序，因为它不使用任何服务器端(这是一个基本的计算器应用程序，它从JSON文件中加载数据并进行一些测量，并根据该JSON向用户显示一些分析结果).

I have a simple web application in Angular v5. This is a purely client-side application in the meaning of it doesn't use any server-side (this is a basic calculator application that load data from JSON file with some measurements and display to the user some analysis according to that JSON).

在开发过程中，我已经通过运行-ng serve命令使用Angular-cli"serve"测试了应用程序，并且效果很好.

During development I've tested the application using the Angular-cli "serve", by running - ng serve command, and it works great.

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

Now I wont to bundle my app and start using it. I would like to run this app locally on my machine without any server.
According to the Angular documentation, to bundle the application to deployment, I should run the command: ng build --prod --base-href=./. There to flag --prod will deploy a minified and uglified version of the application. And the --base-href=./ will set <base href="./"> in the index.html to allow me loading the application files (all the ABC.bundles.js file) directly from the local machine.

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

Now, when I'm opening the dist/index.html file I can see that all the scripts have loaded, however, I have an error in the console:

ERROR错误:未捕获(承诺):SecurityError:执行失败 历史记录"上的"replaceState":具有URL的历史记录状态对象 无法在原始文件中建立'file:///C:/.../dist/' 'null'和URL'file:///C:/.../dist/index.html'.

ERROR Error: Uncaught (in promise): SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///C:/.../dist/' cannot be created in a document with origin 'null' and URL 'file:///C:/.../dist/index.html'.

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

How do I deploy/bundle my application to run locally, without a server?

推荐答案

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

When using angular-router you need a server-side since the router is used to serve pages.

要解决这些问题，您有2种选择:

To solve these issue you have 2 choices:

1. 使用某种轻量级服务器，例如NPM的 http服务器，使您可以从命令行在本地计算机上运行服务器.
   

1. Use some sort of light-weight server like NPM's http-server which allow you to run a server on a local machine from the command-line.
   

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

Drop the angular-router completely - Yes this is a bit extreme solution and I'm sure it will not be a valid solution to anybody with more than 2 pages in his application. But if you have a very very simple app with one page only and you don't need routing capabilities then this is a valid solution.

这篇关于没有服务器的角度部署-错误:SecurityError:无法在“历史记录"上执行"replaceState"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！