ANGULAR + PRIMENG + STORYBOOK: Error on NullInjectorError: No provider for InjectionToken app.config

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

ANGULAR + PRIMENG + STORYBOOK: Error on NullInjectorError: No provider for InjectionToken app.config

问题

我创建了一个新的Angular应用：

  1. ng new my-app

然后我添加了PrimeNG：

  1. npm install primeng

最后，我添加了StoryBook：

  1. npx storybook@latest init

我创建了一个新的组件：

  1. ng g c header

该组件代码如下：

  1. export class HeaderComponent implements OnInit {
  3.   public user: User;
  4.   public projects: Project[] = [];
  5.   public mainProject: Project | undefined;
  6.   public items: MenuItem[] = [];
  7.   public loading: boolean = true;
  9.   @ViewChild(Menu)
  10.   public menu: Menu;
  12.   constructor() { }
  14.   ngOnInit(): void {
  16.   }
  18. }

然后我为它创建了一个故事：

  1. const meta: Meta<HeaderComponent> = {
  2.     title: 'HeaderComponent',
  3.     component: HeaderComponent,
  4.     decorators: [
  5.         moduleMetadata({
  6.             imports: [
  7.                 DropdownModule,
  8.                 ProgressSpinnerModule,
  9.                 AvatarModule,
  10.                 MenuModule,
  11.                 ButtonModule,
  12.                 FormsModule,
  13.                 BrowserAnimationsModule
  14.             ],
  15.             providers: [{ provide: ActivatedRoute, useValue: {} }]
  16.         }),
  17.     ],
  18. };
  20. export default meta;
  21. type Story = StoryObj<HeaderComponent>;
  23. export const Primary: Story = {
  24.     args: {
  25.         loading: true,
  26.         projects: [{ name: "Project 1", main: true }, { name: "Project 2", main: false }],
  27.         user: { username: "User Default", avatar: "data:image/png;base64...." },
  28.         items: [{ label: "Perfil", icon: "pi pi-fw pi-user" }, { label: "Configurações", icon: "pi pi-fw pi-cog" }]
  29.     },
  30. };

一切都正常工作！但是，当我在组件中添加一个服务时：

  1. @Injectable({
  2.   providedIn: 'root'
  3. })
  4. export class ProjectService {
  6.   constructor(@Inject(APP_CONFIG) private config: AppConfig, private http: HttpClient) { }
  8.   public list(): Observable<Project[]> {
  9.     return this.http.get<Project[]>(`${this.config.api.url}/projects`);
  10.   }
  11. }

并且修改了故事为：

  1. const meta: Meta<HeaderComponent> = {
  2.     title: 'HeaderComponent',
  3.     component: HeaderComponent,
  4.     decorators: [
  5.         moduleMetadata({
  6.             imports: [
  7.                 DropdownModule,
  8.                 ProgressSpinnerModule,
  9.                 AvatarModule,
  10.                 MenuModule,
  11.                 ButtonModule,
  12.                 FormsModule,
  13.                 BrowserAnimationsModule
  14.             ],
  15.             providers: [
  16.                 { provide: ActivatedRoute, useValue: {} },
  17.                 { provide: APP_CONFIG, useValue: { api: { url: "http://localhost:8500/api" } } }
  18.             ]
  19.         }),
  20.     ],
  21. };
  23. export default meta;
  24. type Story = StoryObj<HeaderComponent>;
  26. export const Primary: Story = {
  27.     args: {
  28.         loading: true,
  29.         projects: [{ name: "Project 1", main: true }, { name: "Project 2", main: false }],
  30.         user: { username: "User Default", avatar: "data:image/png;base64...." },
  31.         items: [{ label: "Perfil", icon: "pi pi-fw pi-user" }, { label: "Configurações", icon: "pi pi-fw pi-cog" }]
  32.     },
  33. };

我遇到了这个错误：

  1. > R3InjectorError(Standalone[StorybookWrapperComponent])[ProjectService -> ProjectService -> InjectionToken app.config -> InjectionToken app.config]: 
  2. NullInjectorError: No provider for InjectionToken app.config!

在Angular应用中没有错误。有什么想法吗？

英文:

I started a new angular APP:

  1. ng new my-app

Then I added PrimeNG:

  1. npm install primeng

Finally, I added StoryBook:

  1. npx storybook@latest init

I created the a new component:

  1. ng g c header

The component:

  1. export class HeaderComponent implements OnInit {
  2. public user: User;
  3. public projects: Project[] = [];
  4. public mainProject: Project | undefined;
  5. public items: MenuItem[] = [];
  6. public loading: boolean = true;
  7. @ViewChild(Menu)
  8. public menu: Menu;
  9. constructor() { }
  10. ngOnInit(): void {
  11. }
  12. }

And created a story for it:

  1. const meta: Meta<HeaderComponent> = {
  2. title: 'HeaderComponent',
  3. component: HeaderComponent,
  4. decorators: [
  5. moduleMetadata({
  6. imports: [
  7. DropdownModule,
  8. ProgressSpinnerModule,
  9. AvatarModule,
  10. MenuModule,
  11. ButtonModule,
  12. FormsModule,
  13. BrowserAnimationsModule
  14. ],
  15. providers: [{ provide: ActivatedRoute, useValue: {} }]
  16. }),
  17. ],
  18. };
  19. export default meta;
  20. type Story = StoryObj<HeaderComponent>;
  21. export const Primary: Story = {
  22. args: {
  23. loading: true,
  24. projects: [{ name: "Project 1", main: true }, { name: "Project 2", main: false }],
  25. user: { username: "User Default", avatar: "data:image/png;base64...." },
  26. items: [{ label: "Perfil", icon: "pi pi-fw pi-user" }, { label: "Configurações", icon: "pi pi-fw pi-cog" }]
  27. },
  28. };

