storybook icon indicating copy to clipboard operation
storybook copied to clipboard

[Bug]: templateUrl does not work in Storybook 6.5.15 and Angular 13.3

Open umutesen opened this issue 2 years ago • 0 comments

Describe the bug

The templateUrl option is ignored on a story.

We've migrated to Angular 13 and storybook 6.5.15 and we now observed this option is no longer working.

Most stories defined in our setup have large amounts of html that are in external files.

Inline html using template option works but this is not practical due to the large volume of html markup.

To Reproduce

Download project or reproduce from scratch:

1. Create a new Angular 13 application and add storybook `npx storybook init`
3. Update `angular.json` as instructed by documentation - https://storybook.js.org/docs/angular/get-started/install
4. Modify `Button.stories.ts` to use an external html template with `templateUrl`:


// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
const Template: Story<Button> = (args: Button) => ({
  templateUrl: 'test.html',
  props: args,
});

Start the project `npm run storybook` and the html template is being ignored.

System

Environment Info:

  System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz   
  Binaries:
    Node: 14.21.2 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.17 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.76)
  npmPackages:
    @storybook/addon-actions: ^6.5.15 => 6.5.15
    @storybook/addon-essentials: ^6.5.15 => 6.5.15
    @storybook/addon-interactions: ^6.5.15 => 6.5.15
    @storybook/addon-links: ^6.5.15 => 6.5.15
    @storybook/angular: ^6.5.15 => 6.5.15
    @storybook/builder-webpack5: ^6.5.15 => 6.5.15
    @storybook/manager-webpack5: ^6.5.15 => 6.5.15
    @storybook/testing-library: 0.0.13 => 0.0.13

Additional context

templateUrl option worked fine on our project with Angular 12 with 6.5.0-alpha.47.

We understand the default behaviour for Angular projects is to use ngx-template-loader, which appears to have stopped working in Angular 13.

https://github.com/storybookjs/storybook/blob/v6.5.4/app/angular/src/server/ngx-template-loader/index.ts

umutesen avatar Jan 19 '23 10:01 umutesen