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

[umutesen]

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

[shilman]

@valentinpalkovic This looks like an old option that used to be supported and is now dropped. I don't know whether we need to bring it back. Unrelated to 7.0 but I wanted to get it on our radar in case we need to discuss.

[valentinpalkovic]

@umutesen

I hope you're doing well! First of all, thank you for using Storybook and creating this GitHub Issue. We truly appreciate your involvement in our community.

We wanted to inform you that we have recently released Storybook 7, which comes with numerous improvements, new features, and bug fixes. As a result, our team has shifted its focus to support and enhance Storybook 7 going forward. Therefore, we will no longer add new features or address bug fixes in Storybook 6.5.x. Only security bug fixes are patched back to 6.5.x.

We understand that this decision may cause some inconvenience, and we apologize for that. We highly recommend that you consider upgrading to Storybook 7 to take advantage of the latest features, improvements, and fixes. Our documentation provides a comprehensive guide on how to make this transition as smooth as possible.

Please note that we will be closing the related issues on our GitHub repository concerning Storybook 6.5.x. We encourage you to open new issues for any problems or feature requests related to Storybook 7 and Angular 14/15/16. Our team remains committed to providing the best possible experience for our users, and your feedback is invaluable to us.

Thank you for your understanding, and we look forward to seeing the fantastic things you'll create with Storybook 7!