Feature: Add support for Angular 16

[yannbf]

Closes #22305

What I did

Angular just released v16 RC.0, so we gotta prepare for it!

This PR does two things:

1. expands the version range to allow for Angular 16
2. adds an Angular sandbox

How to test

1. Run a sandbox for the template, e.g. yarn task --task sandbox --start-from auto --template angular-cli/16-ts
2. Open Storybook in your browser
3. Try it out!

Findings

Angular 16 removed ngcc, so we have to account for it as well (we already have a framework option to disable it, so that helps!)

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

[socket-security]

New dependency changes detected. Learn more about Socket for GitHub ↗︎

---

👍 No new dependency issues detected in pull request

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore [email protected] bar@* or ignore all packages with @SocketSecurity ignore-all

Pull request alert summary

Issue	Status
Install scripts	✅ 0 issues
Native code	✅ 0 issues
Bin script confusion	✅ 0 issues
Bin script shell injection	✅ 0 issues
Shell access	✅ 0 issues
Uses eval	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
GitHub dependency	✅ 0 issues
New author	✅ 0 issues
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues

---

📊 Modified Dependency Overview:

⬆️ Updated Package	Version Diff	Added Capability Access	+/- Transitive Count	Publisher
@angular/[email protected]	15.2.8...16.0.0-rc.3	None	+1/-0	google-wombot

[leosvelperez]

@yannbf awesome to see this being worked on!

FYI, Angular 16 also changes the bundles that it generates. The es2015 main field won't be present anymore, nor the ngcc-related ones. I don't think that breaks the Storybook code, but probably would make sense to clean it up for correctness based on the Angular version here https://github.com/storybookjs/storybook/blob/feat/angular-16-sandbox/code/frameworks/angular/src/server/framework-preset-angular-ivy.ts#L72-L75.

[yannbf]

@yannbf awesome to see this being worked on!

FYI, Angular 16 also changes the bundles that it generates. The es2015 main field won't be present anymore, nor the ngcc-related ones. I don't think that breaks the Storybook code, but probably would make sense to clean it up for correctness based on the Angular version here feat/angular-16-sandbox/code/frameworks/angular/src/server/framework-preset-angular-ivy.ts#L72-L75.

Wow thanks for catching that! I updated the code. Would you be so kind to check whether we are missing anything more?

[leosvelperez]

Wow thanks for catching that! I updated the code. Would you be so kind to check whether we are missing anything more?

Glad to help!

From a runtime point of view, I think you've covered what I've found in my testing so far. I can see the pipeline failing with some typing issues. From what I can see:

• The issue reported in file src/builders/build-storybook/index.ts is because there a mismatch with the RxJS versions. The Angular CLI packages now use RxJS 7 and Storybook is using RxJS 6.
• The issue reported in file src/client/angular-beta/utils/NgComponentAnalyzer.test.ts is because entryComponents was removed in Angular 16.
• The issue reported in file src/client/angular-beta/utils/NgComponentAnalyzer.ts is because Inputs type changed and can now be an object with properties like required or alias.

[yannbf]

@valentinpalkovic this was not released yet, could you add a patch label in case you feel this should be patched?

[valentinpalkovic]

@yannbf nx should first test it under the alpha release. Afterwards we can do a hotfix release before angular gets released.

[nstuyvesant]

The links above got me a 404. Anyone have a working example of Angular 16 rc with Storybook 7.1 alpha? Looking primarily for the main.ts.

[valentinpalkovic]

7.1.0-alpha.11 should work with Angular 16