将 PWA 添加到 Angular 8 - 模块构建失败答案

【问题标题】：Adding PWA to angular 8 - module build failed将 PWA 添加到 Angular 8 - 模块构建失败
【发布时间】：2020-03-14 22:21:33
【问题描述】：

我有 Angular 8 应用程序。在这个应用程序中，我有三个项目。

我想用这个命令添加@angular/pwa

ng add @angular/pwa && ng build --prod

但是当安装 PWA 时出现错误

错误 ./node_modules/@angular/service-worker/fesm2015/service-worker.js 模块构建失败：错误：ENOENT：没有这样的文件或目录，打开 'C:\Development\Repositories\app\node_modules@angular\service-worker\fesm2015\service-worker.js'

在 Chrome 控制台中我得到了

Uncaught TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (core.js:34469)
    at core.js:34487
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:34483)
    at core.js:34487
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:34483)
    at core.js:34487
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:34483)

在 PWA 之前一切正常

编辑：我也尝试删除 PWA 并将其直接添加到项目中

ng add @angular/pwa --project app1

现在在我的项目src 中，我得到新文件manifest.webmanifest，在项目的根目录中我得到ngsw-config.json，在项目模块中我得到ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })

但还是会出现同样的错误

编辑：

这是我的文件夹结构。这就是添加角度 CLI 的方式。我需要添加另一个文件吗？

我的任何文件夹中都没有gsw-worker.js。

另外，当我为"$schema": "../../node_modules/@angular/service-worker/config/schema.json" 打开ngsw-config.json 时，我得到了

Unable to load schema from c:\Development\Repositories\app\app-frontend\node_modules\@angular\service-worker\config\schema.json': ENOENT: no such file or directory, open 'c:\Development\Repositories\app\app-frontend\node_modules\@angular\service-worker\config\schema.json'

但如果我查看node_modulesshema.json 是否存在

(root -angular.json, package.json... there is no any manifest.webmanifest and ngsw-config.json)
 |
 |
 |----projects
        |
        |----app1
               |------src
               |       |------app
               |       |        |-app.module.ts (here is in imports ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })) 
               |       |
               |       |-manifest.webmanifest
               |
               |
      ngsw-config.json
      tsconfig.json
      tsconfig.app.json
      tsconfig.spec.json

ma app.module.ts 中的 Mabey（在我的项目中）是问题，因为我需要注册 'ngsw-worker.js' 但我在我的应用程序中找不到这个，mabey angular CLI 没有添加这个或者我不需要这个文件？

【问题讨论】：

你能在 stackblitz 上分享你的代码吗？

标签： javascript node.js angular typescript progressive-web-apps

【解决方案1】：

使其工作的步骤......

npm uninstall @angular/pwa
npm cache clean

随机错误§ 一些奇怪的问题可以通过简单地运行 npm cache clean 并重试来解决。如果您在安装 npm 时遇到问题，请使用 -verbose 选项查看更多详细信息。

毕竟ng update

这将修复此错误。发生此错误是因为 package.json 中的某些依赖项不是最新的并且它们与 pwa 混淆。

【讨论】：

【解决方案2】：

在将 pwa 安装到 Angular 项目之前，几乎没有什么。首先你需要更新你的@angular/cli 以确保你拥有最新版本

npm i -g @angular/cli

然后运行

ng new projectname

然后将 pwa 添加到您的项目中

ng add @angular/pwa --project *project-name*

然后运行

ng build --prod

【讨论】：

我编辑了我的问题，请看一下。另外，我得到了最后一个 CLI 版本
很难解决。你能把你的代码更新到 github 我很乐意帮助你
感谢您的帮助，但我无法在发布之前将我的代码更新到任何公共平台...我尝试提出另一个问题，简化

【解决方案3】：

您的应用程序中可能存在多个错误尝试再次正确添加 pwa

ng add @angular/pwa --project *project-name*

然后用

构建它

ng build --prod

这是供您参考的链接 - https://angular.io/guide/service-worker-getting-started

Chrome 控制台错误

您收到该错误是因为您要从一个未定义的对象访问 id，您需要正确处理您的对象

前-let id = obj.id ? obj.id : '';

尝试先修复该错误，然后再构建它。如果它不起作用，请删除您的 node_modules，然后重新安装并构建它。

希望这会有所帮助:)

【讨论】：

嗨，谢谢。我总是按照您的描述进行检查，但是这个问题直接与 PWA 有关...我从我的应用程序中完全删除了 PWA 并按照您的建议进行安装，但是同样的问题在这里...如果我在没有 PWA 的情况下构建，则没有错误。
在同一个目录中有三个项目是什么意思？这三个不同的角度项目吗？再检查一件事，你在主应用程序目录中添加 pwa 吗？
我正在编辑我的问题...我有一个 Angular 应用程序，里面有多个项目
@Arter 我写了一篇文章，将 PWA 逐步添加到 Angular 应用程序中：dev.to/paco_ita/… 该帖子还提到了一个工作中的 Github Angular 8 PWA 项目，您可以参考比较。
@Francesco thnx... 我已经使用了你的教程。但问题在于 npm 依赖版本

【解决方案4】：

请注意，添加 PWA 会将此功能添加到使用以下命令的现有项目之一：

ng add @angular/pwa --project *project-name*

查看 Angular 官方文档了解更多信息：https://angular.io/guide/service-worker-getting-started

【讨论】：