Как преобразовать проект Angular 6 в приложение PWA - PullRequest
Новая
       13

Как преобразовать проект Angular 6 в приложение PWA

0 голосов
/ 07 мая 2019

Мой проект уже запущен с использованием Angular 6, мне нужно интегрировать PWA в мое существующее приложение.Когда я добавляю 

ng add @angular/pwa

Вывод: + @angular/pwa@0.13.8

Изменяется только 1 файл, добавленный вместо 6-7 файлов.Если я создаю новый проект и затем выполняю указанную выше команду, то "ng add @angular/pwa" pwa работает нормально.

Любой может найти, где я делаю ошибку.

1 Ответ

0 голосов
/ 07 мая 2019

Чтобы интегрировать PWA в ваш проект, вам необходимо выполнить следующие шаги:

Установите эти 2 пакета 

"@angular/pwa": "0.12",
"@angular/service-worker": "^7.2.12"

В файле angular.json добавьте конфигурацию serviceWorker, как это 

"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true
            }
          }

Создайте ngsw-config.json на том же уровне angular.json, как этот 

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/assets/favicon.ico",
          "/*.css",
          "/*.js"
        ],
        "urls": [
          "https://cdnjs.cloudflare.com/**"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

И, наконец, в ваш app.module.ts добавьте в раздел импорта 

ServiceWorkerModule.register("ngsw-worker.js", { enabled: environment.production })
...