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

Use Angular Providers in boostrapApplication option #20746

Conversation

valentinpalkovic
Copy link
Contributor

@valentinpalkovic valentinpalkovic commented Jan 23, 2023

Issue: N/A

Use Angular Providers in bootstrapApplication option and rework the way of how imports are initialized for the Angular Storybook standalone wrapper.

What I did

How to test

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"]

@sheriffMoose
Copy link
Contributor

@valentinpalkovic I updated the mechanism to not cache the componentNgModule while better process the imports and providers separately

@sheriffMoose sheriffMoose marked this pull request as ready for review January 24, 2023 02:02
@valentinpalkovic
Copy link
Contributor Author

valentinpalkovic commented Jan 24, 2023

Now, this kind of error is back:

Type FormComponent is part of the declarations of 2 modules: StorybookComponentModule and StorybookComponentModule! Please consider moving FormComponent to a higher module that imports StorybookComponentModule and StorybookComponentModule. You can also create a new NgModule that exports and includes FormComponent, then import that NgModule in StorybookComponentModule and StorybookComponentModule.

As I told you yesterday, this error is pretty strange because although Standalone components are used and bootstrapped independently from each other, they still somehow infer. Take for example a look at http://localhost:6006/?path=/docs/example-button--docs. Only the first button on the top is rendered. All the other Stories at the bottom aren't. That was the reason why I have introduced that ngModule kind of caching to resolve this issue.

@valentinpalkovic
Copy link
Contributor Author

valentinpalkovic commented Jan 25, 2023

@sheriffMoose Well done  🥳 I left some minor comments. Did you figure out the caching issue locally?

@sheriffMoose
Copy link
Contributor

@valentinpalkovic yep, I created a new empty clone on a different machine

@valentinpalkovic valentinpalkovic changed the base branch from 6.2.0-rc.7 to next January 25, 2023 16:01
valentinpalkovic and others added 4 commits January 25, 2023 17:01
fix imports/providers without caching componentNgModule
`imports`/`declarations` will be used only once per story file.
while `providers` will be used for each story rendered.
@valentinpalkovic valentinpalkovic merged commit 8b44cae into next Jan 25, 2023
@valentinpalkovic valentinpalkovic deleted the valentin/use-angular-providers-in-standalone-boostrapping-properly branch January 25, 2023 17:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants