运行build --prod时,没有Service worker文件生成ngsw.json / ngsw-worker.json。 Angular 5

时间:2018-01-04 18:38:08

标签: angular progressive-web-apps angular-service-worker

使用角度5.1.2 Angular-cli 1.6.3

所有文件都非常香草。 dist文件夹已创建

我的ngsw-config.json

{
"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/**"
            ]
        }
    }]   

}

我的app.module.ts使用

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

正在使用vanilla environment.ts和environment.prod.ts

main.ts

import './polyfills.ts';
import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {AppModule} from './app/app.module';
import {environment} from './environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.then(() => {
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('ngsw-worker.js');
}

})
.catch(err => console.log(err));

不确定还有什么要检查

4 个答案:

答案 0 :(得分:10)

您是否将serviceWorker属性添加到apps的{​​{1}}第一个条目?如果没有,angular-cli没有构建它。

.angular-cli.json

编辑 截至2018年12月, .angular-cli.json 现在是 angular.json ,现在是serviceWorker的格式:

"apps": [
  {
    ...
    "serviceWorker": true
  }
}

您需要为您希望服务工作者的每个配置指定serviceWorker:true。

答案 1 :(得分:8)

我有同样的问题。原来我使用的是旧包装

sprintf

应该是

"@angular-devkit/build-angular": "~0.6.6"

此后,将复制服务工作者

还要确保使用最新的Angular 7和最新的Angular CLI

答案 2 :(得分:1)

看来我的app.module.ts缺少一个空格

我有:   environment.production? ServiceWorkerModule.register('/ ngsw-worker.js'):[]

更改为:   environment.production? ServiceWorkerModule.register('/ ngsw-worker.js'):[]

答案 3 :(得分:0)

经过长时间的搜索,我们发现构建中缺少的--prod标志会产生问题。正是这个产生了服务工作者文件,并且没有额外的构建标志能够做到(与uglifying相同,而uglifyer是我们之前交换--build标志--env = build之前的原因)。有关在此处找到的--build标志上发生的事情的更多信息:Angular 2 with CLI - build for production