-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
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
Angular SVG as templates do not load in client #16438
Comments
Issue still present as of now with Storybook v6.5.16 |
Please try upgrading to the latest prerelease. Is it still a problem? Migration guide: https://storybook.js.org/migration-guides/7.0 |
@shilman Yes, it is. sb 7.0.22 + Angular v16.1. |
I can confirm, it's present on latest Storybook + Angular v14.15. |
@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 |
It may be too obvious, but as a workaround you can just change the file ending from 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 |
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. |
BUMP Experiencing this same issue. Any ETA on when this might be fixed? |
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 // .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. |
@valentinpalkovic This works for our needs!!! Thank you so much! |
Describe the bug
Angular allows the use of *.svg files for component templates, however they do not load in storybook.
To Reproduce
templateUrl: './home-icon.svg'
System
Displays
static/media/**/src/icons/svg/home-icon..svg
instead of the icon presentationVersion
v6.3.9
The text was updated successfully, but these errors were encountered: