fix(@angular/pwa): set manifest icons location to match assets bu…

…ilder option This commit ensures that the `icons` option value accurately reflects the `assets` option location.
alan-agius4 · May 28, 2024 · 516ce38 · 516ce38
1 parent 8ea94eb
commit 516ce38
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/packages/angular/pwa/pwa/files/assets/manifest.webmanifest b/packages/angular/pwa/pwa/files/assets/manifest.webmanifest
@@ -8,49 +8,49 @@
   "start_url": "./",
   "icons": [
     {
-      "src": "assets/icons/icon-72x72.png",
+      "src": "<%= iconsPath %>/icon-72x72.png",
       "sizes": "72x72",
       "type": "image/png",
       "purpose": "maskable any"
     },
     {
-      "src": "assets/icons/icon-96x96.png",
+      "src": "<%= iconsPath %>/icon-96x96.png",
       "sizes": "96x96",
       "type": "image/png",
       "purpose": "maskable any"
     },
     {
-      "src": "assets/icons/icon-128x128.png",
+      "src": "<%= iconsPath %>/icon-128x128.png",
       "sizes": "128x128",
       "type": "image/png",
       "purpose": "maskable any"
     },
     {
-      "src": "assets/icons/icon-144x144.png",
+      "src": "<%= iconsPath %>/icon-144x144.png",
       "sizes": "144x144",
       "type": "image/png",
       "purpose": "maskable any"
     },
     {
-      "src": "assets/icons/icon-152x152.png",
+      "src": "<%= iconsPath %>/icon-152x152.png",
       "sizes": "152x152",
       "type": "image/png",
       "purpose": "maskable any"
     },
     {
-      "src": "assets/icons/icon-192x192.png",
+      "src": "<%= iconsPath %>/icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "maskable any"
     },
     {
-      "src": "assets/icons/icon-384x384.png",
+      "src": "<%= iconsPath %>/icon-384x384.png",
       "sizes": "384x384",
       "type": "image/png",
       "purpose": "maskable any"
     },
     {
-      "src": "assets/icons/icon-512x512.png",
+      "src": "<%= iconsPath %>/icon-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "maskable any"

diff --git a/packages/angular/pwa/pwa/index.ts b/packages/angular/pwa/pwa/index.ts
@@ -130,7 +130,7 @@ export default function (options: PwaOptions): Rule {
 
     await writeWorkspace(host, workspace);
     let assetsDir = posix.join(sourcePath, 'assets');
-
+    let iconsPath: string;
     if (host.exists(assetsDir)) {
       // Add manifest to asset configuration
       const assetEntry = posix.join(
@@ -148,13 +148,17 @@ export default function (options: PwaOptions): Rule {
           target.options = { assets: [assetEntry] };
         }
       }
+      iconsPath = 'assets';
     } else {
       assetsDir = posix.join(project.root, 'public');
+      iconsPath = 'icons';
     }
 
     return chain([
       externalSchematic('@schematics/angular', 'service-worker', swOptions),
-      mergeWith(apply(url('./files/assets'), [template({ ...options }), move(assetsDir)])),
+      mergeWith(
+        apply(url('./files/assets'), [template({ ...options, iconsPath }), move(assetsDir)]),
+      ),
       ...[...indexFiles].map((path) => updateIndexFile(path)),
     ]);
   };

diff --git a/packages/angular/pwa/pwa/index_spec.ts b/packages/angular/pwa/pwa/index_spec.ts
@@ -63,6 +63,15 @@ describe('PWA Schematic', () => {
     });
   });
 
+  it('should reference the icons in the manifest correctly', async () => {
+    const tree = await schematicRunner.runSchematic('ng-add', defaultOptions, appTree);
+    const manifestText = tree.readContent('/projects/bar/public/manifest.webmanifest');
+    const manifest = JSON.parse(manifestText);
+    for (const icon of manifest.icons) {
+      expect(icon.src).toMatch(/^icons\/icon-\d+x\d+.png/);
+    }
+  });
+
   it('should run the service worker schematic', async () => {
     const tree = await schematicRunner.runSchematic('ng-add', defaultOptions, appTree);
     const configText = tree.readContent('/angular.json');