Merge pull request #29659 from leosvelperez/feat/angular-19

Angular: Support v19
(cherry picked from commit fa3cf88)

code/frameworks/angular/package.json

@@ -81,17 +81,17 @@
     "zone.js": "^0.14.2"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1500.0 < 0.1900.0",
-    "@angular-devkit/build-angular": ">=15.0.0 < 19.0.0",
-    "@angular-devkit/core": ">=15.0.0 < 19.0.0",
-    "@angular/cli": ">=15.0.0 < 19.0.0",
-    "@angular/common": ">=15.0.0 < 19.0.0",
-    "@angular/compiler": ">=15.0.0 < 19.0.0",
-    "@angular/compiler-cli": ">=15.0.0 < 19.0.0",
-    "@angular/core": ">=15.0.0 < 19.0.0",
-    "@angular/forms": ">=15.0.0 < 19.0.0",
-    "@angular/platform-browser": ">=15.0.0 < 19.0.0",
-    "@angular/platform-browser-dynamic": ">=15.0.0 < 19.0.0",
+    "@angular-devkit/architect": ">=0.1500.0 < 0.2000.0",
+    "@angular-devkit/build-angular": ">=15.0.0 < 20.0.0",
+    "@angular-devkit/core": ">=15.0.0 < 20.0.0",
+    "@angular/cli": ">=15.0.0 < 20.0.0",
+    "@angular/common": ">=15.0.0 < 20.0.0",
+    "@angular/compiler": ">=15.0.0 < 20.0.0",
+    "@angular/compiler-cli": ">=15.0.0 < 20.0.0",
+    "@angular/core": ">=15.0.0 < 20.0.0",
+    "@angular/forms": ">=15.0.0 < 20.0.0",
+    "@angular/platform-browser": ">=15.0.0 < 20.0.0",
+    "@angular/platform-browser-dynamic": ">=15.0.0 < 20.0.0",
     "rxjs": "^6.0.0 || ^7.4.0",
     "storybook": "workspace:^",
     "typescript": "^4.0.0 || ^5.0.0",

code/frameworks/angular/template/components/button.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
+  standalone: false,
   // Needs to be a different name to the CLI template button
   selector: 'storybook-framework-button',
   template: ` <button

code/frameworks/angular/template/components/form.component.ts

@@ -1,6 +1,7 @@
 import { Component, Output, EventEmitter } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-form',
   template: `
     <form id="interaction-test-form" (submit)="handleSubmit($event)">

code/frameworks/angular/template/components/html.component.ts

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
+  standalone: false,
   selector: 'storybook-html',
   template: `<div [innerHTML]="safeContent"></div>`,
 })

code/frameworks/angular/template/components/pre.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-pre',
   template: `<pre data-testid="pre" [ngStyle]="style">{{ finalText }}</pre>`,
 })

code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts

