RouterLink in storybook?

Question

I'm trying to add my component to Storybook and its throwing an error related to RouterLink and it not been part of Ionic components.

 Error: Template parse errors:
 Can't bind to 'routerLink' since it isn't a known property of 'ion-card'.
 1. If 'ion-card' is an Angular component and it has 'routerLink' input, 
 then verify that it is part of this module.
 2. If 'ion-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to 
 the '@NgModule.schemas' of this component to suppress this message.
 3. To allow any property add 'NO_ERRORS_SCHEMA' to the 
 '@NgModule.schemas' of this component. ("<ion-app>

I am able to import any elements which don't use routerLink however any that do throw this error unless i remove it. How do i add it to Storybook as it shouldn't be that hard I'd have had thought?

My code within Storybook is the following:

 .add('Whole feed', () => (
    {
      template:
        `
        <ion-card class="ion-no-margin feedCard" [routerLink]="['./', feedItem.id]">
        <!-- loop though all recipies in recipies.page.ts module.-->
        <ion-img class="feedCard__img" [src]="feedItem.imageUrl"></ion-img><!-- [isPropertybinding] in this context-->
        <div class="feedCard__img--circles">
          <ion-icon name="radio-button-off"></ion-icon>
          <ion-icon name="radio-button-off"></ion-icon>
          <ion-icon name="radio-button-off"></ion-icon>
        </div>
      </ion-card>
      <div class="feedCard__label">
        <ion-label> {{ feedItem.title }} </ion-label>
        <!-- string interprelation -->
        <ion-label><strong> {{ feedItem.distance }}km </strong></ion-label> <!-- string interprelation -->
      </div>
      `,
              props: {
           },
         }))

Other elements are working and Ionic supports fine as as long as i remove any of the bits it doesn't like it works.

How can i include RouterLink into Storybook or tell it to ignore the problem? I dont need the links to work, just to be able to display the component.

My app.modules.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Can you show us your `app.module.ts` ? – asimhashmi Jun 18 '19 at 20:26 — asimhashmi, Jun 18 '19 at 20:26

score -1 · Answer 1 · answered Jun 20 '19 at 07:43

In order to use routerLink, you need to add RouterModule to every @NgModule() which uses your component in which routerLink is used.

Assuming that your component is only used in AppModule,You need to add RouterModule to the imports of your AppModule

You code will be like this:

import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy, RouterModule } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, RouterModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

That didn't solve it. When i restored [routerLink] it started throwing the same error as before. I had solved it temporarily by removing it entirely though its not a good long term solution. — David Hirst, Jun 20 '19 at 09:45

RouterLink in storybook?

1 Answers1