Skip to content

Commit

Permalink
fix(@angular-devkit/build-angular): display actionable error when a s…
Browse files Browse the repository at this point in the history
…tyle does not exist in Karma builder

Prior to this change the the error was not displayed correctly due to compilation being undefined.

Closes #24416

(cherry picked from commit 8fd0849)
  • Loading branch information
alan-agius4 authored and clydin committed Dec 12, 2022
1 parent 507f756 commit ccc8e03
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 27 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
'src/styles.css': 'p {display: none}',
'src/app/app.component.ts': `
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: '<p>Hello World</p>'
Expand All @@ -27,7 +27,7 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
'src/app/app.component.spec.ts': `
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
Expand All @@ -38,7 +38,7 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
]
}).compileComponents();
});
it('should not contain text that is hidden via css', () => {
const fixture = TestBed.createComponent(AppComponent);
expect(fixture.nativeElement.innerText).not.toContain('Hello World');
Expand Down Expand Up @@ -129,5 +129,22 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
const { result } = await harness.executeOnce();
expect(result?.success).toBeTrue();
});

it('fails and shows an error if style does not exist', async () => {
harness.useTarget('test', {
...BASE_OPTIONS,
styles: ['src/test-style-a.css'],
});

const { result, logs } = await harness.executeOnce({ outputLogsOnFailure: false });

expect(result?.success).toBeFalse();
expect(logs).toContain(
jasmine.objectContaining({
level: 'error',
message: jasmine.stringMatching(`Can't resolve 'src/test-style-a.css'`),
}),
);
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
*/

import assert from 'assert';
import { pluginName } from 'mini-css-extract-plugin';
import type { Compilation, Compiler } from 'webpack';
import { assertIsError } from '../../utils/error';
import { addError } from '../../utils/webpack-diagnostics';
Expand All @@ -30,10 +29,6 @@ export class StylesWebpackPlugin {

apply(compiler: Compiler): void {
const { entryPoints, preserveSymlinks, root } = this.options;
const webpackOptions = compiler.options;
const entry =
typeof webpackOptions.entry === 'function' ? webpackOptions.entry() : webpackOptions.entry;

const resolver = compiler.resolverFactory.get('global-styles', {
conditionNames: ['sass', 'less', 'style'],
mainFields: ['sass', 'less', 'style', 'main', '...'],
Expand All @@ -45,32 +40,38 @@ export class StylesWebpackPlugin {
fileSystem: compiler.inputFileSystem,
});

webpackOptions.entry = async () => {
const entrypoints = await entry;
const webpackOptions = compiler.options;
compiler.hooks.environment.tap(PLUGIN_NAME, () => {
const entry =
typeof webpackOptions.entry === 'function' ? webpackOptions.entry() : webpackOptions.entry;

for (const [bundleName, paths] of Object.entries(entryPoints)) {
entrypoints[bundleName] ??= {};
const entryImport = (entrypoints[bundleName].import ??= []);
webpackOptions.entry = async () => {
const entrypoints = await entry;

for (const path of paths) {
try {
const resolvedPath = resolver.resolveSync({}, root, path);
if (resolvedPath) {
entryImport.push(`${resolvedPath}?ngGlobalStyle`);
} else {
for (const [bundleName, paths] of Object.entries(entryPoints)) {
entrypoints[bundleName] ??= {};
const entryImport = (entrypoints[bundleName].import ??= []);

for (const path of paths) {
try {
const resolvedPath = resolver.resolveSync({}, root, path);
if (resolvedPath) {
entryImport.push(`${resolvedPath}?ngGlobalStyle`);
} else {
assert(this.compilation, 'Compilation cannot be undefined.');
addError(this.compilation, `Cannot resolve '${path}'.`);
}
} catch (error) {
assert(this.compilation, 'Compilation cannot be undefined.');
addError(this.compilation, `Cannot resolve '${path}'.`);
assertIsError(error);
addError(this.compilation, error.message);
}
} catch (error) {
assert(this.compilation, 'Compilation cannot be undefined.');
assertIsError(error);
addError(this.compilation, error.message);
}
}
}

return entrypoints;
};
return entrypoints;
};
});

compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
this.compilation = compilation;
Expand Down

0 comments on commit ccc8e03

Please sign in to comment.