Skip to content

Commit 6530aa1

Browse files
alan-agius4alan-agius4
committed
feat(@schematics/angular): replace assets with public directory
The `assets` directory is confusing for the users and commonly users place "assets" which are not meant to be copied but instead processed by the build system. This causes some files both bundled and copied. With this change we rename the `assets` directory to `public` and also move the `favicon.ico` inside this newly created directory.
1 parent 9d3aa46 commit 6530aa1

File tree

32 files changed

+102
-129
lines changed

32 files changed

+102
-129
lines changed

‎goldens/public-api/angular_devkit/build_angular/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export interface AssetPatternObject {
7979
glob: string;
8080
ignore?: string[];
8181
input: string;
82-
output: string;
82+
output?: string;
8383
}
8484

8585
// @public

‎packages/angular/pwa/pwa/files/root/manifest.webmanifest renamed to ‎packages/angular/pwa/pwa/files/assets/manifest.webmanifest

File renamed without changes.

‎packages/angular/pwa/pwa/index.ts

+23-19
Original file line numberDiff line numberDiff line change
@@ -104,23 +104,6 @@ export default function (options: PwaOptions): Rule {
104104
}
105105
}
106106

107-
// Add manifest to asset configuration
108-
const assetEntry = posix.join(
109-
project.sourceRoot ?? posix.join(project.root, 'src'),
110-
'manifest.webmanifest',
111-
);
112-
for (const target of [...buildTargets, ...testTargets]) {
113-
if (target.options) {
114-
if (Array.isArray(target.options.assets)) {
115-
target.options.assets.push(assetEntry);
116-
} else {
117-
target.options.assets = [assetEntry];
118-
}
119-
} else {
120-
target.options = { assets: [assetEntry] };
121-
}
122-
}
123-
124107
// Find all index.html files in build targets
125108
const indexFiles = new Set<string>();
126109
for (const target of buildTargets) {
@@ -146,11 +129,32 @@ export default function (options: PwaOptions): Rule {
146129
const { title, ...swOptions } = options;
147130

148131
await writeWorkspace(host, workspace);
132+
let assetsDir = posix.join(sourcePath, 'assets');
133+
134+
if (host.exists(assetsDir)) {
135+
// Add manifest to asset configuration
136+
const assetEntry = posix.join(
137+
project.sourceRoot ?? posix.join(project.root, 'src'),
138+
'manifest.webmanifest',
139+
);
140+
for (const target of [...buildTargets, ...testTargets]) {
141+
if (target.options) {
142+
if (Array.isArray(target.options.assets)) {
143+
target.options.assets.push(assetEntry);
144+
} else {
145+
target.options.assets = [assetEntry];
146+
}
147+
} else {
148+
target.options = { assets: [assetEntry] };
149+
}
150+
}
151+
} else {
152+
assetsDir = posix.join(project.root, 'public');
153+
}
149154

150155
return chain([
151156
externalSchematic('@schematics/angular', 'service-worker', swOptions),
152-
mergeWith(apply(url('./files/root'), [template({ ...options }), move(sourcePath)])),
153-
mergeWith(apply(url('./files/assets'), [move(posix.join(sourcePath, 'assets'))])),
157+
mergeWith(apply(url('./files/assets'), [template({ ...options }), move(assetsDir)])),
154158
...[...indexFiles].map((path) => updateIndexFile(path)),
155159
]);
156160
};

‎packages/angular/pwa/pwa/index_spec.ts

+4-15
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ describe('PWA Schematic', () => {
5454

5555
it('should create icon files', async () => {
5656
const dimensions = [72, 96, 128, 144, 152, 192, 384, 512];
57-
const iconPath = '/projects/bar/src/assets/icons/icon-';
57+
const iconPath = '/projects/bar/public/icons/icon-';
5858
const tree = await schematicRunner.runSchematic('ng-add', defaultOptions, appTree);
5959

6060
dimensions.forEach((d) => {
@@ -74,13 +74,13 @@ describe('PWA Schematic', () => {
7474

7575
it('should create a manifest file', async () => {
7676
const tree = await schematicRunner.runSchematic('ng-add', defaultOptions, appTree);
77-
expect(tree.exists('/projects/bar/src/manifest.webmanifest')).toBeTrue();
77+
expect(tree.exists('/projects/bar/public/manifest.webmanifest')).toBeTrue();
7878
});
7979

8080
it('should set the name & short_name in the manifest file', async () => {
8181
const tree = await schematicRunner.runSchematic('ng-add', defaultOptions, appTree);
8282

83-
const manifestText = tree.readContent('/projects/bar/src/manifest.webmanifest');
83+
const manifestText = tree.readContent('/projects/bar/public/manifest.webmanifest');
8484
const manifest = JSON.parse(manifestText);
8585

8686
expect(manifest.name).toEqual(defaultOptions.title);
@@ -91,7 +91,7 @@ describe('PWA Schematic', () => {
9191
const options = { ...defaultOptions, title: undefined };
9292
const tree = await schematicRunner.runSchematic('ng-add', options, appTree);
9393

94-
const manifestText = tree.readContent('/projects/bar/src/manifest.webmanifest');
94+
const manifestText = tree.readContent('/projects/bar/public/manifest.webmanifest');
9595
const manifest = JSON.parse(manifestText);
9696

9797
expect(manifest.name).toEqual(defaultOptions.project);
@@ -125,17 +125,6 @@ describe('PWA Schematic', () => {
125125
expect(content).toMatch(/<noscript>NO JAVASCRIPT<\/noscript>/);
126126
});
127127

128-
it('should update the build and test assets configuration', async () => {
129-
const tree = await schematicRunner.runSchematic('ng-add', defaultOptions, appTree);
130-
const configText = tree.readContent('/angular.json');
131-
const config = JSON.parse(configText);
132-
const targets = config.projects.bar.architect;
133-
134-
['build', 'test'].forEach((target) => {
135-
expect(targets[target].options.assets).toContain('projects/bar/src/manifest.webmanifest');
136-
});
137-
});
138-
139128
describe('Legacy browser builder', () => {
140129
function convertBuilderToLegacyBrowser(): void {
141130
const config = JSON.parse(appTree.readContent('/angular.json'));

‎packages/angular_devkit/build_angular/src/builders/application/schema.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -560,11 +560,12 @@
560560
},
561561
"output": {
562562
"type": "string",
563+
"default": "",
563564
"description": "Absolute path within the output."
564565
}
565566
},
566567
"additionalProperties": false,
567-
"required": ["glob", "input", "output"]
568+
"required": ["glob", "input"]
568569
},
569570
{
570571
"type": "string"

‎packages/angular_devkit/build_angular/src/builders/browser-esbuild/schema.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -466,11 +466,12 @@
466466
},
467467
"output": {
468468
"type": "string",
469+
"default": "",
469470
"description": "Absolute path within the output."
470471
}
471472
},
472473
"additionalProperties": false,
473-
"required": ["glob", "input", "output"]
474+
"required": ["glob", "input"]
474475
},
475476
{
476477
"type": "string"

‎packages/angular_devkit/build_angular/src/builders/browser/schema.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -454,11 +454,12 @@
454454
},
455455
"output": {
456456
"type": "string",
457+
"default": "",
457458
"description": "Absolute path within the output."
458459
}
459460
},
460461
"additionalProperties": false,
461-
"required": ["glob", "input", "output"]
462+
"required": ["glob", "input"]
462463
},
463464
{
464465
"type": "string"

‎packages/angular_devkit/build_angular/src/builders/karma/schema.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,7 @@
290290
},
291291
"output": {
292292
"type": "string",
293+
"default": "",
293294
"description": "Absolute path within the output."
294295
},
295296
"ignore": {
@@ -301,7 +302,7 @@
301302
}
302303
},
303304
"additionalProperties": false,
304-
"required": ["glob", "input", "output"]
305+
"required": ["glob", "input"]
305306
},
306307
{
307308
"type": "string"

‎packages/angular_devkit/build_angular/src/builders/server/schema.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -251,11 +251,12 @@
251251
},
252252
"output": {
253253
"type": "string",
254+
"default": "",
254255
"description": "Absolute path within the output."
255256
}
256257
},
257258
"additionalProperties": false,
258-
"required": ["glob", "input", "output"]
259+
"required": ["glob", "input"]
259260
},
260261
{
261262
"type": "string"

‎packages/angular_devkit/build_angular/src/builders/web-test-runner/schema.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,7 @@
269269
},
270270
"output": {
271271
"type": "string",
272+
"default": "",
272273
"description": "Absolute path within the output."
273274
},
274275
"ignore": {
@@ -280,7 +281,7 @@
280281
}
281282
},
282283
"additionalProperties": false,
283-
"required": ["glob", "input", "output"]
284+
"required": ["glob", "input"]
284285
},
285286
{
286287
"type": "string"

‎packages/angular_devkit/build_angular/src/tools/webpack/utils/helpers.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ export function assetPatterns(root: string, assets: AssetPatternClass[]) {
231231
return assets.map((asset: AssetPatternClass, index: number): ObjectPattern => {
232232
// Resolve input paths relative to workspace root and add slash at the end.
233233
// eslint-disable-next-line prefer-const
234-
let { input, output, ignore = [], glob } = asset;
234+
let { input, output = '', ignore = [], glob } = asset;
235235
input = path.resolve(root, input).replace(/\\/g, '/');
236236
input = input.endsWith('/') ? input : input + '/';
237237
output = output.endsWith('/') ? output : output + '/';

‎packages/angular_devkit/build_angular/src/utils/normalize-asset-patterns.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
*/
88

99
import { statSync } from 'fs';
10+
import assert from 'node:assert';
1011
import * as path from 'path';
1112
import { AssetPattern, AssetPatternClass } from '../builders/browser/schema';
1213

@@ -21,7 +22,7 @@ export function normalizeAssetPatterns(
2122
workspaceRoot: string,
2223
projectRoot: string,
2324
projectSourceRoot: string | undefined,
24-
): AssetPatternClass[] {
25+
): (AssetPatternClass & { output: string })[] {
2526
if (assetPatterns.length === 0) {
2627
return [];
2728
}
@@ -67,13 +68,15 @@ export function normalizeAssetPatterns(
6768

6869
assetPattern = { glob, input, output };
6970
} else {
70-
assetPattern.output = path.join('.', assetPattern.output);
71+
assetPattern.output = path.join('.', assetPattern.output ?? '');
7172
}
7273

74+
assert(assetPattern.output !== undefined);
75+
7376
if (assetPattern.output.startsWith('..')) {
7477
throw new Error('An asset cannot be written to a location outside of the output path.');
7578
}
7679

77-
return assetPattern;
80+
return assetPattern as AssetPatternClass & { output: string };
7881
});
7982
}

‎packages/schematics/angular/application/files/common-files/src/favicon.ico.template renamed to ‎packages/schematics/angular/application/files/common-files/public/favicon.ico.template

File renamed without changes.

‎packages/schematics/angular/application/files/common-files/src/assets/.gitkeep.template

Whitespace-only changes.

‎packages/schematics/angular/application/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@ function addAppToWorkspaceFile(
242242
polyfills: ['zone.js'],
243243
tsConfig: `${projectRoot}tsconfig.app.json`,
244244
inlineStyleLanguage,
245-
assets: [`${sourceRoot}/favicon.ico`, `${sourceRoot}/assets`],
245+
assets: [{ 'glob': '**/*', 'input': 'public' }],
246246
styles: [`${sourceRoot}/styles.${options.style}`],
247247
scripts: [],
248248
},
@@ -285,7 +285,7 @@ function addAppToWorkspaceFile(
285285
polyfills: ['zone.js', 'zone.js/testing'],
286286
tsConfig: `${projectRoot}tsconfig.spec.json`,
287287
inlineStyleLanguage,
288-
assets: [`${sourceRoot}/favicon.ico`, `${sourceRoot}/assets`],
288+
assets: [{ 'glob': '**/*', 'input': 'public' }],
289289
styles: [`${sourceRoot}/styles.${options.style}`],
290290
scripts: [],
291291
},

‎packages/schematics/angular/application/index_spec.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ describe('Application Schematic', () => {
5050
jasmine.arrayContaining([
5151
'/projects/foo/tsconfig.app.json',
5252
'/projects/foo/tsconfig.spec.json',
53-
'/projects/foo/src/favicon.ico',
53+
'/projects/foo/public/favicon.ico',
5454
'/projects/foo/src/index.html',
5555
'/projects/foo/src/main.ts',
5656
'/projects/foo/src/styles.css',
@@ -263,7 +263,7 @@ describe('Application Schematic', () => {
263263
jasmine.arrayContaining([
264264
'/tsconfig.app.json',
265265
'/tsconfig.spec.json',
266-
'/src/favicon.ico',
266+
'/public/favicon.ico',
267267
'/src/index.html',
268268
'/src/main.ts',
269269
'/src/styles.css',
@@ -448,7 +448,7 @@ describe('Application Schematic', () => {
448448
expect(files).toEqual(
449449
jasmine.arrayContaining([
450450
'/projects/foo/tsconfig.app.json',
451-
'/projects/foo/src/favicon.ico',
451+
'/projects/foo/public/favicon.ico',
452452
'/projects/foo/src/index.html',
453453
'/projects/foo/src/main.ts',
454454
'/projects/foo/src/styles.css',
@@ -473,7 +473,7 @@ describe('Application Schematic', () => {
473473
expect(files).toEqual(
474474
jasmine.arrayContaining([
475475
'/projects/foo/tsconfig.app.json',
476-
'/projects/foo/src/favicon.ico',
476+
'/projects/foo/public/favicon.ico',
477477
'/projects/foo/src/index.html',
478478
'/projects/foo/src/main.ts',
479479
'/projects/foo/src/styles.css',
@@ -499,7 +499,7 @@ describe('Application Schematic', () => {
499499
expect(files).toEqual(
500500
jasmine.arrayContaining([
501501
'/projects/foo/tsconfig.app.json',
502-
'/projects/foo/src/favicon.ico',
502+
'/projects/foo/public/favicon.ico',
503503
'/projects/foo/src/index.html',
504504
'/projects/foo/src/main.ts',
505505
'/projects/foo/src/styles.css',
@@ -519,7 +519,7 @@ describe('Application Schematic', () => {
519519
jasmine.arrayContaining([
520520
'/projects/foo/tsconfig.app.json',
521521
'/projects/foo/tsconfig.spec.json',
522-
'/projects/foo/src/favicon.ico',
522+
'/projects/foo/public/favicon.ico',
523523
'/projects/foo/src/index.html',
524524
'/projects/foo/src/main.ts',
525525
'/projects/foo/src/styles.css',

‎packages/schematics/angular/service-worker/files/ngsw-config.json.template

+1-2
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,7 @@
2121
"updateMode": "prefetch",
2222
"resources": {
2323
"files": [
24-
"/assets/**",
25-
"<%= resourcesOutputPath %>/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
24+
"/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
2625
]
2726
}
2827
}

‎packages/schematics/angular/service-worker/index.ts

-6
Original file line numberDiff line numberDiff line change
@@ -120,12 +120,10 @@ export default function (options: ServiceWorkerOptions): Rule {
120120

121121
const buildOptions = buildTarget.options as Record<string, string | boolean>;
122122
let browserEntryPoint: string | undefined;
123-
let resourcesOutputPath = '';
124123
const ngswConfigPath = join(normalize(project.root), 'ngsw-config.json');
125124

126125
if (buildTarget.builder === Builders.Application) {
127126
browserEntryPoint = buildOptions.browser as string;
128-
resourcesOutputPath = '/media';
129127
const productionConf = buildTarget.configurations?.production;
130128
if (productionConf) {
131129
productionConf.serviceWorker = ngswConfigPath;
@@ -134,9 +132,6 @@ export default function (options: ServiceWorkerOptions): Rule {
134132
browserEntryPoint = buildOptions.main as string;
135133
buildOptions.serviceWorker = true;
136134
buildOptions.ngswConfigPath = ngswConfigPath;
137-
if (buildOptions.resourcesOutputPath) {
138-
resourcesOutputPath = normalize(`/${buildOptions.resourcesOutputPath}`);
139-
}
140135
}
141136

142137
await writeWorkspace(host, workspace);
@@ -147,7 +142,6 @@ export default function (options: ServiceWorkerOptions): Rule {
147142
apply(url('./files'), [
148143
applyTemplates({
149144
...options,
150-
resourcesOutputPath,
151145
relativePathToWorkspaceRoot: relativePathToWorkspaceRoot(project.root),
152146
}),
153147
move(project.root),

0 commit comments

Comments
 (0)