Angular: Support Angular 14 standalone components

[leosvelperez]

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]

☁️ 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

• nx run-many --target=prepare --all --parallel=2 --max-parallel=15 -- --optimized

---

Sent with 💌 from NxCloud.

[yannbf]

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]

CI is failing with the following error:

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

[leosvelperez]

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

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

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

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]

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

[codecov]

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]

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

[ThibaudAV]

Awesome 😎 👏
LGTM,

[ThibaudAV]

I you want test this you can add a test here : https://github.com/storybookjs/storybook/blob/41752fe5bc8ed2831a21b96bc5203b53c0e9b123/app/angular/src/client/preview/angular-beta/StorybookModule.test.ts

[leosvelperez]

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.