PWA broken since Angular 12. #42313
Description
Bug Report
Affected Package
I don't know, but most likely the code that compiles the ngsw.json file.
Is this a regression?
This worked in Angular 11.2.14, After upgrading to Angular 12.0.11 it does not.
Description
Generated ngsw.json does not contain urls and hashtable items. (the json below is the output generated).
Normally both "urls" contain an array of urls, while the "hashTable" contains a handfull of items as well.
If I manually fill out the first url array (under "name" : "app" section) it shows up as a PWA, ready to install on Chrome and IOS.
The output for the PWA projects... Does not show up as a PWA,
{
"configVersion": 1,
"timestamp": 1621931884948,
"index": "/apps/s2/v2.1-beta/da/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"updateMode": "prefetch",
"cacheQueryOptions": {
"ignoreVary": true
},
"urls": [],
"patterns": []
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"cacheQueryOptions": {
"ignoreVary": true
},
"urls": [],
"patterns": []
}
],
"dataGroups": [],
"hashTable": {},
"navigationUrls": [
{
"positive": true,
"regex": "^\\/.*$"
},
{
"positive": false,
"regex": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
},
{
"positive": false,
"regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
},
{
"positive": false,
"regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
}
],
"navigationRequestStrategy": "performance"
}
Shows up as a PWA
{
"configVersion": 1,
"timestamp": 1621931884948,
"index": "/apps/s2/v2.1-beta/da/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"updateMode": "prefetch",
"cacheQueryOptions": {
"ignoreVary": true
},
"urls": [
"/apps/s2/v2.1/da/favicon.ico",
"/apps/s2/v2.1/da/index.html",
"/apps/s2/v2.1/da/main-es2015.e06c9d23360581aa3b0a.js",
"/apps/s2/v2.1/da/main-es5.e06c9d23360581aa3b0a.js",
"/apps/s2/v2.1/da/manifest.webmanifest",
"/apps/s2/v2.1/da/polyfills-es2015.18f7e8b03874daf0cacd.js",
"/apps/s2/v2.1/da/polyfills-es5.13bfd6ff8f0b6f110c14.js",
"/apps/s2/v2.1/da/runtime-es2015.3627206aa6b05987171b.js",
"/apps/s2/v2.1/da/runtime-es5.3627206aa6b05987171b.js",
"/apps/s2/v2.1/da/styles.360abac66bdebac01436.css"],
"patterns": []
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"cacheQueryOptions": {
"ignoreVary": true
},
"urls": [],
"patterns": []
}
],
"dataGroups": [],
"hashTable": {},
"navigationUrls": [
{
"positive": true,
"regex": "^\\/.*$"
},
{
"positive": false,
"regex": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
},
{
"positive": false,
"regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
},
{
"positive": false,
"regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
}
],
"navigationRequestStrategy": "performance"
}
Minimal Reproduction
Create a new project using ng new
Then make it a PWA by using the ng add @angular/pwa and fill out the info needed.
Build the project using the command "npm build" and the result is a build where the ngsw.json file has no urls and therefore will not work as an installable PWA
Exception or Error
Your Environment
Angular Version:
Angular CLI: 12.0.1
Node: 14.16.1
Package Manager: npm 6.14.12
OS: win32 x64
Angular: 12.0.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1200.1
@angular-devkit/build-angular 12.0.1
@angular-devkit/core 12.0.1
@angular-devkit/schematics 12.0.1
@schematics/angular 12.0.1
rxjs 6.6.7
typescript 4.2.4
Anything else relevant?
All existing PWA projects being upgraded to version 12.0.1 has the same issue.