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

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

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

问题

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

ng new my-app

然后我添加了PrimeNG：

npm install primeng

最后，我添加了StoryBook：

npx storybook@latest init

我创建了一个新的组件：

ng g c header

该组件代码如下：

export class HeaderComponent implements OnInit {

  public user: User;
  public projects: Project[] = [];
  public mainProject: Project | undefined;
  public items: MenuItem[] = [];
  public loading: boolean = true;

  @ViewChild(Menu)
  public menu: Menu;

  constructor() { }

  ngOnInit(): void {

  }

}

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

const meta: Meta<HeaderComponent> = {
    title: 'HeaderComponent',
    component: HeaderComponent,
    decorators: [
        moduleMetadata({
            imports: [
                DropdownModule,
                ProgressSpinnerModule,
                AvatarModule,
                MenuModule,
                ButtonModule,
                FormsModule,
                BrowserAnimationsModule
            ],
            providers: [{ provide: ActivatedRoute, useValue: {} }]
        }),
    ],
};

export default meta;
type Story = StoryObj<HeaderComponent>;

export const Primary: Story = {
    args: {
        loading: true,
        projects: [{ name: "Project 1", main: true }, { name: "Project 2", main: false }],
        user: { username: "User Default", avatar: "data:image/png;base64...." },
        items: [{ label: "Perfil", icon: "pi pi-fw pi-user" }, { label: "Configurações", icon: "pi pi-fw pi-cog" }]
    },
};

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

@Injectable({
  providedIn: 'root'
})
export class ProjectService {

  constructor(@Inject(APP_CONFIG) private config: AppConfig, private http: HttpClient) { }

  public list(): Observable<Project[]> {
    return this.http.get<Project[]>(`${this.config.api.url}/projects`);
  }
}

并且修改了故事为：

const meta: Meta<HeaderComponent> = {
    title: 'HeaderComponent',
    component: HeaderComponent,
    decorators: [
        moduleMetadata({
            imports: [
                DropdownModule,
                ProgressSpinnerModule,
                AvatarModule,
                MenuModule,
                ButtonModule,
                FormsModule,
                BrowserAnimationsModule
            ],
            providers: [
                { provide: ActivatedRoute, useValue: {} },
                { provide: APP_CONFIG, useValue: { api: { url: "http://localhost:8500/api" } } }
            ]
        }),
    ],
};

export default meta;
type Story = StoryObj<HeaderComponent>;

export const Primary: Story = {
    args: {
        loading: true,
        projects: [{ name: "Project 1", main: true }, { name: "Project 2", main: false }],
        user: { username: "User Default", avatar: "data:image/png;base64...." },
        items: [{ label: "Perfil", icon: "pi pi-fw pi-user" }, { label: "Configurações", icon: "pi pi-fw pi-cog" }]
    },
};

我遇到了这个错误：

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

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

英文:

I started a new angular APP:

ng new my-app

Then I added PrimeNG:

npm install primeng

Finally, I added StoryBook:

npx storybook@latest init

I created the a new component:

ng g c header

The component:

export class HeaderComponent implements OnInit {
public user: User;
public projects: Project[] = [];
public mainProject: Project | undefined;
public items: MenuItem[] = [];
public loading: boolean = true;
@ViewChild(Menu)
public menu: Menu;
constructor() { }
ngOnInit(): void {
}
}

And created a story for it:

const meta: Meta<HeaderComponent> = {
title: 'HeaderComponent',
component: HeaderComponent,
decorators: [
moduleMetadata({
imports: [
DropdownModule,
ProgressSpinnerModule,
AvatarModule,
MenuModule,
ButtonModule,
FormsModule,
BrowserAnimationsModule
],
providers: [{ provide: ActivatedRoute, useValue: {} }]
}),
],
};
export default meta;
type Story = StoryObj<HeaderComponent>;
export const Primary: Story = {
args: {
loading: true,
projects: [{ name: "Project 1", main: true }, { name: "Project 2", main: false }],
user: { username: "User Default", avatar: "data:image/png;base64...." },
items: [{ label: "Perfil", icon: "pi pi-fw pi-user" }, { label: "Configurações", icon: "pi pi-fw pi-cog" }]
},
};

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

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

And changed the story to:

const meta: Meta<HeaderComponent> = {
title: 'HeaderComponent',
component: HeaderComponent,
decorators: [
moduleMetadata({
imports: [
DropdownModule,
ProgressSpinnerModule,
AvatarModule,
MenuModule,
ButtonModule,
FormsModule,
BrowserAnimationsModule
],
providers: [
{ provide: ActivatedRoute, useValue: {} },
{ provide: APP_CONFIG, useValue: { api: { url: "http://localhost:8500/api" } } }
]
}),
],
};
export default meta;
type Story = StoryObj<HeaderComponent>;
export const Primary: Story = {
args: {
loading: true,
projects: [{ name: "Project 1", main: true }, { name: "Project 2", main: false }],
user: { username: "User Default", avatar: "data:image/png;base64...." },
items: [{ label: "Perfil", icon: "pi pi-fw pi-user" }, { label: "Configurações", icon: "pi pi-fw pi-cog" }]
},
};

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交谈后，我得到了答案：

const meta: Meta<HeaderComponent> = {
    title: 'HeaderComponent',
    component: HeaderComponent,
    decorators: [
        applicationConfig({
            providers: [
                { provide: APP_CONFIG, useValue: { api: { url: 'http://localhost:8500/api' } } },
                { provide: ActivatedRoute, useValue: {} },
                importProvidersFrom(HttpClientModule)
            ],
        }),
        moduleMetadata({
            imports: [
                DropdownModule,
                ProgressSpinnerModule,
                AvatarModule,
                MenuModule,
                ButtonModule,
                FormsModule,
                BrowserAnimationsModule,
            ],
        }),
    ],
};

export default meta;
type Story = StoryObj<HeaderComponent>;

export const Primary: Story = {
    args: {
        loading: true,
        projects: [{ name: "Project 1", main: true }, { name: "Project 2", main: false }],
        user: { username: "User Default", avatar: "data:image/png;base64...." },
        items: [{ label: "Perfil", icon: "pi pi-fw pi-user" }, { label: "Configurações", icon: "pi pi-fw pi-cog" }]
    },
};
英文:

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

const meta: Meta&lt;HeaderComponent&gt; = {
title: &#39;HeaderComponent&#39;,
component: HeaderComponent,
decorators: [
applicationConfig({
providers: [
{ provide: APP_CONFIG, useValue: { api: { url: &#39;http://localhost:8500/api&#39; } }, },
{ provide: ActivatedRoute, useValue: {} },
importProvidersFrom(HttpClientModule)
],
}),
moduleMetadata({
imports: [
DropdownModule,
ProgressSpinnerModule,
AvatarModule,
MenuModule,
ButtonModule,
FormsModule,
BrowserAnimationsModule,
],
}),
],
};
export default meta;
type Story = StoryObj&lt;HeaderComponent&gt;;
export const Primary: Story = {
args: {
loading: true,
projects: [{ name: &quot;Project 1&quot;, main: true }, { name: &quot;Project 2&quot;, main: false }],
user: { username: &quot;User Default&quot;, avatar: &quot;data:image/png;base64....&quot; },
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; }]
},
};

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:

确定