Angular SVG as templates do not load in client

[chris-elta]

Describe the bug Angular allows the use of *.svg files for component templates, however they do not load in storybook.

To Reproduce

1. Add an SVG file to an angular component i.e., home-icon.svg
2. Set the SVG url as the templateUrl for the angular component i.e., templateUrl: './home-icon.svg'

@Component({
    selector: 'home-icon',
    templateUrl: '../svg/home-icon.svg',
})

System Displays static/media/**/src/icons/svg/home-icon..svg instead of the icon presentation

Version v6.3.9

[DmitryShashkov]

Issue still present as of now with Storybook v6.5.16

[shilman]

Please try upgrading to the latest prerelease. Is it still a problem?

Migration guide: https://storybook.js.org/migration-guides/7.0

[lacolaco]

@shilman Yes, it is. sb 7.0.22 + Angular v16.1.

[twardzikfilip]

I can confirm, it's present on latest Storybook + Angular v14.15.

[atomicrobokid]

@shilman - Hey, any update on this? Experiencing this issue now and will stop us rolling out a major design system update as we cannot document any icons or components that use them. This is on 7.1.1

[lukket]

It may be too obvious, but as a workaround you can just change the file ending from .svg to .html.

As every SVG is also a valid Angular template, the file ending doesn't seem to make any real difference. Storybook seems to treat all *.svg files as asset. If you follow the path that Stroybook displays under static/media/... you'll see that the file exists.

[JonET]

That workaround doesn't really help me as the SVG assets are coming from an external npm repository. I'd really need to have this fixed in storybook if I want the documentation to not be busted.

[metalhaze]

BUMP

Experiencing this same issue. Any ETA on when this might be fixed?

[valentinpalkovic]

Hi there,

It seems like the issue is related to the configuration of asset resources in Storybook's default webpack configuration. The current configuration includes SVG files being processed as asset resources.

As a workaround, you must modify the asset resource rule by adding a webpackFinal section in your .storybook/main.ts file. Here's the updated code:

// .storybook/main.ts
const config = {
  framework: {
    name: "@storybook/angular",
    options: {},
  },
  webpackFinal: async (config) => {
    config.module!.rules = config.module!.rules!.map((rule) => {
      if (rule && typeof rule === "object" && "type" in rule && rule.type === "asset/resource") {
        return {
          ...rule,
          test: new RegExp(
            rule.test!.toString().replace("svg|", "").slice(1, -1)
          ),
        };
      } else {
        return rule;
      }
    });

    return config;
  }
}

export default config;

I am curious about your feedback. Please let me know if this solution is sufficient enough as a workaround. If it works out, we could built-in a proper solution.

[metalhaze]

@valentinpalkovic This works for our needs!!! Thank you so much!

[seb-lean]

@valentinpalkovic where is the default webpack config viewable? I guess this is it? https://github.com/storybookjs/storybook/blob/1943ee6b88d89c963f15ef4087aeabe64d05c9a1/code/builders/builder-webpack5/src/preview/base-webpack.config.ts#L56