Question

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

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

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

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

错误错误：未捕获（在承诺中）：SecurityError：无法执行 '历史''上的'replaceState'：带URL的历史状态对象无法在包含origin的文档中创建“file：/// C：/.../dist/” 'null'和URL'file：/// C：/.../dist/index.html'。

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

Answer 1

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

要解决这些问题，您有两种选择：

使用某种轻量级服务器，如NPM http-server，它允许您从命令行在本地计算机上运行服务器。
完全放弃 angular-router - 是的，这是一个极端的解决方案，我相信它对于任何超过2页的人来说都不是一个有效的解决方案应用。但是如果你有一个非常简单的应用只有一个页面，而你不需要路由功能，那么这是一个有效的解决方案。

Answer 2

在路线配置中添加;

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

在index.html中执行此操作;

 <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

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

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

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

从Google.com请求后，

对我来说页面未加载并抛出404页面找不到

url --- http://techeducation.in

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

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

没有服务器的角度部署 - 错误：SecurityError：无法在“历史记录”

4 个答案: