Skip to content

Commit

Permalink
fix(@angular-devkit/build-angular): avoid marking component styles as…
Browse files Browse the repository at this point in the history 
… media with no output media directory

The logic to detect media output files was previously predicated on the presence of a media subdirectory
being defined. Prior to the ability to customize output path subcomponents there was a guaranteed media
subdirectory. However, now that customization is possible, there is the potential for media files to
not have a distinct subdirectory in the output. To facilitate output media detection in this scenario
a file extension based method is now employed. This avoids a dependence on output directory structure.

(cherry picked from commit 7a1a443)
  • Loading branch information
@clydin @alan-agius4
clydin authored and alan-agius4 committed Mar 4, 2024
1 parent 7cc8261 commit 259ec72
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 6 deletions.
57 changes: 54 additions & 3 deletions ...s/angular_devkit/build_angular/src/builders/application/tests/options/output-path_spec.ts
View file
Expand Up @@ -11,8 +11,11 @@ import { APPLICATION_BUILDER_INFO, BASE_OPTIONS, describeBuilder } from '../setu

describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
beforeEach(async () => {
// Add a media file
// Add a global stylesheet media file
await harness.writeFile('src/styles.css', `h1 { background: url('./spectrum.png')}`);
// Add a component stylesheet media file
await harness.writeFile('src/app/abc.svg', '');
await harness.writeFile('src/app/app.component.css', `h2 { background: url('./abc.svg')}`);

// Enable SSR
await harness.modifyFile('src/tsconfig.app.json', (content) => {
Expand All @@ -23,10 +26,9 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
return JSON.stringify(tsConfig);
});

// Application code is not needed in this test
// Application server code is not needed in this test
await harness.writeFile('src/main.server.ts', `console.log('Hello!');`);
await harness.writeFile('src/server.ts', `console.log('Hello!');`);
await harness.writeFile('src/main.ts', `console.log('Hello!');`);
});

describe('Option: "outputPath"', () => {
Expand Down Expand Up @@ -56,6 +58,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
expect(result?.success).toBeTrue();

harness.expectFile('dist/browser/media/spectrum.png').toExist();
harness.expectFile('dist/browser/media/abc.svg').toExist();
});

it(`should emit server bundles in 'server' directory`, async () => {
Expand Down Expand Up @@ -96,6 +99,50 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
expect(result?.success).toBeTrue();

harness.expectFile('dist/browser/resource/spectrum.png').toExist();
harness.expectFile('dist/browser/resource/abc.svg').toExist();
});

it(`should emit server bundles in 'server' directory`, async () => {
const { result } = await harness.executeOnce();
expect(result?.success).toBeTrue();

harness.expectFile('dist/server/server.mjs').toExist();
});
});

describe(`'media' is set to ''`, () => {
beforeEach(() => {
harness.useTarget('build', {
...BASE_OPTIONS,
polyfills: [],
styles: ['src/styles.css'],
server: 'src/main.server.ts',
outputPath: {
base: 'dist',
media: '',
},
ssr: {
entry: 'src/server.ts',
},
});
});

it(`should emit browser bundles in 'browser' directory`, async () => {
const { result } = await harness.executeOnce();
expect(result?.success).toBeTrue();

harness.expectFile('dist/browser/main.js').toExist();
});

it(`should emit media files in 'browser' directory`, async () => {
const { result } = await harness.executeOnce();
expect(result?.success).toBeTrue();

harness.expectFile('dist/browser/spectrum.png').toExist();
harness.expectFile('dist/browser/abc.svg').toExist();

// Component CSS should not be considered media
harness.expectFile('dist/browser/app.component.css').toNotExist();
});

it(`should emit server bundles in 'server' directory`, async () => {
Expand Down Expand Up @@ -135,6 +182,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
expect(result?.success).toBeTrue();

harness.expectFile('dist/browser/media/spectrum.png').toExist();
harness.expectFile('dist/browser/media/abc.svg').toExist();
});

it(`should emit server bundles in 'node-server' directory`, async () => {
Expand Down Expand Up @@ -174,6 +222,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
expect(result?.success).toBeTrue();

harness.expectFile('dist/public/media/spectrum.png').toExist();
harness.expectFile('dist/public/media/abc.svg').toExist();
});

it(`should emit server bundles in 'server' directory`, async () => {
Expand Down Expand Up @@ -220,6 +269,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
expect(result?.success).toBeTrue();

harness.expectFile('dist/media/spectrum.png').toExist();
harness.expectFile('dist/media/abc.svg').toExist();
});

it(`should error when ssr is enabled`, async () => {
Expand Down Expand Up @@ -273,6 +323,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
expect(result?.success).toBeTrue();

harness.expectFile('dist/browser/media/spectrum.png').toExist();
harness.expectFile('dist/browser/media/abc.svg').toExist();
});

it(`should emit server bundles in '' directory`, async () => {
Expand Down
5 changes: 2 additions & 3 deletions packages/angular_devkit/build_angular/src/tools/esbuild/bundler-context.ts
View file
Expand Up @@ -352,11 +352,10 @@ export class BundlerContext {

assert(this.#esbuildOptions, 'esbuild options cannot be undefined.');

const { assetNames = '' } = this.#esbuildOptions;
const mediaDirname = dirname(assetNames);
const outputFiles = result.outputFiles.map((file) => {
let fileType: BuildOutputFileType;
if (dirname(file.path) === mediaDirname) {
// All files that are not JS, CSS, WASM, or sourcemaps for them are considered media
if (!/\.([cm]?js|css|wasm)(\.map)?$/i.test(file.path)) {
fileType = BuildOutputFileType.Media;
} else {
fileType = this.#platformIsServer
Expand Down

0 comments on commit 259ec72

Please sign in to comment.