I'm using Angular 11.0.5 and Storybook 6.1.14 and the following component:
import { Component, HostBinding, Input } from '@angular/core';
@Component({
selector: 'ui-navigation-item',
template: `
<a [ngClass]="{ 'no-decorations': !decorations }" [routerLink]="link">
instead of ng-content
</a>
`,
styleUrls: ['./navigation-item.component.scss'],
})
export class NavigationItemComponent {
@Input()
link!: (string | null)[] | null;
@Input()
decorations:boolean = true;
@HostBinding('class')
@Input()
variant: 'regular' | 'reduced' = 'regular';
}
Now when I try to add it to Storybook:
import { RouterModule } from '@angular/router';
import { Meta } from '@storybook/angular';
import { NavigationItemComponent } from './navigation-item.component';
export default {
title: 'Navigation Item',
component: NavigationItemComponent,
moduleMetadata: {
imports: [RouterModule],
},
} as Meta;
export const Primay = () => ({
component: NavigationItemComponent,
props: {
link: ['/'],
},
});
I'll get this error:
Unhandled Promise rejection: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
<a [ngClass]="{ 'no-decorations': !decorations }" [ERROR ->][routerLink]="link">
instead of ng-content
</a>
"): ng:///DynamicModule/NavigationItemComponent.html@1:52 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
<a [ngClass]="{ 'no-decorations': !decorations }" [ERROR ->][routerLink]="link">
instead of ng-content
</a>
"): ng:///DynamicModule/NavigationItemComponent.html@1:52
at syntaxError (compiler.js:2444)
at TemplateParser.parse (compiler.js:12679)
at JitCompiler._parseTemplate (compiler.js:28429)
at JitCompiler._compileTemplate (compiler.js:28417)
at compiler.js:28361
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:28361)
at compiler.js:28274
at Object.then (compiler.js:2434)
at JitCompiler._compileModuleAndComponents (compiler.js:28273) Error: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
<a [ngClass]="{ 'no-decorations': !decorations }" [ERROR ->][routerLink]="link">
instead of ng-content
</a>
"): ng:///DynamicModule/NavigationItemComponent.html@1:52
at syntaxError (http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:8109:19)
at TemplateParser.parse (http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:18344:19)
at JitCompiler._parseTemplate (http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:34094:37)
at JitCompiler._compileTemplate (http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:34082:69)
at http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:34026:46
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:34026:19)
at http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:33939:18
at Object.then (http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:8099:52)
at JitCompiler._compileModuleAndComponents (http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:33938:26)
How can I use [routerLink] within Storybook?
PS: Stackoverflow tells me to add some more details, but I don't know what else I should write. I searched and stumbled upon some issues, but they all don't solve the problem. I'm pretty sure I miss a small thing, but I couldn't figure out yet.
Specify the module imports within the decorators of the meta data:
import { Meta, moduleMetadata } from '@storybook/angular';
export default {
title: 'Navigation Item',
component: NavigationItemComponent,
decorators: [
moduleMetadata({
declarations: [NavigationItemComponent],
imports: [RouterTestingModule],
}),
],
} as Meta;