Merge pull request #22096 from storybookjs/feat/angular-16-sandbox

Feature: Add support for Angular 16

code/frameworks/angular/package.json

@@ -65,18 +65,18 @@
     "webpack": "5"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1500.4",
-    "@angular-devkit/build-angular": "^15.1.1",
-    "@angular-devkit/core": "^15.1.1",
-    "@angular/animations": "^15.1.1",
-    "@angular/cli": "^15.1.1",
-    "@angular/common": "^15.1.1",
-    "@angular/compiler": "^15.1.1",
-    "@angular/compiler-cli": "^15.1.1",
-    "@angular/core": "^15.1.1",
-    "@angular/forms": "^15.1.1",
-    "@angular/platform-browser": "^15.1.1",
-    "@angular/platform-browser-dynamic": "^15.1.1",
+    "@angular-devkit/architect": "^0.1600.0-rc.3",
+    "@angular-devkit/build-angular": "^16.0.0-rc.3",
+    "@angular-devkit/core": "^16.0.0-rc.3",
+    "@angular/animations": "^16.0.0-rc.3",
+    "@angular/cli": "^16.0.0-rc.3",
+    "@angular/common": "^16.0.0-rc.3",
+    "@angular/compiler": "^16.0.0-rc.3",
+    "@angular/compiler-cli": "^16.0.0-rc.3",
+    "@angular/core": "^16.0.0-rc.3",
+    "@angular/forms": "^16.0.0-rc.3",
+    "@angular/platform-browser": "^16.0.0-rc.3",
+    "@angular/platform-browser-dynamic": "^16.0.0-rc.3",
     "@types/rimraf": "^3.0.2",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
@@ -87,20 +87,20 @@
     "tmp": "^0.2.1",
     "typescript": "~4.9.3",
     "webpack": "5",
-    "zone.js": "^0.12.0"
+    "zone.js": "^0.13.0"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1400.0 < 0.1600.0",
-    "@angular-devkit/build-angular": ">=14.1.0 < 16.0.0",
-    "@angular-devkit/core": ">=14.1.0 < 16.0.0",
-    "@angular/cli": ">=14.1.0 < 16.0.0",
-    "@angular/common": ">=14.1.0 < 16.0.0",
-    "@angular/compiler": ">=14.1.0 < 16.0.0",
-    "@angular/compiler-cli": ">=14.1.0 < 16.0.0",
-    "@angular/core": ">=14.1.0 < 16.0.0",
-    "@angular/forms": ">=14.1.0 < 16.0.0",
-    "@angular/platform-browser": ">=14.1.0 < 16.0.0",
-    "@angular/platform-browser-dynamic": ">=14.1.0 < 16.0.0",
+    "@angular-devkit/architect": ">=0.1400.0 < 0.1700.0",
+    "@angular-devkit/build-angular": ">=14.1.0 < 17.0.0",
+    "@angular-devkit/core": ">=14.1.0 < 17.0.0",
+    "@angular/cli": ">=14.1.0 < 17.0.0",
+    "@angular/common": ">=14.1.0 < 17.0.0",
+    "@angular/compiler": ">=14.1.0 < 17.0.0",
+    "@angular/compiler-cli": ">=14.1.0 < 17.0.0",
+    "@angular/core": ">=14.1.0 < 17.0.0",
+    "@angular/forms": ">=14.1.0 < 17.0.0",
+    "@angular/platform-browser": ">=14.1.0 < 17.0.0",
+    "@angular/platform-browser-dynamic": ">=14.1.0 < 17.0.0",
     "@babel/core": "*",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",

code/frameworks/angular/src/builders/build-storybook/index.ts

