如何在 index.html Angular 2 中包含来自 src/ 目录的服务工作者 js 文件

Question

我正在尝试在 Angular 2 中为 PWA 设置服务工作者。我目前在 src/assets/js 中有 service-worker.js 文件，我能够在 index.html 中包含以下内容：

<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/assets/js/service-worker.js').then(function(registration) {
    console.log('ServiceWorker registration successful with scope: ', registration.scope);
  }).catch(function(err) {
    console.log('ServiceWorker registration failed: ', err);
  });
}
</script>

这个问题是我收到错误

Uncaught (in promise) Error: Request for http://localhost:4200/assets/js/src/index.html?_sw-precache=5bad745861375765f6cd0b9440666847 returned a response with status 404

这是意料之中的，因为 index.html 不在 /assets/js/src。如果我尝试将 service-worker.js 文件移动到 src/，我会在 js 文件本身上收到 404 错误，因为我猜 Angular 2 开发服务器没有接收它？有谁知道解决这个问题的方法吗？

编辑：我正在使用 angular-cli

Answer 1

将 service-worker.js 文件移动到 src/ 并更改 angular cli 配置

.angular-cli.json

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "service-worker.js" <==== add this
      ],

如何在 index.html Angular 2 中包含来自 src/ 目录的服务工作者 js 文件

How can I include a service worker js file from src/ directory in index.html Angular 2

service-worker

progressive-web-apps

angular

angular-service-worker