build: update to Angular 19-rc (#4575)

BREAKING CHANGES: The minimum required version of Angular has been updated. BEFORE: The minimum required version is Angular 18.x AFTER: The minimum required version is Angular 19.x
ngrx · Nov 12, 2024 · 361bae6 · 361bae6
1 parent 5523a9d
commit 361bae6
Show file tree

Hide file tree

Showing 39 changed files with 2,314 additions and 1,657 deletions.
diff --git a/modules/component-store/spec/integration.spec.ts b/modules/component-store/spec/integration.spec.ts
@@ -200,6 +200,7 @@ describe('ComponentStore integration', () => {
   @Component({
     selector: 'body',
     template: '<child *ngIf="isChildVisible"></child>',
+    standalone: false,
   })
   class ParentComponent implements Parent {
     isChildVisible = true;
@@ -249,6 +250,7 @@ describe('ComponentStore integration', () => {
       selector: 'child',
       template: '<div>{{prop$ | async}}</div>',
       providers: [ComponentStore],
+      standalone: false,
     })
     class ChildComponent implements Child {
       prop$ = this.componentStore.select((state) => state.prop);
@@ -298,6 +300,7 @@ describe('ComponentStore integration', () => {
     @Component({
       selector: 'child',
       template: '<div>{{prop$ | async}}</div>',
+      standalone: false,
     })
     class ChildComponent extends ComponentStore<State> implements Child {
       prop$ = this.select((state) => state.prop);
@@ -398,6 +401,7 @@ describe('ComponentStore integration', () => {
       selector: 'child',
       template: '<div>{{prop$ | async}}</div>',
       providers: [PropsStore],
+      standalone: false,
     })
     class ChildComponent implements Child {
       prop$ = this.propsStore.prop$;
@@ -464,6 +468,7 @@ describe('ComponentStore integration', () => {
     @Component({
       selector: 'child',
       template: '<div>{{prop$ | async}}</div>',
+      standalone: false,
     })
     class ChildComponent extends PropsStore implements Child {
       interval$ = interval(10);

diff --git a/modules/component/spec/let/let.directive.spec.ts b/modules/component/spec/let/let.directive.spec.ts
@@ -12,7 +12,6 @@ import {
   flushMicrotasks,
   TestBed,
   tick,
-  waitForAsync,
 } from '@angular/core/testing';
 import {
   BehaviorSubject,
@@ -27,16 +26,18 @@ import {
   throwError,
   timer,
 } from 'rxjs';
-import { LetDirective } from '../../src/let/let.directive';
 import { MockChangeDetectorRef, MockErrorHandler } from '../fixtures/fixtures';
 import { stripSpaces } from '../helpers';
+import { JsonPipe } from '@angular/common';
+import { LetDirective } from '../..';
 
 @Component({
   template: `
     <ng-container *ngrxLet="value$ as value">{{
       value === null ? 'null' : (value | json) || 'undefined'
     }}</ng-container>
   `,
+  imports: [JsonPipe, LetDirective],
 })
 class LetDirectiveTestComponent {
   value$: unknown;
@@ -48,6 +49,7 @@ class LetDirectiveTestComponent {
       error === undefined ? 'undefined' : error
     }}</ng-container>
   `,
+  imports: [LetDirective],
 })
 class LetDirectiveTestErrorComponent {
   value$ = of(42);
@@ -59,6 +61,7 @@ class LetDirectiveTestErrorComponent {
       complete
     }}</ng-container>
   `,
+  imports: [LetDirective],
 })
 class LetDirectiveTestCompleteComponent {
   value$ = of(42);
@@ -68,6 +71,7 @@ class LetDirectiveTestCompleteComponent {
   template: `
     <ng-container *ngrxLet="value$ as value">{{ value }}</ng-container>
   `,
+  imports: [LetDirective],
 })
 class LetDirectiveTestSuspenseComponent {
   value$ = of(42);
@@ -80,6 +84,7 @@ class LetDirectiveTestSuspenseComponent {
     }}</ng-container>
     <ng-template #loading>Loading...</ng-template>
   `,
+  imports: [LetDirective],
 })
 class LetDirectiveTestSuspenseTplComponent {
   value$ = of(42);
@@ -100,6 +105,7 @@ export class RecursiveDirective {
       value
     }}</ng-container>
   `,
+  imports: [RecursiveDirective, LetDirective],
 })
 class LetDirectiveTestRecursionComponent {
   constructor(public subject: BehaviorSubject<number>) {}
@@ -117,8 +123,6 @@ let componentNativeElement: any;
 
 const setupLetDirectiveTestComponent = (): void => {
   TestBed.configureTestingModule({
-    declarations: [LetDirectiveTestComponent],
-    imports: [LetDirective],
     providers: [
       { provide: ChangeDetectorRef, useClass: MockChangeDetectorRef },
       TemplateRef,
@@ -135,8 +139,6 @@ const setupLetDirectiveTestComponent = (): void => {
 
 const setupLetDirectiveTestComponentError = (): void => {
   TestBed.configureTestingModule({
-    declarations: [LetDirectiveTestErrorComponent],
-    imports: [LetDirective],
     providers: [
       { provide: ChangeDetectorRef, useClass: MockChangeDetectorRef },
       { provide: ErrorHandler, useClass: MockErrorHandler },
@@ -155,8 +157,6 @@ const setupLetDirectiveTestComponentError = (): void => {
 
 const setupLetDirectiveTestComponentComplete = (): void => {
   TestBed.configureTestingModule({
-    declarations: [LetDirectiveTestCompleteComponent],
-    imports: [LetDirective],
     providers: [
       { provide: ChangeDetectorRef, useClass: MockChangeDetectorRef },
       TemplateRef,
@@ -174,8 +174,6 @@ const setupLetDirectiveTestComponentComplete = (): void => {
 
 const setupLetDirectiveTestComponentSuspense = (): void => {
   TestBed.configureTestingModule({
-    declarations: [LetDirectiveTestSuspenseComponent],
-    imports: [LetDirective],
     providers: [
       { provide: ChangeDetectorRef, useClass: MockChangeDetectorRef },
       { provide: ErrorHandler, useClass: MockErrorHandler },
@@ -194,8 +192,6 @@ const setupLetDirectiveTestComponentSuspense = (): void => {
 
 const setupLetDirectiveTestComponentSuspenseTpl = (): void => {
   TestBed.configureTestingModule({
-    declarations: [LetDirectiveTestSuspenseTplComponent],
-    imports: [LetDirective],
     providers: [
       { provide: ChangeDetectorRef, useClass: MockChangeDetectorRef },
       { provide: ErrorHandler, useClass: MockErrorHandler },
@@ -215,8 +211,6 @@ const setupLetDirectiveTestComponentSuspenseTpl = (): void => {
 const setupLetDirectiveTestRecursionComponent = (): void => {
   const subject = new BehaviorSubject(0);
   TestBed.configureTestingModule({
-    declarations: [LetDirectiveTestRecursionComponent, RecursiveDirective],
-    imports: [LetDirective],
     providers: [
       { provide: ChangeDetectorRef, useClass: MockChangeDetectorRef },
       TemplateRef,
@@ -234,7 +228,7 @@ const setupLetDirectiveTestRecursionComponent = (): void => {
 
 describe('LetDirective', () => {
   describe('when nexting values', () => {
-    beforeEach(waitForAsync(setupLetDirectiveTestComponent));
+    beforeEach(setupLetDirectiveTestComponent);
 
     it('should be instantiable', () => {
       expect(fixtureLetDirectiveTestComponent).toBeDefined();
@@ -402,7 +396,7 @@ describe('LetDirective', () => {
   });
 
   describe('when error', () => {
-    beforeEach(waitForAsync(setupLetDirectiveTestComponentError));
+    beforeEach(setupLetDirectiveTestComponentError);
 
     it('should render undefined when next event is emitted', () => {
       letDirectiveTestComponent.value$ = new BehaviorSubject(1);
@@ -432,7 +426,7 @@ describe('LetDirective', () => {
   });
 
   describe('when complete', () => {
-    beforeEach(waitForAsync(setupLetDirectiveTestComponentComplete));
+    beforeEach(setupLetDirectiveTestComponentComplete);
 
     it('should render true if completed', () => {
       letDirectiveTestComponent.value$ = EMPTY;
@@ -442,7 +436,7 @@ describe('LetDirective', () => {
   });
 
   describe('when suspense', () => {
-    beforeEach(waitForAsync(setupLetDirectiveTestComponentSuspense));
+    beforeEach(setupLetDirectiveTestComponentSuspense);
 
     it('should not render when first observable is in suspense state', fakeAsync(() => {
       letDirectiveTestComponent.value$ = of(true).pipe(delay(1000));
@@ -466,7 +460,7 @@ describe('LetDirective', () => {
   });
 
   describe('when suspense template is passed', () => {
-    beforeEach(waitForAsync(setupLetDirectiveTestComponentSuspenseTpl));
+    beforeEach(setupLetDirectiveTestComponentSuspenseTpl);
 
     it('should render main template when observable emits next event', () => {
       letDirectiveTestComponent.value$ = new BehaviorSubject('ngrx');
@@ -516,7 +510,7 @@ describe('LetDirective', () => {
   });
 
   describe('when rendering recursively', () => {
-    beforeEach(waitForAsync(setupLetDirectiveTestRecursionComponent));
+    beforeEach(setupLetDirectiveTestRecursionComponent);
 
     it('should render 2nd emitted value if the observable emits while the view is being rendered', fakeAsync(() => {
       fixtureLetDirectiveTestComponent.detectChanges();
@@ -536,15 +530,14 @@ describe('LetDirective', () => {
             vm.o1 + '-' + vm.o2
           }}</ng-container>
         `,
+        imports: [LetDirective],
       })
       class LetDirectiveTestComponent {
         o1$ = config.o1$;
         o2$ = config.o2$;
       }
 
       TestBed.configureTestingModule({
-        declarations: [LetDirectiveTestComponent],
-        imports: [LetDirective],
         providers: [
           { provide: ChangeDetectorRef, useClass: MockChangeDetectorRef },
           { provide: ErrorHandler, useClass: MockErrorHandler },

diff --git a/modules/component/spec/push/push.pipe.spec.ts b/modules/component/spec/push/push.pipe.spec.ts
@@ -24,11 +24,13 @@ import {
 import { PushPipe } from '../../src/push/push.pipe';
 import { MockChangeDetectorRef, MockErrorHandler } from '../fixtures/fixtures';
 import { stripSpaces, wrapWithSpace } from '../helpers';
+import { JsonPipe } from '@angular/common';
 
 let pushPipe: PushPipe;
 
 @Component({
   template: ` {{ (value$ | ngrxPush | json) || 'undefined' }} `,
+  imports: [PushPipe, JsonPipe],
 })
 class PushPipeTestComponent {
   value$: unknown = of(42);
@@ -200,8 +202,6 @@ describe('PushPipe', () => {
   describe('used as a Pipe', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
-        declarations: [PushPipeTestComponent],
-        imports: [PushPipe],
         providers: [{ provide: ErrorHandler, useClass: MockErrorHandler }],
       });
 

diff --git a/modules/data/schematics/ng-add/index.spec.ts b/modules/data/schematics/ng-add/index.spec.ts
@@ -121,15 +121,15 @@ describe('Data ng-add Schematic', () => {
 
     const tree = await schematicRunner.runSchematic('ng-add', options, appTree);
     const content = tree.readContent(`${projectPath}/src/app/app.module.ts`);
-    expect(content).toMatch(/EntityDataModule\n/);
+    expect(content).toMatch(/EntityDataModule/);
   });
 
   it('should register EntityDataModuleWithoutEffects in the provided module', async () => {
     const options = { ...defaultOptions, effects: false, entityConfig: false };
 
     const tree = await schematicRunner.runSchematic('ng-add', options, appTree);
     const content = tree.readContent(`${projectPath}/src/app/app.module.ts`);
-    expect(content).toMatch(/EntityDataModuleWithoutEffects\n/);
+    expect(content).toMatch(/EntityDataModuleWithoutEffects/);
   });
 
   describe('Migration of ngrx-data', () => {

diff --git a/modules/router-store/spec/utils.ts b/modules/router-store/spec/utils.ts
@@ -4,6 +4,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { StoreModule } from '@ngrx/store';
 
 import { StoreRouterConfig, StoreRouterConnectingModule } from '../src';
+import { RouterOutlet } from '@angular/router';
 
 export function createTestModule(
   opts: {
@@ -17,6 +18,7 @@ export function createTestModule(
   @Component({
     selector: 'test-app',
     template: '<router-outlet></router-outlet>',
+    imports: [RouterOutlet],
   })
   class AppComponent {}
 
@@ -27,7 +29,6 @@ export function createTestModule(
   class SimpleComponent {}
 
   TestBed.configureTestingModule({
-    declarations: [AppComponent, SimpleComponent],
     imports: [
       StoreModule.forRoot(opts.reducers),
       RouterTestingModule.withRoutes([

diff --git a/modules/schematics/src/component-store/__snapshots__/index.spec.ts.snap b/modules/schematics/src/component-store/__snapshots__/index.spec.ts.snap
@@ -61,6 +61,7 @@ import { FooStore } from './foo/foo.store';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
+  standalone: false,
   styleUrl: './app.component.css',
   providers: [FooStore]
 })

diff --git a/modules/schematics/src/container/__snapshots__/index.spec.ts.snap b/modules/schematics/src/container/__snapshots__/index.spec.ts.snap
@@ -16,7 +16,6 @@ import * as fromStore from '../reducers';
 
 @Component({
   selector: 'app-foo',
-  standalone: true,
   imports: [],
   templateUrl: './foo.component.html',
   styleUrl: './foo.component.css'
@@ -33,7 +32,6 @@ import { Store } from '@ngrx/store';
 
 @Component({
   selector: 'app-foo',
-  standalone: true,
   imports: [],
   templateUrl: './foo.component.html',
   styleUrl: './foo.component.css'
@@ -115,13 +113,12 @@ describe('FooComponent', () => {
 "
 `;
 
-exports[`Container Schematic standalone should create a standalone component if true 1`] = `
+exports[`Container Schematic standalone should be standalone by default 1`] = `
 "import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 
 @Component({
   selector: 'app-foo',
-  standalone: true,
   imports: [],
   templateUrl: './foo.component.html',
   styleUrl: './foo.component.css'
@@ -131,3 +128,20 @@ export class FooComponent {
 }
 "
 `;
+
+exports[`Container Schematic standalone should create a non-standalone component if false 1`] = `
+"import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'app-foo',
+  standalone: false,
+  
+  templateUrl: './foo.component.html',
+  styleUrl: './foo.component.css'
+})
+export class FooComponent {
+  constructor(private store: Store) {}
+}
+"
+`;
diff --git a/modules/schematics/src/container/index.spec.ts b/modules/schematics/src/container/index.spec.ts
@@ -117,8 +117,8 @@ describe('Container Schematic', () => {
   });
 
   describe('standalone', () => {
-    it('should be disabled by default', async () => {
-      const options = { ...defaultOptions, standalone: false };
+    it('should be standalone by default', async () => {
+      const options = { ...defaultOptions };
       const tree = await schematicRunner.runSchematic(
         'container',
         options,
@@ -127,11 +127,12 @@ describe('Container Schematic', () => {
       const content = tree.readContent(
         `${projectPath}/src/app/foo/foo.component.ts`
       );
-      expect(content).not.toMatch(/standalone: true/);
+      expect(content).not.toMatch(/standalone/);
+      expect(content).toMatchSnapshot();
     });
 
-    it('should create a standalone component if true', async () => {
-      const options = { ...defaultOptions, standalone: true };
+    it('should create a non-standalone component if false', async () => {
+      const options = { ...defaultOptions, standalone: false };
       const tree = await schematicRunner.runSchematic(
         'container',
         options,
@@ -140,7 +141,7 @@ describe('Container Schematic', () => {
       const content = tree.readContent(
         `${projectPath}/src/app/foo/foo.component.ts`
       );
-      expect(content).toMatch(/standalone: true/);
+      expect(content).toMatch(/standalone: false/);
       expect(content).toMatchSnapshot();
     });
   });