Use asset modules and resourceQuery
#22252
Conversation
alan-agius4
added
the
target: minor
|
|
||
| it('works when using the same css file in `styles` and `stylesUrl`', async () => { | ||
| host.writeMultipleFiles({ | ||
| 'src/styles.css': ` |
There was a problem hiding this comment.
This is used as a global style by default right? Is there some way we can explicitly list this as a global file as part of this test? As is, we're implicitly depending on this default which could change and invalidate the intent of the test but probably leave it still passing.
There was a problem hiding this comment.
Yes, that is correct. Added to explicitly set the styles value to src/styles.css
| @@ -11,7 +11,7 @@ import { BASE_OPTIONS, BROWSER_BUILDER_INFO, describeBuilder } from '../setup'; | |||
|
|
|||
| const MAIN_OUTPUT = 'dist/main.js'; | |||
| const NAMED_LAZY_OUTPUT = 'dist/src_lazy-module_ts.js'; | |||
| const UNNAMED_LAZY_OUTPUT = 'dist/8.js'; | |||
| const UNNAMED_LAZY_OUTPUT = 'dist/459.js'; | |||
There was a problem hiding this comment.
Just out of my own curiosity, where does this come from and why does it need to change? Is this some kind of hash of a lazy loaded module which happened to change slightly from this commit?
There was a problem hiding this comment.
The ID generation is internal to Webpack, I think it changed due to the changes in resource paths due to the additional of the query parameter.
There was a problem hiding this comment.
Gotcha, thanks for the clarification.
packages/angular_devkit/build_angular/src/webpack/configs/common.ts
Outdated
Show resolved
Hide resolved
packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
Outdated
Show resolved
Hide resolved
We remove the custom direct resource loader which is used for JIT when `directTemplateLoading` is enabled. Instead, use Webpack's [asset modules](https://webpack.js.org/guides/asset-modules/) which were introduced in version 5. To the resource URL, we also add a query parameter, `ngResource`. This is used to be filter request based on a query. See https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax for more information.
…al styles using file query instead of filename Previously, we introduced the `ngResource` query to Angular component resources we now use it with `resourceQuery` to differentiate between global and components styles, since in some cases while unlikely a file can be used as a component and global style. Closes #7245
| @@ -11,7 +11,7 @@ import { BASE_OPTIONS, BROWSER_BUILDER_INFO, describeBuilder } from '../setup'; | |||
|
|
|||
| const MAIN_OUTPUT = 'dist/main.js'; | |||
| const NAMED_LAZY_OUTPUT = 'dist/src_lazy-module_ts.js'; | |||
| const UNNAMED_LAZY_OUTPUT = 'dist/8.js'; | |||
| const UNNAMED_LAZY_OUTPUT = 'dist/459.js'; | |||
There was a problem hiding this comment.
Gotcha, thanks for the clarification.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
refactor(@ngtools/webpack): remove direct angular resource loader
We remove the custom direct resource loader which is used for JIT when
directTemplateLoadingis enabled. Instead, use Webpack's asset modules which were introduced in version 5.To the resource URL, we also add a query parameter,
ngResource. This is used to be filter request based on a query. See https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax for more information.fix(@angular-devkit/build-angular): differentiate components and global styles using file query instead of filename.
Previously, we introduced the
ngResourcequery to Angular component resources we now use it withresourceQueryto differentiate between global and components styles, since in some cases while unlikely a file can be used as a component and global style.Closes #7245