问题标签 [angular-pwa]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
1309 浏览

angular - 无法读取 Angular 6 中未定义的属性“条目”

在有人将此标记为重复之前,我已经尝试了所有发布的解决方案,并且我去过 GitHub 问题,在 StackOverflow 中,没有一个解决方案对我有用。

每当我尝试以角度生成任何东西时,它都会给我这个错误。这在我安装时开始,@angular/pwa但不确定这是否完全是原因,因为我有一段时间没有在任何早期的应用程序中尝试过生成命令。我完全卸载了nodejs并重新安装了它,删除了所有的node_modules,包括全局的和本地的,所有这些都没有结果,请帮忙,因为我留下了复制组件和编辑它们,虽然不多,但感觉像是一项任务自己的。提前致谢。

编辑

这是我附加--debug标志时出现的错误

这就是我跑步时得到的ng -v

0 投票
1 回答
776 浏览

angular - Angular 6 @angular/pwa - sw 没有成功地服务于清单的 start_url

我使用 angular 6 和 @angular/pwa 包构建了一个 PWA。

我一直在尝试解决这个问题,但无论我做什么,我都会收到 start_url 错误。我努力了:

  • 使用绝对链接
  • 确保 start_url 在 SW 的范围内(sw 在主文件夹中)
  • 使用我在其他支持线程中看到的文件名“/index.html”。
  • 每次清除所有浏览器历史记录和缓存。
  • 在 @angular/pwa 包上搜索 Github 问题
  • 一般在谷歌上搜索这个 PWA 问题。

这是我的清单:

在这段代码之后只有一堆图标,与这篇文章无关。

我对服务人员的配置:

我使用 ng build --prod 命令实际生产的服务人员是 2200 行代码,所以我认为在这里发布它并不相关。

不知道我在这个上缺少什么。

0 投票
1 回答
595 浏览

angular6 - Angular 6 PWA - PWA 功能与 Azure Adal 身份验证相互影响,不知道如何绕过它

我有一个使用 Angular 6 和 @angular/pwa npm 包构建的 PWA,并使用 adal-angular4 npm 包进行身份验证(但如果需要,可以从头开始重建它——我认为问题不是包中的错误)

在尝试进行身份验证时,虽然它确实有效,但用户经常会收到未找到的消息(控制台的屏幕截图,但它相同)。

如果您已经通过另一个(或本身)Azure AD 产品的身份验证,情况尤其如此。它通常应该只加载一段时间,然后让用户进入。

服务工作者错误记录:

0 投票
0 回答
601 浏览

angular - Angular PWA 站点的 localhost:8080 返回 / 的索引,而不是 Angular 的默认登录页面?

我正在运行 http-server -c-1 来提供一个简单的 http 服务器来测试我的 angular PWA 应用程序。但是,每次我访问 localhost:8080 我都会得到 / 页面的索引。我的 manifest.json 配置为“start_url”:“ http://localhost:8080/ ”,就像在角度教程文档中一样。https://blog.angular-university.io/angular-service-worker/

我尝试将 manifest.json "start_url": "index.html" 和 "start_url": "/" 更改为相同的结果。任何想法或建议为什么会发生这种情况?

0 投票
0 回答
792 浏览

angular - URL 中没有 index.html 的 Angular PWA 超时

我正在使用 Angular 6 构建一个渐进式 Web 应用程序。

我已经使用 Angular CLI 生成了我的项目,然后使用ng add @angular/pwa.

我已经在 Github-Pages 上部署了我的项目。

Manifest 和 Service-Worker 被 Google Chrome 识别。我可以在主屏幕上安装我的应用程序并在线使用它。

** 包.json **

清单.json

ngsw-config.json

问题是当我离线时,Service-Worker 不提供页面index.html和超时:

软件超时

但是,如果我/index.html在 URL 末尾添加(仍处于脱机状态),它会正确加载页面(并index.html从 URL 中删除,因此我无法再次成功刷新)

SW 加载 index.html

我在这里想念什么?谢谢你的帮助。

0 投票
1 回答
2119 浏览

azure-functions - Angular 7 PWA + Azure Functions Gateway Timeout 504 仅使用 Https

所以标题几乎说明了一切!

我有一个 Angular 7 应用程序编译为 PWA,我的 package.json 在下面。我的后端 api 是用 AzureFunctions V2 编写的。

我遇到的问题是,当我将 api 端点设置为使用 https 时,出现 504 Gateway Timeout 错误。我知道 https 配置/功能很好,因为这一切都是由 Azure 使用 Azure Functions 自动配置的。

此外,我所有的 api 请求都可以通过 https 与 Postman 一起正常工作。

