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.