I can use import attributes when using Agnular @angular-builders/custom-esbuild:application
builder like this:
import userImage from 'img/icons/user.svg' with { loader: 'file' };
This perfectly works and I see there's a plugin from Angular team specifically for this situation.
But when I try to do the same with @angular-builders/custom-webpack:browser
I got an error:
./src/app/assets.ts:7:48 - Error: Module parse failed: Unexpected token (7:48)
File was processed with these loaders:
* ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js
* ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
| // These images are used inside img tags, so they're loaded with file-loader
| // instead of svg-inline-loader
> import userImage from 'img/icons/user.svg' with loader: 'file';
I don't see why it can't work as webpack support import attributes. My Webpack config for reference:
{
test: /\.svg$/,
oneOf: [
{
// SVG images as files
with: { loader: 'file' },
type: 'asset/resource',
},
{
// SVG images inlined
type: 'asset/source',
}
]
},