And works fine! However, when I add a service in the component:

  1. @Injectable({
  2. providedIn: 'root'
  3. })
  4. export class ProjectService {
  5. constructor(@Inject(APP_CONFIG) private config: AppConfig, private http: HttpClient) { }
  6. public list(): Observable<Project[]> {
  7. return this.http.get<Project[]>(`${this.config.api.url}/projects`);
  8. }
  9. }

And changed the story to:

  1. const meta: Meta<HeaderComponent> = {
  2. title: 'HeaderComponent',
  3. component: HeaderComponent,
  4. decorators: [
  5. moduleMetadata({
  6. imports: [
  7. DropdownModule,
  8. ProgressSpinnerModule,
  9. AvatarModule,
  10. MenuModule,
  11. ButtonModule,
  12. FormsModule,
  13. BrowserAnimationsModule
  14. ],
  15. providers: [
  16. { provide: ActivatedRoute, useValue: {} },
  17. { provide: APP_CONFIG, useValue: { api: { url: "http://localhost:8500/api" } } }
  18. ]
  19. }),
  20. ],
  21. };
  22. export default meta;
  23. type Story = StoryObj<HeaderComponent>;
  24. export const Primary: Story = {
  25. args: {
  26. loading: true,
  27. projects: [{ name: "Project 1", main: true }, { name: "Project 2", main: false }],
  28. user: { username: "User Default", avatar: "data:image/png;base64...." },
  29. items: [{ label: "Perfil", icon: "pi pi-fw pi-user" }, { label: "Configurações", icon: "pi pi-fw pi-cog" }]
  30. },
  31. };

I am getting this error:

> R3InjectorError(Standalone[StorybookWrapperComponent])[ProjectService -> ProjectService -> InjectionToken app.config -> InjectionToken app.config]:
NullInjectorError: No provider for InjectionToken app.config!

In the angular app works fine, no errors. Any ideas?

答案1

得分: -1

在与StoryBook Discord频道中的MarkB交谈后，我得到了答案：

  1. const meta: Meta<HeaderComponent> = {
  2.     title: 'HeaderComponent',
  3.     component: HeaderComponent,
  4.     decorators: [
  5.         applicationConfig({
  6.             providers: [
  7.                 { provide: APP_CONFIG, useValue: { api: { url: 'http://localhost:8500/api' } } },
  8.                 { provide: ActivatedRoute, useValue: {} },
  9.                 importProvidersFrom(HttpClientModule)
  10.             ],
  11.         }),
  12.         moduleMetadata({
  13.             imports: [
  14.                 DropdownModule,
  15.                 ProgressSpinnerModule,
  16.                 AvatarModule,
  17.                 MenuModule,
  18.                 ButtonModule,
  19.                 FormsModule,
  20.                 BrowserAnimationsModule,
  21.             ],
  22.         }),
  23.     ],
  24. };
  26. export default meta;
  27. type Story = StoryObj<HeaderComponent>;
  29. export const Primary: Story = {
  30.     args: {
  31.         loading: true,
  32.         projects: [{ name: "Project 1", main: true }, { name: "Project 2", main: false }],
  33.         user: { username: "User Default", avatar: "data:image/png;base64...." },
  34.         items: [{ label: "Perfil", icon: "pi pi-fw pi-user" }, { label: "Configurações", icon: "pi pi-fw pi-cog" }]
  35.     },
  36. };
英文:

After talking with MarkB in StoryBook Discord Channel, I gotta the answer:

  1. const meta: Meta&lt;HeaderComponent&gt; = {
  2. title: &#39;HeaderComponent&#39;,
  3. component: HeaderComponent,
  4. decorators: [
  5. applicationConfig({
  6. providers: [
  7. { provide: APP_CONFIG, useValue: { api: { url: &#39;http://localhost:8500/api&#39; } }, },
  8. { provide: ActivatedRoute, useValue: {} },
  9. importProvidersFrom(HttpClientModule)
  10. ],
  11. }),
  12. moduleMetadata({
  13. imports: [
  14. DropdownModule,
  15. ProgressSpinnerModule,
  16. AvatarModule,
  17. MenuModule,
  18. ButtonModule,
  19. FormsModule,
  20. BrowserAnimationsModule,
  21. ],
  22. }),
  23. ],
  24. };
  25. export default meta;
  26. type Story = StoryObj&lt;HeaderComponent&gt;;
  27. export const Primary: Story = {
  28. args: {
  29. loading: true,
  30. projects: [{ name: &quot;Project 1&quot;, main: true }, { name: &quot;Project 2&quot;, main: false }],
  31. user: { username: &quot;User Default&quot;, avatar: &quot;data:image/png;base64....&quot; },
  32. items: [{ label: &quot;Perfil&quot;, icon: &quot;pi pi-fw pi-user&quot; }, { label: &quot;Configura&#231;&#245;es&quot;, icon: &quot;pi pi-fw pi-cog&quot; }]
  33. },
  34. };

huangapple
  • 本文由 发表于 2023年5月25日 03:06:14
  • 转载请务必保留本文链接：https://go.coder-hub.com/76326690.html
  • angular
  • primeng
  • storybook
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定