Question

由于错误，无法为使用routerLink的模块配置故事

ERROR NullInjectorError: StaticInjectorError(DynamicModule)[RouterLinkActive -> Router]

再现重现行为的步骤： underscore-java 运行应用程序，您可以测试没有可能的解决方案来添加RouterModule以处理故事。无法使用RouterTestingModule，RouterModule，RouterModule.forRoot和iframe.html路径来配置它。关于缺少提供者总是有同样的错误。

预期行为使用routerLink运行应用程序和故事

其他上下文最新版本的故事书5.3.3和角逐~8.2.14 我使用的是其他配置5.2.8，但不会出现此问题。

如何配置此模块，故事书中是否存在问题？

demo-app

Answer 1

Storybook的工作原理不同于棱角书，因此我无需将FeatureModule插入故事中，Component很好。当仅将NavbarComponent注入RouterTestingModule

时

故事配置看起来像这样

storiesOf('Navbar', module)
  .addDecorator(
    moduleMetadata({
      imports: [BrowserAnimationsModule, RouterTestingModule],
      declarations: [NavbarComponent],
    }),
  )

您不需要路由配置xD

Answer 2

我进行了以下更改：

添加包含路由数组（用于定义您的路由）的RouterModule
提供所需的APP_BASE_HREF。

navbar.module.ts

const routes: Routes = [];


@NgModule({
  declarations: [NavbarComponent],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  providers: [{provide: APP_BASE_HREF, useValue: '/'}],
  exports: [NavbarComponent]
})
export class NavbarModule {
}

之后，您只需要将<router-outlet></router-outlet>添加到您的NavbarComponent

如何使用RouterLink为模块配置故事书故事

2 个答案: