Storybook 6.2 and Angular 11 – Template Not Found Error

  angular, angular-storybook, storybook

I’m trying to set up my first component in Storybook. All the examples I can find put the entire HTML template in the @Component({template: '...'}) decorator and this works. However, when I use an Angular component that uses a relative path to the template in the @Component({templateUrl: './<template path>'}) I get the errors listed below.

My goal is to use templateUrl and not template since I have a few, at least, components that have significant HTML.

Errors

  • GET http://localhost:6006/refresh-button.component.html 404 (Not Found)
  • zone.js:1102 Unhandled Promise rejection: Failed to load
    refresh-button.component.html ; Zone: ; Task: Promise.then ; Value:
    Failed to load refresh-button.component.html undefined

refresh-button.component.ts

@Component({
    selector: 'app-refresh-button',
    styleUrls: ['./refresh-button.component.css'],
    templateUrl: './refresh-button.component.html'
})
export class RefreshButtonComponent implements OnInit {
    ...
}

refresh-button.component.html

<button class="btn btn-primary" (click)="refresh()">{{buttonText}}</button>

RefreshButton.stories.ts

import { moduleMetadata, Story, Meta } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import { RefreshButtonComponent } from './refresh-button.component';

export default {
    title: 'Components/RefreshButton',
    component: RefreshButtonComponent,
    decorators: [
        moduleMetadata({
            imports: [CommonModule],
        }),
    ]
} as Meta;

const Template: Story<RefreshButtonComponent> = (args: RefreshButtonComponent) => ({
    props: args
});

export const Primary = Template.bind({});
Primary.args = {
};

NOTE: When all the HTML is put into the Angular component the template works but then the "styleUrls" styles fail in the same way.

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.