Skip to content

Webpack assets modules support #22351

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
And2s opened this issue Dec 10, 2021 · 5 comments
Closed

Webpack assets modules support #22351

And2s opened this issue Dec 10, 2021 · 5 comments

Comments

@And2s
Copy link

And2s commented Dec 10, 2021

Which @angular/* package(s) are relevant/releated to the feature request?

No response

Description

Until v13.1.0 was possible to use this implementation to import images:
new URL('./image.png', import.meta.url).pathname
provided by webpack documentation https://webpack.js.org/guides/asset-modules/

Since Angular v13.1.0 this approach does not work.

Proposed solution

Implement support for Webpack asset modules support.
https://webpack.js.org/guides/asset-modules/

Sometimes it is much more convenient to write such imports and provide urls for reusable components e.g. <app-landing-block [image]="url">. Without imports in .ts files, the images must be always predefined directly in component and imported through .scss / .less file. And such an approach sometimes becomes too difficult depending on situation.

Alternatives considered

Currently it is only possible to import image through .scss / .less file or directly into assets folder.

@JoostK JoostK transferred this issue from angular/angular Dec 10, 2021
@alan-agius4
Copy link
Collaborator

Hi @And2s,

Thanks for opening this request. However, Webpack specific features are not supported by the Angular CLI. The fact that Webpack is used is an implementation detail that change can in the future.

The supported way to references assets in templates and TypeScript files is by using the the assets option and reference the emitted file URL in the template/TS file.

@And2s
Copy link
Author

And2s commented Dec 14, 2021

Hi @alan-agius4, thanks for the info. Will there be a support for something like webpack asset modules in the future? Personally I did not have many implementations but in some cases it is a very useful feature which helps to maintain clear structure.

@alan-agius4
Copy link
Collaborator

alan-agius4 commented Dec 16, 2021

I noticed that when web-workers are enabled we allowing parsing new URL syntax which has the side-effect that Webpack will treat all assets as asset modules (https://webpack.js.org/guides/asset-modules/#url-assets).

This is an inconsistency that we should tackle. We should either allow parsing new URL as assets or not.

Side note: Webpack will always replace import.meta.url to a static string with file:// which makes using this at runtime a non viable. see: webpack/webpack#14809.

@alan-agius4
Copy link
Collaborator

Hi @And2s,

We have discussed this during yesterday team meeting.

We feel that we shouldn't enable assets modules as this is strictly a Webpack feature which will not work if in the future we move away to a different bundler.

We do agree that there is an inconsistency that we finger print assets in CSS but not in HTML templates. Let's continue tracking this in #22510

@alan-agius4 alan-agius4 mentioned this issue Jan 14, 2022
15 tasks
@alan-agius4 alan-agius4 removed the needs: discussion On the agenda for team meeting to determine next steps label Jan 27, 2022
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants