new URL('...', import.meta.url) pattern isn't processed properly by Angular CLI

[log2-hwan]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 13.0.4

Description

const svgFileUrl = new URL('./test.svg', import.meta.url);

Angular CLI used to transform this code pattern with a url pointing build destination directory so it works properly after build. But after updating to 13.1, it only transforms import.meta.url part to file: protocol url.

I'm not sure this is considered as implementation detail from webpack, but syntaxes used in the code is all from web standard and it is working properly without transformation(Angular CLI build process), so I think it should be supported by Angular CLI.

🔬 Minimal Reproduction

https://github.com/log2-hwan/angular-cli-svg-url-bug

🔥 Exception or Error

Wrong url in output js bundle

🌍 Your Environment

Angular CLI: 13.1.2
Node: 16.13.1
Package Manager: yarn 1.22.15
OS: darwin arm64

Angular: 13.1.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2
@angular-devkit/schematics      13.1.2
@angular/cli                    13.1.2
@schematics/angular             13.1.2
rxjs                            7.4.0
typescript                      4.5.4

[log2-hwan]

Seems this commit moved configs disabling url/worker parsing from server config to common config which causes the issue.

[alan-agius4]

Previously, new URL caused Webpack's assets modules to be enabled by default. This is a Webpack specific feature which is not supported. See #22351 for more context.

import.meta.url is indeed a web standard, however 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.

Closing as a duplicate of #22351

[angular-automatic-lock-bot]

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.}