如何在angular-cli.json中获取serviceWorker标志？

克里门蒂娜·杰帕罗斯卡（Klimentina Djeparoska）

我有一个angular的现有项目，我想向其中添加一个服务工作者以使其成为Progressive-Web-app。我使用angular 5.2.11，由于旧的cli，我无法使用该ng add命令。所以我手动开始，我安装了：

$npm install @angular/[email protected]
$npm install @angular/[email protected]

为了在angular-cli.json中获得serviceWorker标志，我还需要安装什么？

jo_va

由于您使用的是Angular 5.2.1，因此您的CLI必须至少为1.6，并且可以执行以下操作：

$ npm install @angular/service-worker
$ ng set apps.0.serviceWorker=true

最后一个命令在中设置serviceWorker标志angular-cli.json。

然后，您可以配置您的应用模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ServiceWorkerModule.register('/ngsw-worker.js', {
      enabled: environment.production
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

然后，您可以ngsw-worker.js在src目录中添加service-worker配置文件：

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

检查本文以了解更多详细信息：https : //alligator.io/angular/service-workers/

希望这可以帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。