Angular component with svg template doesn't work with Storybook

Current Behavior

I have an Angular component which have a svg as template. To make it work with Storybook, I have to add webpack configs with the svg-inline-loader loader.

Expected Behavior

i want Storybook to work with Angular components which have svg templates.

Steps to Reproduce

I provided a minimal repo: https://github.com/Jad31/storybook-inline-svg-angular-issue.git

• yarn to install the dependencies
• yarn run nx run svg-layout:storybook

Failure Logs

ModuleParseError: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg [attr.viewBox]="viewbox.minx + ' ' + viewbox.miny + ' ' + viewbox.width + ' ' + viewbox.height">
|     <svg:g
|         workspace-svg-part

Environment

> yarn run nx report
yarn run v1.22.11

 >  NX   Report complete - copy this into the issue template

   Node : 14.19.0
   OS   : linux x64
   yarn : 1.22.11
   
   nx : 13.8.3
   @nrwl/angular : 13.8.3
   @nrwl/cli : 13.8.3
   @nrwl/cypress : 13.8.3
   @nrwl/detox : undefined
   @nrwl/devkit : 13.8.3
   @nrwl/eslint-plugin-nx : 13.8.3
   @nrwl/express : undefined
   @nrwl/jest : 13.8.3
   @nrwl/js : undefined
   @nrwl/linter : 13.8.3
   @nrwl/nest : undefined
   @nrwl/next : undefined
   @nrwl/node : undefined
   @nrwl/nx-cloud : undefined
   @nrwl/react : undefined
   @nrwl/react-native : undefined
   @nrwl/schematics : undefined
   @nrwl/storybook : 13.8.3
   @nrwl/tao : 13.8.3
   @nrwl/web : undefined
   @nrwl/workspace : 13.8.3
   typescript : 4.5.5
   rxjs : 7.4.0
   ---------------------------------------
   Community plugins:
         @angular/animations: 13.2.4
         @angular/common: 13.2.4
         @angular/compiler: 13.2.4
         @angular/core: 13.2.4
         @angular/forms: 13.2.4
         @angular/platform-browser: 13.2.4
         @angular/platform-browser-dynamic: 13.2.4
         @angular/router: 13.2.4
         @angular-devkit/build-angular: 13.2.5
         @angular/cli: 13.2.5
         @angular/compiler-cli: 13.2.4
         @angular/language-service: 13.2.4
         @storybook/angular: 6.4.19

Done in 0.59s.

[Jad31]

Hey @Coly010, the repo was set to private, sorry for that. It is now public.

[Jad31]

Hi there @Jad31 ! Thanks for filing an issue. I will take a look at the repository you provided, and thank you for that. In the meantime, can you help me understand the following: if you add, as you said. webpack configs with the svg-inline-loader loader, is the issue resolved?

Sorry for the bad explanation, i added webpack configs with the svg-inline-loader but it doesn’t resolve the issue, here is the problem.