Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix module imported twice #21770

Merged

Conversation

valentinpalkovic
Copy link
Contributor

@valentinpalkovic valentinpalkovic commented Mar 24, 2023

Closes #21284

What I did

In Storybook 7.0 we use the new bootstrapApplication API to bootstrap a middleman Storybook Standalone Module to the DOM. The module is configured to respect your configured imports, declarations and schemas. This also means that there is no root ngModule anymore. Previously you could add ModuleWithProviders, likely the result of a 'Module.forRoot()'-style call, to your imports array of the moduleMetadata definition. This is now discouraged. Instead, you should use the new applicationConfig decorator to define application-wide providers and environment providers. Previously, we extracted all providers (and nested ones) from the modules, which were provided via imports automatically, which wasn't a clean solution and was causing bugs like #21284. Instead, now the user has to define all necessary environment-related providers manually.

For example, if you want to configure BrowserAnimationModule in your stories, please do the following:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { importProvidersFrom } from '@angular/core';
import { applicationConfig } from '@storybook/angular';
export default {
  title: 'Example',
  decorators: [
    applicationConfig({
      providers: [importProvidersFrom(BrowserAnimationsModule)],
    }),
  ],
};

You can also use the provide-style decorator to provide an application-wide service:

import { provideAnimations } from '@angular/platform-browser/animations';
import { applicationConfig } from '@storybook/angular';
export default {
  title: 'Example',
  decorators: [
    applicationConfig({
      providers: [provideAnimations()],
    }),
  ],
};

Please visit https://angular.io/guide/standalone-components#configuring-dependency-injection for more information.

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
  • Make sure to add/update documentation regarding your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Maintainers

  • If this PR should be tested against many or all sandboxes,
    make sure to add the ci:merged or ci:daily GH label to it.
  • Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

@valentinpalkovic valentinpalkovic self-assigned this Mar 27, 2023
@valentinpalkovic valentinpalkovic added bug ci:daily Run the CI jobs that normally run in the daily job. labels Mar 27, 2023
@valentinpalkovic valentinpalkovic force-pushed the valentin/fix-module-imported-twice-issue-second-approach branch from 734e0df to 9b29c89 Compare March 27, 2023 07:46
@valentinpalkovic valentinpalkovic force-pushed the valentin/fix-module-imported-twice-issue-second-approach branch 2 times, most recently from 08ed879 to 37a459c Compare March 29, 2023 08:57
@valentinpalkovic valentinpalkovic force-pushed the valentin/fix-module-imported-twice-issue-second-approach branch 2 times, most recently from 6f919bf to 162a9da Compare March 29, 2023 09:15
The applicationConfig decorator allows it to set provider and environment providers on the application level by passing them to the bootstrapApplication API, which is used to bootstrap the application to the DOM. It accepts a provider array, which should be used to setup application-wide providers, like the ones from BrowserAnimationModule
@valentinpalkovic valentinpalkovic force-pushed the valentin/fix-module-imported-twice-issue-second-approach branch from 162a9da to 4029c71 Compare March 29, 2023 09:45
code/frameworks/angular/src/client/decorators.ts Outdated Show resolved Hide resolved
code/frameworks/angular/src/client/types.ts Outdated Show resolved Hide resolved
… the `applicationConfig` decorator instead of `applicationProviders` for registering application-wide providers
@valentinpalkovic valentinpalkovic merged commit c7c33d2 into next Mar 30, 2023
@valentinpalkovic valentinpalkovic deleted the valentin/fix-module-imported-twice-issue-second-approach branch March 30, 2023 10:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug ci:daily Run the CI jobs that normally run in the daily job.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: NgModule is imported twice
3 participants