Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(@angular-devkit/build-angular): use component style load result c…
…aching information for file watching When using the esbuild-based builders (`application`/`browser-esbuild`) in watch mode including `ng serve`, component stylesheets that used Sass and imported other stylesheets were previously no properly tracked. As a result, changes to the imported stylesheets would not invalidate the component and the rebuild would not contain the updated styles. The files used by the Sass (and Less) stylesheet processing are now correctly tracked in these cases. (cherry picked from commit 7229a3d)
- Loading branch information
Showing
5 changed files
with
185 additions
and
40 deletions.
There are no files selected for viewing
77 changes: 77 additions & 0 deletions
77
...it/build_angular/src/builders/application/tests/behavior/rebuild-component_styles_spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
/** | ||
* @license | ||
* Copyright Google LLC All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://angular.io/license | ||
*/ | ||
|
||
import { concatMap, count, timeout } from 'rxjs'; | ||
import { buildApplication } from '../../index'; | ||
import { APPLICATION_BUILDER_INFO, BASE_OPTIONS, describeBuilder } from '../setup'; | ||
|
||
/** | ||
* Maximum time in milliseconds for single build/rebuild | ||
* This accounts for CI variability. | ||
*/ | ||
export const BUILD_TIMEOUT = 30_000; | ||
|
||
describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => { | ||
describe('Behavior: "Rebuilds when component stylesheets change"', () => { | ||
it('updates component when imported sass changes', async () => { | ||
harness.useTarget('build', { | ||
...BASE_OPTIONS, | ||
watch: true, | ||
}); | ||
|
||
await harness.modifyFile('src/app/app.component.ts', (content) => | ||
content.replace('app.component.css', 'app.component.scss'), | ||
); | ||
await harness.writeFile('src/app/app.component.scss', "@import './a';"); | ||
await harness.writeFile('src/app/a.scss', '$primary: aqua;\\nh1 { color: $primary; }'); | ||
|
||
const builderAbort = new AbortController(); | ||
const buildCount = await harness | ||
.execute({ signal: builderAbort.signal }) | ||
.pipe( | ||
timeout(30000), | ||
concatMap(async ({ result }, index) => { | ||
expect(result?.success).toBe(true); | ||
|
||
switch (index) { | ||
case 0: | ||
harness.expectFile('dist/browser/main.js').content.toContain('color: aqua'); | ||
harness.expectFile('dist/browser/main.js').content.not.toContain('color: blue'); | ||
|
||
await harness.writeFile( | ||
'src/app/a.scss', | ||
'$primary: blue;\\nh1 { color: $primary; }', | ||
); | ||
break; | ||
case 1: | ||
harness.expectFile('dist/browser/main.js').content.not.toContain('color: aqua'); | ||
harness.expectFile('dist/browser/main.js').content.toContain('color: blue'); | ||
|
||
await harness.writeFile( | ||
'src/app/a.scss', | ||
'$primary: green;\\nh1 { color: $primary; }', | ||
); | ||
break; | ||
case 2: | ||
harness.expectFile('dist/browser/main.js').content.not.toContain('color: aqua'); | ||
harness.expectFile('dist/browser/main.js').content.not.toContain('color: blue'); | ||
harness.expectFile('dist/browser/main.js').content.toContain('color: green'); | ||
|
||
// Test complete - abort watch mode | ||
builderAbort.abort(); | ||
break; | ||
} | ||
}), | ||
count(), | ||
) | ||
.toPromise(); | ||
|
||
expect(buildCount).toBe(3); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters