Transloco in Storybook throws "No provider for InjectionToken TRANSLOCO_TRANSPILER"

huangapple go评论91阅读模式
英文:

Transloco in Storybook throws "No provider for InjectionToken TRANSLOCO_TRANSPILER"

问题

Transloco似乎不再与Storybook一起工作。我创建了一个新的干净仓库,其中包含最新版本的Angular、Transloco和Storybook,但我始终收到以下错误消息:

NG0302: 在 'SomeComponent' 组件中找不到管道 'transloco'。请验证它是否在此模块中声明或导入。了解更多信息,请访问 https://angular.io/errors/NG0302

而且,如果不使用管道(使用 <ng-container *transloco="let t"> ),它也不起作用,但不会报错。

故事:

  1. import type { Meta, StoryObj } from '@storybook/angular';
  2. import { SomeComponent } from '../app/some/some.component';
  3. import { applicationConfig } from '@storybook/angular';
  4. import { TranslocoRootModule } from '../app/transloco-root.module';
  5. import { importProvidersFrom } from '@angular/core';
  6. const meta: Meta<SomeComponent> = {
  7. component: SomeComponent,
  8. decorators: [
  9. applicationConfig({
  10. providers: [
  11. importProvidersFrom(TranslocoRootModule),
  12. ],
  13. }),
  14. ],
  15. };
  16. export default meta;
  17. type Story = StoryObj<SomeComponent>;
  18. export const Some: Story = {
  19. render: () => ({
  20. props: {
  21. label: 'SomeComponent',
  22. primary: true,
  23. },
  24. }),
  25. };

有人有什么想法吗?

最小复制存储库:https://github.com/MickL/transloco-issues

英文:

Transloco doesn't seem to work with Storybook anymore. I created a new clean repo with Angular, Transloco and Storybook on latest version and I always get the error:

> NG0302: The pipe 'transloco' could not be found in the 'SomeComponent' component. Verify that it is declared or imported in this module. Find more at https://angular.io/errors/NG0302

And without using the pipe (using <ng-container *transloco="let t">) it doesnt work as well but throws no error.

Story:

  1. import type {Meta, StoryObj} from &#39;@storybook/angular&#39;;
  2. import {SomeComponent} from &#39;../app/some/some.component&#39;;
  3. import {applicationConfig} from &#39;@storybook/angular&#39;;
  4. import {TranslocoRootModule} from &#39;../app/transloco-root.module&#39;;
  5. import {importProvidersFrom} from &#39;@angular/core&#39;;
  6. const meta: Meta&lt;SomeComponent&gt; = {
  7. component: SomeComponent,
  8. decorators: [
  9. applicationConfig({
  10. providers: [
  11. importProvidersFrom(TranslocoRootModule),
  12. ],
  13. }),
  14. ],
  15. };
  16. export default meta;
  17. type Story = StoryObj&lt;SomeComponent&gt;;
  18. export const Some: Story = {
  19. render: () =&gt; ({
  20. props: {
  21. label: &#39;SomeComponent&#39;,
  22. primary: true,
  23. },
  24. }),
  25. };

Does anyone has an idea?

Minimal reproduction repo: https://github.com/MickL/transloco-issues

答案1

得分: 0

Storybook现在使用独立组件,因此,与NgModules相比,必须以不同的方式注册应用程序范围的提供程序。可以在Github上找到详细的说明:https://github.com/storybookjs/storybook/issues/23130#issuecomment-1598282651

英文:

Storybook now uses standalone components and because of this, application-wide providers have to be registered differently in comparison to how they would be with NgModules. A detailed explanation can be found on Github: https://github.com/storybookjs/storybook/issues/23130#issuecomment-1598282651

huangapple
  • 本文由 发表于 2023年6月19日 18:37:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/76505814.html