@@ -1,6 +1,8 @@
 import {
   BuilderContext,
+  BuilderHandlerFn,
   BuilderOutput,
+  BuilderOutputLike,
   Target,
   createBuilder,
   targetFromTargetString,
@@ -42,17 +44,15 @@ export type StorybookBuilderOptions = JsonObject & {
     'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'webpackStatsJson' | 'disableTelemetry'
   >;
 
-export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
+export type StorybookBuilderOutput = JsonObject & BuilderOutput & { [key: string]: any };
 
 type StandaloneBuildOptions = StandaloneOptions & { outputDir: string };
 
-export default createBuilder<any, any>(commandBuilder);
-
-function commandBuilder(
-  options: StorybookBuilderOptions,
-  context: BuilderContext
-): Observable<StorybookBuilderOutput> {
-  return from(setup(options, context)).pipe(
+const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
+  options,
+  context
+): BuilderOutputLike => {
+  const builder = from(setup(options, context)).pipe(
     switchMap(({ tsConfig }) => {
       const runCompodoc$ = options.compodoc
         ? runCompodoc({ compodocArgs: options.compodocArgs, tsconfig: tsConfig }, context).pipe(
@@ -109,7 +109,11 @@ function commandBuilder(
       return { success: true };
     })
   );
-}
+
+  return builder as any as BuilderOutput;
+};
+
+export default createBuilder(commandBuilder);
 
 async function setup(options: StorybookBuilderOptions, context: BuilderContext) {
   let browserOptions: (JsonObject & BrowserBuilderOptions) | undefined;

code/frameworks/angular/src/builders/start-storybook/index.ts

@@ -1,5 +1,6 @@
 import {
   BuilderContext,
+  BuilderHandlerFn,
   BuilderOutput,
   Target,
   createBuilder,
@@ -53,13 +54,8 @@ export type StorybookBuilderOptions = JsonObject & {
 
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
 
-export default createBuilder<any, any>(commandBuilder);
-
-function commandBuilder(
-  options: StorybookBuilderOptions,
-  context: BuilderContext
-): Observable<StorybookBuilderOutput> {
-  return from(setup(options, context)).pipe(
+const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, context) => {
+  const builder = from(setup(options, context)).pipe(
     switchMap(({ tsConfig }) => {
       const runCompodoc$ = options.compodoc
         ? runCompodoc({ compodocArgs: options.compodocArgs, tsconfig: tsConfig }, context).pipe(
@@ -130,7 +126,11 @@ function commandBuilder(
       return { success: true, info: { port } };
     })
   );
-}
+
+  return builder as any as BuilderOutput;
+};
+
+export default createBuilder(commandBuilder);
 
 async function setup(options: StorybookBuilderOptions, context: BuilderContext) {
   let browserOptions: (JsonObject & BrowserBuilderOptions) | undefined;

code/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.test.ts

@@ -346,11 +346,7 @@ function sortByPropName(
 function resolveComponentFactory<T extends Type<any>>(component: T) {
   TestBed.configureTestingModule({
     declarations: [component],
-  }).overrideModule(BrowserDynamicTestingModule, {
-    set: {
-      entryComponents: [component],
-    },
-  });
+  }).overrideModule(BrowserDynamicTestingModule, {});
   const componentFactoryResolver = TestBed.inject(ComponentFactoryResolver);
 
   return componentFactoryResolver.resolveComponentFactory(component);

code/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.ts

@@ -36,7 +36,10 @@ export const getComponentInputsOutputs = (component: any): ComponentInputsOutput
   // Adds the I/O present in @Component metadata
   if (componentMetadata && componentMetadata.inputs) {
     initialValue.inputs.push(
-      ...componentMetadata.inputs.map((i) => ({ propName: i, templateName: i }))
+      ...componentMetadata.inputs.map((i) => ({
+        propName: typeof i === 'string' ? i : i.name,
+        templateName: typeof i === 'string' ? i : i.alias,
+      }))
     );
   }
   if (componentMetadata && componentMetadata.outputs) {
@@ -56,7 +59,7 @@ export const getComponentInputsOutputs = (component: any): ComponentInputsOutput
     if (value instanceof Input) {
       const inputToAdd = {
         propName: propertyName,
-        templateName: value.bindingPropertyName ?? propertyName,
+        templateName: value.bindingPropertyName ?? value.alias ?? propertyName,
       };
 
       const previousInputsFiltered = previousValue.inputs.filter(
@@ -70,7 +73,7 @@ export const getComponentInputsOutputs = (component: any): ComponentInputsOutput
     if (value instanceof Output) {
       const outputToAdd = {
         propName: propertyName,
-        templateName: value.bindingPropertyName ?? propertyName,
+        templateName: value.bindingPropertyName ?? value.alias ?? propertyName,
       };
 
       const previousOutputsFiltered = previousValue.outputs.filter(

code/frameworks/angular/src/server/framework-preset-angular-ivy.ts

@@ -1,4 +1,5 @@
 import { Configuration } from 'webpack';
+import { VERSION } from '@angular/core';
 import * as path from 'path';
 import { Preset } from '@storybook/types';
 
@@ -30,13 +31,12 @@ function loadEsmModule<T>(modulePath: string): Promise<T> {
  * Information about Ivy can be found here https://angular.io/guide/ivy
  */
 export const runNgcc = async () => {
-  let ngcc: typeof import('@angular/compiler-cli/ngcc');
+  let ngcc: any;
   try {
-    ngcc = await import('@angular/compiler-cli/ngcc');
+    // eslint-disable-next-line global-require
+    ngcc = require('@angular/compiler-cli/ngcc');
   } catch (error) {
-    ngcc = await loadEsmModule<typeof import('@angular/compiler-cli/ngcc')>(
-      '@angular/compiler-cli/ngcc'
-    );
+    ngcc = await loadEsmModule('@angular/compiler-cli/ngcc');
   }
 
   ngcc.process({
@@ -52,29 +52,30 @@ export const runNgcc = async () => {
 export const webpack = async (webpackConfig: Configuration, options: PresetOptions) => {
   const framework = await options.presets.apply<Preset>('framework');
   const angularOptions = (typeof framework === 'object' ? framework.options : {}) as AngularOptions;
+  const isAngular16OrNewer = parseInt(VERSION.major, 10) >= 16;
 
   // Default to true, if undefined
   if (angularOptions.enableIvy === false) {
     return webpackConfig;
   }
 
-  if (angularOptions.enableNgcc !== false) {
+  let extraMainFields: string[] = [];
+
+  if (angularOptions.enableNgcc !== false && !isAngular16OrNewer) {
+    // TODO: Drop if Angular 14 and 15 are not supported anymore
     runNgcc();
+    extraMainFields = ['es2015_ivy_ngcc', 'module_ivy_ngcc', 'main_ivy_ngcc'];
+  }
+
+  if (!isAngular16OrNewer) {
+    extraMainFields.push('es2015');
   }
 
   return {
     ...webpackConfig,
     resolve: {
       ...webpackConfig.resolve,
-      mainFields: [
-        'es2015_ivy_ngcc',
-        'module_ivy_ngcc',
-        'main_ivy_ngcc',
-        'es2015',
-        'browser',
-        'module',
-        'main',
-      ],
+      mainFields: [...extraMainFields, 'browser', 'module', 'main'],
     },
   };
 };

code/lib/cli/src/sandbox-templates.ts

@@ -266,6 +266,18 @@ const baseTemplates = {
     // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
     skipTasks: ['smoke-test', 'e2e-tests-dev'],
   },
+  'angular-cli/prerelease': {
+    name: 'Angular CLI (Prerelease)',
+    script:
+      'npx -p @angular/cli@next ng new angular-v16 --directory . --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
+    expected: {
+      framework: '@storybook/angular',
+      renderer: '@storybook/angular',
+      builder: '@storybook/builder-webpack5',
+    },
+    skipTasks: ['e2e-tests-dev'],
+    inDevelopment: true,
+  },
   'angular-cli/default-ts': {
     name: 'Angular CLI (latest)',
     script:
@@ -461,6 +473,8 @@ export const allTemplates: Record<TemplateKey, Template> = {
 export const ci: TemplateKey[] = ['cra/default-ts', 'react-vite/default-ts'];
 export const pr: TemplateKey[] = [
   ...ci,
+  // TODO: add this after the sandbox is ready in the sandboxes repo
+  // 'angular-cli/prerelease',
   'angular-cli/default-ts',
   'vue3-vite/default-ts',
   'vue-cli/vue2-default-js',