Angular 12集成Workbox报错：SW源中无法找到self.__WB_MANIFEST

问题原因 #

你遇到的报错本质是InjectManifest插件编译自定义service worker文件后，未在产物中搜索到self.__WB_MANIFEST字符串，无法完成预缓存清单注入。
触发该问题的直接原因是项目缺少必要的workbox依赖：你在service-worker.js中引入了workbox-routing、workbox-strategies、workbox-broadcast-update三个包，但package.json的dependencies中仅声明了workbox-precaching和workbox-window，webpack编译service worker时因找不到对应依赖抛出隐性错误，导致编译产物异常，self.__WB_MANIFEST字符串被丢弃。
你注释掉StaleWhileRevalidate的引入后，编译阶段的依赖缺失错误消失，webpack可正常输出service worker产物，self.__WB_MANIFEST被保留，因此插件可正常工作。（注意：你注释引入后仍调用new StaleWhileRevalidate会存在运行时未定义错误，应为测试时同步注释了对应逻辑）

解决方案 #

1. 补全所有workbox相关依赖，保持所有包版本和现有workbox-precaching的6.3.0版本一致，避免版本冲突：

npm install workbox-routing@6.3.0 workbox-strategies@6.3.0 workbox-broadcast-update@6.3.0 --save

2. 完善webpack.config.js中InjectManifest插件的配置，明确输出路径，避免和Angular默认构建逻辑冲突：

const { InjectManifest } = require("workbox-webpack-plugin");

module.exports = {
  // 其他webpack配置
  plugins: [
    // 其他插件
    new InjectManifest({
      swSrc: "./src/service-worker.js",
      swDest: "service-worker.js",
      // 可选配置：排除不需要预缓存的文件
      exclude: [/\.map$/, /asset-manifest\.json$/]
    }),
  ],
};

3. 可选优化：在service-worker.js顶部添加全局变量声明，避免打包工具将self.__WB_MANIFEST识别为未使用变量进行tree shaking删除：

/* global self __WB_MANIFEST */
import { precacheAndRoute } from "workbox-precaching";
// 其余引入保持不变

完成以上修改后重新构建项目即可正常注入预缓存清单，不会再报相关错误。

内容的提问来源于stack exchange，提问作者zapppa