Issue 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: {
        },
    }))

[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: '/' }]
})

[blemaire]

More an Angular issue that a SB issue but here it is:

You need to add RouterModule to the list of declarations:

moduleMetadata({
   declarations: [UtilTabsetComponent, UtilTabDirective, RouterModule],
}),