Ask questionsIssue with angular Router
I'm receiving an error I haven't been able to find my way around. I'm on Storybook 5.0.10 using angular.
Here is the error:
Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. (" <a *ngIf="tabType === 'link'" [ERROR ->][routerLink]="" [fragment]="tab.id" (click)="!!select(tab.id)" class="util-tabset__li"): ng:///DynamicModule/UtilTabsetComponent.html@20:8 Can't bind to 'fragment' since it isn't a known property of 'a'. (" <a *ngIf="tabType === 'link'" [routerLink]="" [ERROR ->][fragment]="tab.id" (click)="!!select(tab.id)" class="util-tabset__link" "): ng:///DynamicModule/UtilTabsetComponent.html@20:24
Error: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
<a *ngIf="tabType === 'link'"
[ERROR ->][routerLink]="" [fragment]="tab.id"
(click)="!!select(tab.id)"
class="util-tabset__li"): ng:///DynamicModule/UtilTabsetComponent.html@20:8
Can't bind to 'fragment' since it isn't a known property of 'a'. ("
<a *ngIf="tabType === 'link'"
[routerLink]="" [ERROR ->][fragment]="tab.id"
(click)="!!select(tab.id)"
class="util-tabset__link"
"): ng:///DynamicModule/UtilTabsetComponent.html@20:24
at syntaxError (http://localhost:6006/vendors~main.0afdbd165a15faa9fe9e.bundle.js:11068:17)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (http://localhost:6006/vendors~main.0afdbd165a15faa9fe9e.bundle.js:29243:19)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (http://localhost:6006/vendors~main.0afdbd165a15faa9fe9e.bundle.js:34809:37)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (http://localhost:6006/vendors~main.0afdbd165a15faa9fe9e.bundle.js:34796:23)
at http://localhost:6006/vendors~main.0afdbd165a15faa9fe9e.bundle.js:34739:62
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (http://localhost:6006/vendors~main.0afdbd165a15faa9fe9e.bundle.js:34739:19)
at http://localhost:6006/vendors~main.0afdbd165a15faa9fe9e.bundle.js:34649:19
at Object.then (http://localhost:6006/vendors~main.0afdbd165a15faa9fe9e.bundle.js:11059:77)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (http://localhost:6006/vendors~main.0afdbd165a15faa9fe9e.bundle.js:34648:26)
and here is my story:
import { storiesOf, moduleMetadata } from '@storybook/angular';
import { UtilTabDirective } from './util-tab.directive';
import { UtilTabsetComponent } from './util-tabset.component';
// Initiate story
storiesOf('Utility/Tabs/Tab Set', module)
.addDecorator(
moduleMetadata({
declarations: [UtilTabsetComponent, UtilTabDirective],
}),
)
.add('Tab Set', () => ({
component: UtilTabsetComponent,
props: {
},
}))
Answer
questions
lppedd
There is no need to mock the RouterLinkWithHref
Directive.
Just remember to provide a value for the APP_BASE_HREF
token.
Example:
moduleMetadata({
declarations: [EntityTypeComponent],
imports: [NgZorroAntdModule, HttpClientModule, RouterModule.forRoot([])],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
})
Use forRoot
even if in the original Module you've used forChild
.
Or, just discovered, use RouterTestingModule
.
Example:
moduleMetadata({
declarations: [EntityTypeComponent],
imports: [NgZorroAntdModule, HttpClientModule, RouterTestingModule],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
})