storybook
storybook copied to clipboard
[Bug]: templateUrl does not work in Storybook 6.5.15 and Angular 13.3
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