在此处输入图像描述

更新 - 所以有点开发,如果我在没有启用 PWA 的情况下在本地运行它,我会得到以下不同的 ERR_SPDY_PROTOCOL_ERROR

这是 chrome 中的调试信息chrome://net-internals/#events

好的,5小时后再次更新!这只会变得越来越奇怪。

我强制在我的标头中输入一个有效的令牌,以查看我登录后其他端点是否正常工作。令人惊讶的是,即使在 https 下,其他一切都可以正常工作,这只是我的 Https POST /token x-www-form-urlencoded 请求没有工作 ?!?!?(http很好!)

所以出于绝望,我安装了 FireFox,只是看看我是否可以获得更多的调试信息,它确实做到了。我收到了这个错误CORS 请求没有成功,但没有任何线索说明大多数人得到的原因。

这导致我尝试使用 CORS 使用此 Azure Functions Access-Control-Allow-Credentials

这也没有帮助。我不相信它会起作用,因为我所有的 CORS 设置都很好,我通过强制输入令牌证明了这一点。

我决定通过使用以下代码不使用 Angular HttpClient 将 Angular 完全排除在外:

它只是工作!怎么回事?所以我为此浪费了一天的时间,我想这证明这与 Angular HttpClient 有关。

所以我现在就这样做。

如果有人知道为什么会发生这种情况或在不胜感激之前遇到过这种情况,因为我宁愿保持一致并在整个应用程序中使用 HttpClient。

0 投票
0 回答
34 浏览

angular - 每次 iis 服务器发生变化时重新加载渐进式应用程序

我有一个不使用任何缓存的渐进式 Web 应用程序。我正在寻找一种在每次服务器发生更改时自动更新应用程序的方法。有没有办法做到这一点?谢谢。

0 投票
1 回答
2113 浏览

angular - 如何防止 Angular 服务人员缓存 PDF 文件?

我有一个带有服务工作者设置的 Angular 7 应用程序。但我只是注意到,当我尝试在我的网站上打开 PDF 链接时,它们不起作用。

但是,如果我打开开发人员控制台 > 应用程序并单击绕过网络它工作正常,如果我禁用服务工作者它也工作正常。

这是我的ngsw-config.json文件。

当我查看开发人员工具上的网络选项卡时,我可以看到 PDF 正在从服务人员加载。

有什么办法可以告诉服务人员忽略 PDF 文件?

0 投票
1 回答
915 浏览

angular6 - 部署时奇怪的 Angular PWA 服务工作者行为

这个问题已经占据了我一整天,我无法弄清楚发生了什么

我可以看到我的服务工作人员已注册,但是“有时”当我在开发人员工具中单击离线时,我的域的服务工作人员就消失了!

但这是我重新加载应用程序时看到以下行为的主要问题。

可以看到 ngsw.json 被加载了 2 次,而 main.js 被加载了 3 次!main.d3ae2084xxxx && main.bbe5073dxxxx && 然后又是 main.d3ae2084xxxx!

在此处输入图像描述

如果我检查两个 ngsw.json 请求的响应,您可以看到两者都将 main.d3ae2084xxxx 显示为 main.js 的正确版本,但它仍然加载 main.bbe5073dxxxx ...

第一个 ngsw.json 请求

在此处输入图像描述

第二个 ngsw.json 请求

在此处输入图像描述

更郁闷的是实际加载的版本是之前的main.bbe5073dxxxx……!!!

如果有人对如何发生这种情况有任何想法,请告诉我。

更新......所以发现了这个优秀的小端点

这将为您提供有关服务人员的大量调试信息。

在我的情况下

Driver state: EXISTING_CLIENTS_ONLY (Degraded due to failed initialization: Hash mismatch (cacheBustedFetchFromNetwork): https://dev-xxxx.net/main.eb8468bb3ed28f02d7c2.js : expected b5601102b721e0cf777691d327dc965d40d1c96e, got 83c18fdb4a5942c964a31c119a57e0b8e16fe46e (after cache busting)

因此,在我的情况下,这似乎是某种 CDN 问题,当我确定时会更新答案。

0 投票
1 回答
144 浏览

angular7 - Angular PWA 重新生成清单

根据这里的 Angular 文档https://angular.io/guide/service-worker-config我可以运行这个命令

CLI 应该重新生成我的服务人员清单。

但是它不起作用我只是收到以下错误消息

zsh:找不到命令:ngsw-config

我看过 npm,试过npm run ngsw-configng ngsw-config在我看来它不存在。我正在使用角度 7.2

也许有一种新的方法可以做到这一点并且文档已经过时了?如果是这样,这样做的新方法是什么?