@@ -38,6 +38,7 @@ export enum ButtonAccent {
  * @html <span class="badge">aaa</span>
  */
 @Component({
+  standalone: false,
   selector: 'my-button',
   templateUrl: './doc-button.component.html',
   styleUrls: ['./doc-button.component.scss'],

code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts

@@ -2,6 +2,7 @@ import { ElementRef, AfterViewInit, Directive, Input } from '@angular/core';
 
 /** This is an Angular Directive example that has a Prop Table. */
 @Directive({
+  standalone: false,
   selector: '[docDirective]',
 })
 export class DocDirective implements AfterViewInit {

code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts

@@ -2,6 +2,7 @@ import { PipeTransform, Pipe } from '@angular/core';
 
 /** This is an Angular Pipe example that has a Prop Table. */
 @Pipe({
+  standalone: false,
   name: 'docPipe',
 })
 export class DocPipe implements PipeTransform {

code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts

@@ -4,6 +4,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 const NOOP = () => {};
 
 @Component({
+  standalone: false,
   selector: 'storybook-custom-cva-component',
   template: ` <div>{{ value }}</div>
 <input type="text" [(ngModel)]="value" /> `,

code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts

@@ -1,6 +1,7 @@
 import { ComponentFactoryResolver, ElementRef, Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-attribute-selector[foo=bar]',
   template: `<h3>Attribute selector</h3>
 Selector: {{ selectors }} <br />

code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts

@@ -1,6 +1,7 @@
 import { ComponentFactoryResolver, ElementRef, Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-class-selector.foo, storybook-class-selector.bar',
   template: `<h3>Class selector</h3>
 Selector: {{ selectors }} <br />

code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts

@@ -1,6 +1,7 @@
 import { ComponentFactoryResolver, ElementRef, Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-multiple-selector, storybook-multiple-selector2',
   template: `<h3>Multiple selector</h3>
 Selector: {{ selectors }} <br />
@@ -22,6 +23,7 @@ export class MultipleSelectorComponent {
 }
 
 @Component({
+  standalone: false,
   selector: 'storybook-button, button[foo], .button[foo], button[baz]',
   template: `<h3>Multiple selector</h3>
 Selector: {{ selectors }} <br />

code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 
 /** This component is used for testing the various forms of enum types */
 @Component({
+  standalone: false,
   selector: 'app-enums',
   templateUrl: './enums.component.html',
 })

code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: `storybook-base-button`,
   template: ` <button>{{ label }}</button> `,
 })

code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { BaseButtonComponent } from './base-button.component';
 
 @Component({
+  standalone: false,
   selector: `storybook-icon-button`,
   template: ` <button>{{ label }} - {{ icon }}</button> `,
 })

code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { componentWrapperDecorator, Meta, StoryObj } from '@storybook/angular';
 
 @Component({
+  standalone: false,
   selector: 'sb-button',
   template: `<button [style.background-color]="color"><ng-content></ng-content></button>`,
   styles: [

code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { Meta, StoryObj } from '@storybook/angular';
 
 @Component({
+  standalone: false,
   selector: 'storybook-with-ng-content',
   template: `Content value:
 <div style="color: #1e88e5"><ng-content></ng-content></div>`,

code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts

@@ -2,6 +2,7 @@ import { OnDestroy, OnInit, Component } from '@angular/core';
 import { Meta, StoryObj } from '@storybook/angular';
 
 @Component({
+  standalone: false,
   selector: 'on-destroy',
   template: `Current time: {{ time }} <br />
 📝 The current time in console should no longer display after a change of story`,

code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, ChangeDetectionStrategy, HostBinding } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-on-push-box',
   template: ` Word of the day: {{ word }} `,
   styles: [

code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts

@@ -11,8 +11,6 @@ const meta: Meta<WithPipeComponent> = {
       declarations: [CustomPipePipe],
     }),
   ],
-  tags: ['!test', '!vitest'],
-  parameters: { chromatic: { disable: true } },
 };
 
 export default meta;

code/frameworks/angular/template/stories/basics/component-with-pipe/custom.pipe.ts

@@ -1,6 +1,7 @@
 import { PipeTransform, Pipe } from '@angular/core';
 
 @Pipe({
+  standalone: false,
   name: 'customPipe',
 })
 export class CustomPipePipe implements PipeTransform {

code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-with-pipe',
   template: ` <h1>{{ field | customPipe }}</h1> `,
 })

code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts

@@ -4,6 +4,7 @@ import { stringify } from 'telejson';
 export const TEST_TOKEN = new InjectionToken<string>('test');
 
 @Component({
+  standalone: false,
   selector: 'storybook-di-component',
   templateUrl: './di.component.html',
   providers: [{ provide: TEST_TOKEN, useValue: 123 }],

code/frameworks/angular/template/stories/basics/component-with-style/styled.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-styled-component',
   templateUrl: './styled.component.html',
   styleUrls: ['./styled.component.css', './styled.component.scss'],

code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts

@@ -19,6 +19,7 @@ type Story = StoryObj<WithoutSelectorComponent>;
 // Advanced example with custom *ngComponentOutlet
 
 @Component({
+  standalone: false,
   selector: 'ng-component-outlet-wrapper',
   template: `<ng-container
   *ngComponentOutlet="componentOutlet; injector: componentInjector; content: componentContent"

code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.component.ts

@@ -5,6 +5,7 @@ export const WITHOUT_SELECTOR_DATA = new InjectionToken<{ color: string; name: s
 );
 
 @Component({
+  standalone: false,
   template: `My name in color :
 <div [style.color]="color">{{ name }}</div>
 <ng-content></ng-content> <ng-content></ng-content>`,

code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts

@@ -1,6 +1,7 @@
 import { PipeTransform, Pipe } from '@angular/core';
 
 @Pipe({
+  standalone: false,
   name: 'chipText',
 })
 export class ChipTextPipe implements PipeTransform {

code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, Output, EventEmitter, Inject, HostBinding } from '@an
 import { CHIP_COLOR } from './chip-color.token';
 
 @Component({
+  standalone: false,
   selector: 'storybook-chip',
   template: `
     <span class="text">{{ displayText | chipText }}</span>

code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-chips-group',
   template: `
     <storybook-chip

code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts

@@ -10,8 +10,6 @@ const meta: Meta<ChipComponent> = {
       imports: [ChipsModule],
     }),
   ],
-  tags: ['!test', '!vitest'],
-  parameters: { chromatic: { disable: true } },
 };
 
 export default meta;

code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts

@@ -28,8 +28,6 @@ const meta: Meta<ChipsGroupComponent> = {
     removeChipClick: { action: 'Remove chip' },
     removeAllChipsClick: { action: 'Remove all chips clicked' },
   },
-  tags: ['!test', '!vitest'],
-  parameters: { chromatic: { disable: true } },
 };
 
 export default meta;

code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts

@@ -11,8 +11,6 @@ const meta: Meta<ChipsGroupComponent> = {
       imports: [ChipsModule],
     }),
   ],
-  tags: ['!test', '!vitest'],
-  parameters: { chromatic: { disable: true } },
 };
 
 export default meta;

code/frameworks/angular/template/stories/button.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-button-component',
   template: ` <button (click)="onClick.emit($event)">{{ text }}</button> `,
   styles: [

code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/child.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'child-component',
   template: `
     Child<br />

code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'parent-component',
   template: `
     Parent<br />

code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/custom.pipe.ts

@@ -1,6 +1,7 @@
 import { PipeTransform, Pipe } from '@angular/core';
 
 @Pipe({
+  standalone: false,
   name: 'customPipe',
 })
 export class CustomPipePipe implements PipeTransform {

code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 
 @Component({
+  standalone: false,
   selector: 'app-open-close',
   animations: [
     trigger('openClose', [

code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts

@@ -2,6 +2,7 @@ import { OnInit, Component, Input } from '@angular/core';
 import { DummyService } from './dummy.service';
 
 @Component({
+  standalone: false,
   selector: 'storybook-simple-service-component',
   template: `<p>{{ name }}:</p>
 <ul>

code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/token.component.ts

@@ -4,6 +4,7 @@ export const ITEMS = new InjectionToken<string[]>('TokenComponent.Items');
 export const DEFAULT_NAME = new InjectionToken<string>('TokenComponent.DefaultName');
 
 @Component({
+  standalone: false,
   selector: 'storybook-simple-token-component',
   template: `
     <h3>{{ name }}</h3>

code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/angular';
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'component-with-whitespace',
   preserveWhitespaces: true,
   template: ` <div>

code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, input, output } from '@angular/core';
 
 @Component({
+  standalone: false,
   // Needs to be a different name to the CLI template button
   selector: 'storybook-signal-button',
   template: ` <button

code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, input, output } from '@angular/core';
 
 @Component({
+  standalone: false,
   // Needs to be a different name to the CLI template button
   selector: 'storybook-signal-button',
   template: ` <button

code/lib/test/template/stories/before-each.stories.ts

@@ -32,7 +32,8 @@ export const BeforeEachOrder = {
   async play({ canvasElement }: any) {
     await userEvent.click(getByRole(canvasElement, 'button'));
 
-    await expect(mocked(console.log).mock.calls).toEqual([
+    const allLogs = mocked(console.log).mock.calls.filter(([message]) => /^\d+ - /.test(message));
+    await expect(allLogs).toEqual([
       ['1 - [from loaders]'],
       ['2 - [from meta beforeEach]'],
       ['3 - [from story beforeEach]'],

code/lib/test/template/stories/mount-in-play.stories.ts

@@ -32,7 +32,8 @@ export const MountInPlay = {
     await mount();
     console.log('6 - [after mount]');
     await userEvent.click(getByRole(canvasElement, 'button'));
-    await expect(mocked(console.log).mock.calls).toEqual([
+    const allLogs = mocked(console.log).mock.calls.filter(([message]) => /^\d+ - /.test(message));
+    await expect(allLogs).toEqual([
       ['1 - [from loaders]'],
       ['2 - [from meta beforeEach]'],
       ['3 - [from story beforeEach]'],