Angular import attributes with Webpack do not work

Discussão em 'Angular' iniciado por norekhov, Janeiro 20, 2025.

  1. norekhov

    norekhov Guest

    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',
    }
    ]
    },

    Continue reading...

Compartilhe esta Página