使用 index.html 离线运行 Angular 7 Web 应用程序

Posted 2023-02-19

【中文标题】使用 index.html 离线运行 Angular 7 Web 应用程序

【英文标题】：Run Angular 7 Web application offline with index.html

【发布时间】：2019-11-18 03:14:32

【问题描述】：

嘿伙计们，我需要帮助， 我想为我的一位客户制作一个应用演示。 这个web应用，会打开index.html，离线运行。

在网络应用中只有静态和离线数据。 这是一个展示布局产品的演示。 我已经完成了这个应用程序，我相信我找到了一种离线运行的模式，但我没有:(

也许正在运行一些东西：

ng build myproject --offline 

我的目标是用 index.html 离线打开项目

我在网上搜索过，但没有。我可以使用 index.html 离线运行 Angular 应用程序吗？ 你能告诉我怎么做吗。 谢谢。

【问题讨论】：

看看服务人员angular.io/guide/service-worker-getting-started

我可以添加现有项目吗？

@David 我也有同样的问题。如何在现有项目中实现它？

【参考方案1】：

我不确定这是否可行 - 将您的构建源移动到 cdn url 并引用路径

以ng build --prod --deploy-url=https://yoururl.com/ 进行构建

此构建将使用指定的 URL 附加所有 js 的 src url - 一旦构建完成，请检查 index.html

现在终于将所有构建移动到您指定的路径 - 当您使用 index.html 引用路径时，您的应用程序将运行

希望这会有所帮助 - 编码愉快 :)

【参考方案2】：

使用 Angular 实现这一目标的最佳方法是使用他们的 PWA 包。为此，如果您拥有最新的 Angular CLI，则可以运行命令 ng add @angular/pwa。该软件包利用 Service Workers 技术，并允许您预先选择要离线提供的文件以及特定 API 端点的结果。您将拥有一个配置 JSON 文件来参数化上述所有功能。

您可以在他们的website 上找到更多信息。

请记住，Service Worker 仅在通过 HTTPS 提供服务时才能工作，并且要使其与 Angular 一起工作，您必须使用 --prod 标志构建您的应用程序。

【讨论】：

什么时候我想发布它以使其离线工作。喜欢用于演示目的

最简单的方法是将其托管在通过 HTTPS 运行的 Web 上的某个位置。您可以使用免费的托管服务提供商或云服务。 Heroku 有一个非常适合演示和原型的免费套餐计划，但最好使用任何您觉得舒服的托管服务。

@sebba23 只要您正确设置了服务人员和清单，它就会离线工作