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

Angular: Support Angular 14 standalone components #18272

Merged

Conversation

leosvelperez
Copy link
Contributor

@leosvelperez leosvelperez commented May 19, 2022

Issue:

What I did

Angular v14 introduces standalone components. These components can't be declared in NgModules and instead, they can be imported by an NgModule to make it available to the components declared by that NgModule.

Currently, Storybook adds the specified component to the declarations property of the story NgModule. As explained above, this doesn't work with standalone components.

With the changes in this PR, we now identify if the specified component is standalone:

  • If it is, we don't add it to the declarations of the story NgModule and instead, we add it to the imports of the NgModule.
  • If it isn't, we keep the previous behavior (we add it to the declarations of the story NgModule).

How to test

  • Is this testable with Jest or Chromatic screenshots?
  • Does this need a new example in the kitchen sink apps?
  • Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

@nx-cloud
Copy link

nx-cloud bot commented May 19, 2022

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 41752fe. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch


Successfully ran 1 target

Sent with 💌 from NxCloud.

@shilman shilman changed the title feat(angular): support Angular 14 standalone components Angular: Support Angular 14 standalone components May 19, 2022
@yannbf yannbf requested review from ThibaudAV and kroeder May 23, 2022
@yannbf
Copy link
Member

yannbf commented May 23, 2022

Hey @leosvelperez thanks a lot for this PR and being on top of the Angular game! Could you please update the description PR? It's currently blank.

@storybookjs/angular team could you please take a look? thank you so much!

@yannbf
Copy link
Member

yannbf commented May 23, 2022

CI is failing with the following error:
image

I guess in order to make this change backwards compatible we'll have to explicitly ignore that error?

@leosvelperez
Copy link
Contributor Author

leosvelperez commented May 23, 2022

@yannbf you're right. I described things over Discord and forgot to add the description here. I'll update the PR description.

I guess in order to make this change backwards compatible we'll have to explicitly ignore that error?

The change is backward compatible. In workspaces with an older version of Angular, standalone will be undefined, so the newly added isStandaloneComponent will return false and the functionality would be the same as it was previously.

The issue we have here is a typing issue. Since Storybook still depends on Angular 11, the standalone property is not present since it was only introduced in Angular 14. Therefore, if we want to make TS happy and no update to Angular 14 so we keep compatibility with Angular 11, we could cast it like (d as any).standalone. Likewise, we'd need to add similar casts in the unit tests to have them pass the TS compilation.

I didn't do that from the start because I didn't know if you had a plan to upgrade the Angular deps or if we wanted to keep it at 11. Upgrading the Angular deps is a bigger change.

@leosvelperez
Copy link
Contributor Author

leosvelperez commented May 23, 2022

@yannbf should I go ahead and add those casts to make the TS compiler happy? I previously tested it locally that way and it was building and testing successfully.

@yannbf
Copy link
Member

yannbf commented May 23, 2022

@yannbf should I go ahead and add those casts to make the TS compiler happy? I previously tested it locally that way and it was building and testing successfully.

Sounds good! That'd be the quickest path and we can follow up later to migrate to 14. Could you add a comment with a TODO there? 🙌

@leosvelperez
Copy link
Contributor Author

leosvelperez commented May 23, 2022

Sounds good! That'd be the quickest path and we can follow up later to migrate to 14. Could you add a comment with a TODO there? 🙌

Will do! 👍🏻

@leosvelperez leosvelperez force-pushed the angular/standalone-components branch 2 times, most recently from 640ebf3 to eb960e6 Compare May 24, 2022
@leosvelperez
Copy link
Contributor Author

leosvelperez commented May 24, 2022

I updated the PR and rebased the branch. The only check that's failing seems to be unrelated to the changes in this PR.

@leosvelperez leosvelperez force-pushed the angular/standalone-components branch from eb960e6 to 41752fe Compare Jun 1, 2022
@codecov
Copy link

codecov bot commented Jun 1, 2022

Codecov Report

Merging #18272 (41752fe) into next (5bacf4d) will decrease coverage by 0.03%.
The diff coverage is 0.00%.

@@            Coverage Diff             @@
##             next   #18272      +/-   ##
==========================================
- Coverage   32.05%   32.02%   -0.04%     
==========================================
  Files         975      975              
  Lines       19211    19229      +18     
  Branches     4031     4033       +2     
==========================================
  Hits         6158     6158              
- Misses      12489    12507      +18     
  Partials      564      564              
Impacted Files Coverage Δ
...src/client/preview/angular-beta/StorybookModule.ts 0.00% <0.00%> (ø)
...iew/angular-beta/utils/NgComponentAnalyzer.test.ts 0.00% <0.00%> (ø)
.../preview/angular-beta/utils/NgComponentAnalyzer.ts 0.00% <0.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5bacf4d...41752fe. Read the comment docs.

shilman
shilman approved these changes Jun 6, 2022
Copy link
Member

@shilman shilman left a comment

LGTM. I will try to chase down somebody from @storybookjs/angular to get a second opinion. Thanks so much @leosvelperez !!! 🙏

@shilman shilman self-assigned this Jun 6, 2022
@kroeder kroeder self-assigned this Jun 7, 2022
Copy link
Contributor

@ThibaudAV ThibaudAV left a comment

Awesome 😎 👏
LGTM,

imports: [BrowserModule, ...(moduleMetadata.imports ?? [])],
imports: [
BrowserModule,
...(isStandalone ? [component] : []),
Copy link
Contributor

@ThibaudAV ThibaudAV Jun 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

@leosvelperez leosvelperez Jun 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I initially added a unit test there, but it fails because the current Angular version in this repo doesn't support importing components in an NgModule, so it throws an error. I could still add a unit test but I won't be able to check the fixture (can't call configureTestingModule(ngModule) because it errors). All I could check is that the right imports and declarations are present in the NgModule resultant of calling getStorybookModuleMetadata.

@shilman shilman merged commit 7a48cd5 into storybookjs:next Jun 8, 2022
30 of 37 checks passed
@leosvelperez leosvelperez deleted the angular/standalone-components branch Jun 8, 2022
@shilman shilman added maintenance patch Bugfix & documentation PR that need to be picked to master branch and removed feature request labels Jun 9, 2022
@shilman shilman added the picked Patch/release PRs cherry-picked to master/release branch label Jun 12, 2022
shilman added a commit that referenced this issue Jun 12, 2022
…ents

Angular: Support Angular 14 standalone components
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
app: angular maintenance patch Bugfix & documentation PR that need to be picked to master branch picked Patch/release PRs cherry-picked to master/release branch
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants