From c7f3e001d7b3f2a4dc5a7e4df3f8c603c635f198 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Mon, 27 May 2024 06:29:50 +0000 Subject: [PATCH 1/2] fix(@schematics/angular): set builders `assets` option correctly for new applications This commit ensures that the `assets` option value accurately reflects the source location. Closes: #27709 --- packages/schematics/angular/application/index.ts | 4 ++-- packages/schematics/angular/application/index_spec.ts | 10 +++++++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/schematics/angular/application/index.ts b/packages/schematics/angular/application/index.ts index 30f40678a4f7..dd764d9195b4 100644 --- a/packages/schematics/angular/application/index.ts +++ b/packages/schematics/angular/application/index.ts @@ -242,7 +242,7 @@ function addAppToWorkspaceFile( polyfills: ['zone.js'], tsConfig: `${projectRoot}tsconfig.app.json`, inlineStyleLanguage, - assets: [{ 'glob': '**/*', 'input': 'public' }], + assets: [{ 'glob': '**/*', 'input': `${projectRoot}public` }], styles: [`${sourceRoot}/styles.${options.style}`], scripts: [], }, @@ -282,7 +282,7 @@ function addAppToWorkspaceFile( polyfills: ['zone.js', 'zone.js/testing'], tsConfig: `${projectRoot}tsconfig.spec.json`, inlineStyleLanguage, - assets: [{ 'glob': '**/*', 'input': 'public' }], + assets: [{ 'glob': '**/*', 'input': `${projectRoot}public` }], styles: [`${sourceRoot}/styles.${options.style}`], scripts: [], }, diff --git a/packages/schematics/angular/application/index_spec.ts b/packages/schematics/angular/application/index_spec.ts index 0cc2263a53d0..ed13b02375e5 100644 --- a/packages/schematics/angular/application/index_spec.ts +++ b/packages/schematics/angular/application/index_spec.ts @@ -277,7 +277,6 @@ describe('Application Schematic', () => { it('should set values in angular.json correctly', async () => { const options = { ...defaultOptions, projectRoot: '' }; - const tree = await schematicRunner.runSchematic('application', options, workspaceTree); const config = JSON.parse(tree.readContent('/angular.json')); @@ -286,12 +285,14 @@ describe('Application Schematic', () => { const buildOpt = prj.architect.build.options; expect(buildOpt.index).toEqual('src/index.html'); expect(buildOpt.browser).toEqual('src/main.ts'); + expect(buildOpt.assets).toEqual([{ 'glob': '**/*', 'input': 'public' }]); expect(buildOpt.polyfills).toEqual(['zone.js']); expect(buildOpt.tsConfig).toEqual('tsconfig.app.json'); const testOpt = prj.architect.test.options; expect(testOpt.tsConfig).toEqual('tsconfig.spec.json'); expect(testOpt.karmaConfig).toBeUndefined(); + expect(testOpt.assets).toEqual([{ 'glob': '**/*', 'input': 'public' }]); expect(testOpt.styles).toEqual(['src/styles.css']); }); @@ -377,6 +378,13 @@ describe('Application Schematic', () => { expect(buildOpt.browser).toEqual('foo/src/main.ts'); expect(buildOpt.polyfills).toEqual(['zone.js']); expect(buildOpt.tsConfig).toEqual('foo/tsconfig.app.json'); + expect(buildOpt.assets).toEqual([{ 'glob': '**/*', 'input': 'foo/public' }]); + + const testOpt = project.architect.test.options; + expect(testOpt.tsConfig).toEqual('foo/tsconfig.spec.json'); + expect(testOpt.karmaConfig).toBeUndefined(); + expect(testOpt.assets).toEqual([{ 'glob': '**/*', 'input': 'foo/public' }]); + expect(testOpt.styles).toEqual(['foo/src/styles.css']); const appTsConfig = readJsonFile(tree, '/foo/tsconfig.app.json'); expect(appTsConfig.extends).toEqual('../tsconfig.json'); From b3d9ee6c023a20a3ed151eba9162b18df071d33a Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Mon, 27 May 2024 06:31:04 +0000 Subject: [PATCH 2/2] fix(@angular/pwa): set manifest `icons` location to match `assets` builder option This commit ensures that the `icons` option value accurately reflects the `assets` option location. --- .../pwa/pwa/files/assets/manifest.webmanifest | 16 ++++++++-------- packages/angular/pwa/pwa/index.ts | 8 ++++++-- packages/angular/pwa/pwa/index_spec.ts | 9 +++++++++ 3 files changed, 23 insertions(+), 10 deletions(-) diff --git a/packages/angular/pwa/pwa/files/assets/manifest.webmanifest b/packages/angular/pwa/pwa/files/assets/manifest.webmanifest index 7d096fae01c5..f8c1e3960511 100644 --- 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 index 2710247a619f..2d8b50c2875b 100644 --- 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 index e538af1ee625..f48ff52ef576 100644 --- 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');