ngrx · timdeschryver · Nov 11, 2025 · Nov 11, 2025 · Nov 11, 2025 · Nov 11, 2025
diff --git a/modules/component-store/migrations/18_0_0-beta/index.spec.ts b/modules/component-store/migrations/18_0_0-beta/index.spec.ts
@@ -5,7 +5,7 @@ import {
 import { createWorkspace } from '@ngrx/schematics-core/testing';
 import { tags } from '@angular-devkit/core';
 import * as path from 'path';
-import { LogEntry } from '@angular-devkit/core/src/logger';
+import { logging } from '@angular-devkit/core';
 
 describe('ComponentStore Migration to 18.0.0-beta', () => {
   const collectionPath = path.join(__dirname, '../migration.json');
@@ -196,7 +196,7 @@ class SomeEffects {}
       `;
 
     appTree.create('main.ts', input);
-    const logEntries: LogEntry[] = [];
+    const logEntries: logging.LogEntry[] = [];
     schematicRunner.logger.subscribe((logEntry) => logEntries.push(logEntry));
     await schematicRunner.runSchematic(
       `ngrx-component-store-migration-18-beta`,

diff --git a/modules/component-store/package.json b/modules/component-store/package.json
@@ -22,7 +22,7 @@
   },
   "homepage": "https://github.com/ngrx/platform#readme",
   "peerDependencies": {
-    "@angular/core": "^20.0.0",
+    "@angular/core": "^21.0.0-rc.1",
     "rxjs": "^6.5.3 || ^7.5.0"
   },
   "schematics": "./schematics/collection.json",

diff --git a/modules/component-store/schematics-core/eslint.config.mjs b/modules/component-store/schematics-core/eslint.config.mjs
@@ -0,0 +1,46 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import js from '@eslint/js';
+import baseConfig from '../../eslint.config.mjs';
+
+const compat = new FlatCompat({
+  baseDirectory: dirname(fileURLToPath(import.meta.url)),
+  recommendedConfig: js.configs.recommended,
+});
+
+export default [
+  {
+    ignores: ['**/dist'],
+  },
+  ...baseConfig,
+  ...compat
+    .config({
+      extends: [
+        'plugin:@nx/angular',
+        'plugin:@angular-eslint/template/process-inline-templates',
+      ],
+      plugins: ['@typescript-eslint'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.ts'],
+      rules: {
+        ...config.rules,
+        '@angular-eslint/directive-selector': 'off',
+        '@angular-eslint/component-selector': 'off',
+        'no-prototype-builtins': 'off',
+      },
+    })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/angular-template'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.html'],
+      rules: {
+        ...config.rules,
+      },
+    })),
+];
diff --git a/modules/component-store/schematics-core/tsconfig.lib.json b/modules/component-store/schematics-core/tsconfig.lib.json
@@ -3,7 +3,8 @@
     "baseUrl": ".",
     "stripInternal": true,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "module": "preserve",
+    "moduleResolution": "bundler",
     "downlevelIteration": true,
     "outDir": "../../dist/modules/schematics-score",
     "sourceMap": true,

diff --git a/modules/component-store/schematics-core/utility/project.ts b/modules/component-store/schematics-core/utility/project.ts
@@ -1,12 +1,12 @@
-import { TargetDefinition } from '@angular-devkit/core/src/workspace';
+import { workspaces } from '@angular-devkit/core';
 import { getWorkspace } from './config';
 import { SchematicsException, Tree } from '@angular-devkit/schematics';
 
 export interface WorkspaceProject {
   root: string;
   projectType: string;
   architect: {
-    [key: string]: TargetDefinition;
+    [key: string]: workspaces.TargetDefinition;
   };
 }
 

diff --git a/modules/component-store/spec/integration.spec.ts b/modules/component-store/spec/integration.spec.ts
@@ -105,7 +105,8 @@ describe('ComponentStore integration', () => {
       expect(state.prop2Changes).toEqual([undefined, 0, 1, 2, 3]);
 
       state.parent.isChildVisible = false;
-      state.fixture.detectChanges();
+      state.fixture.changeDetectorRef.markForCheck();
+      state.fixture.changeDetectorRef.detectChanges();
 
       tick(20);
       // Still at the same values, so effect stopped running
@@ -116,7 +117,8 @@ describe('ComponentStore integration', () => {
       state.child.init();
 
       state.parent.isChildVisible = false;
-      state.fixture.detectChanges();
+      state.fixture.changeDetectorRef.markForCheck();
+      state.fixture.changeDetectorRef.detectChanges();
 
       state.destroy();
 

diff --git a/modules/component-store/spec/types/utils.ts b/modules/component-store/spec/types/utils.ts
@@ -1,5 +1,6 @@
 export const compilerOptions = () => ({
-  moduleResolution: 'node',
+  module: 'preserve',
+  moduleResolution: 'bundler',
   target: 'ES2022',
   baseUrl: '.',
   experimentalDecorators: true,

diff --git a/modules/component-store/tsconfig.build.json b/modules/component-store/tsconfig.build.json
@@ -4,8 +4,8 @@
     "declaration": true,
     "stripInternal": true,
     "experimentalDecorators": true,
-    "module": "ES2022",
-    "moduleResolution": "node",
+    "module": "preserve",
+    "moduleResolution": "bundler",
     "noEmitOnError": false,
     "noImplicitAny": true,
     "noImplicitReturns": true,

diff --git a/modules/component-store/tsconfig.schematics.json b/modules/component-store/tsconfig.schematics.json
@@ -4,7 +4,8 @@
     "rootDir": ".",
     "stripInternal": true,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "module": "preserve",
+    "moduleResolution": "bundler",
     "downlevelIteration": true,
     "outDir": "../../dist/modules/component-store",
     "paths": {

diff --git a/modules/component/package.json b/modules/component/package.json
@@ -20,8 +20,8 @@
   },
   "homepage": "https://github.com/ngrx/platform#readme",
   "peerDependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
+    "@angular/common": "^21.0.0-rc.1",
+    "@angular/core": "^21.0.0-rc.1",
     "rxjs": "^6.5.3 || ^7.5.0"
   },
   "schematics": "./schematics/collection.json",

diff --git a/modules/component/schematics-core/eslint.config.mjs b/modules/component/schematics-core/eslint.config.mjs
@@ -0,0 +1,46 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import js from '@eslint/js';
+import baseConfig from '../../eslint.config.mjs';
+
+const compat = new FlatCompat({
+  baseDirectory: dirname(fileURLToPath(import.meta.url)),
+  recommendedConfig: js.configs.recommended,
+});
+
+export default [
+  {
+    ignores: ['**/dist'],
+  },
+  ...baseConfig,
+  ...compat
+    .config({
+      extends: [
+        'plugin:@nx/angular',
+        'plugin:@angular-eslint/template/process-inline-templates',
+      ],
+      plugins: ['@typescript-eslint'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.ts'],
+      rules: {
+        ...config.rules,
+        '@angular-eslint/directive-selector': 'off',
+        '@angular-eslint/component-selector': 'off',
+        'no-prototype-builtins': 'off',
+      },
+    })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/angular-template'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.html'],
+      rules: {
+        ...config.rules,
+      },
+    })),
+];
diff --git a/modules/component/schematics-core/tsconfig.lib.json b/modules/component/schematics-core/tsconfig.lib.json
@@ -3,7 +3,8 @@
     "baseUrl": ".",
     "stripInternal": true,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "module": "preserve",
+    "moduleResolution": "bundler",
     "downlevelIteration": true,
     "outDir": "../../dist/modules/schematics-score",
     "sourceMap": true,

diff --git a/modules/component/schematics-core/utility/project.ts b/modules/component/schematics-core/utility/project.ts
@@ -1,12 +1,12 @@
-import { TargetDefinition } from '@angular-devkit/core/src/workspace';
+import { workspaces } from '@angular-devkit/core';
 import { getWorkspace } from './config';
 import { SchematicsException, Tree } from '@angular-devkit/schematics';
 
 export interface WorkspaceProject {
   root: string;
   projectType: string;
   architect: {
-    [key: string]: TargetDefinition;
+    [key: string]: workspaces.TargetDefinition;
   };
 }
 

diff --git a/modules/component/spec/let/let.directive.spec.ts b/modules/component/spec/let/let.directive.spec.ts
@@ -212,6 +212,11 @@ const setupLetDirectiveTestRecursionComponent = (): void => {
   componentNativeElement = fixtureLetDirectiveTestComponent.nativeElement;
 };
 
+function markAndDetect() {
+  fixtureLetDirectiveTestComponent.componentRef.changeDetectorRef.markForCheck();
+  fixtureLetDirectiveTestComponent.detectChanges();
+}
+
 describe('LetDirective', () => {
   describe('when nexting values', () => {
     beforeEach(setupLetDirectiveTestComponent);
@@ -323,7 +328,7 @@ describe('LetDirective', () => {
       fixtureLetDirectiveTestComponent.detectChanges();
       expect(componentNativeElement.textContent).toBe('42');
       letDirectiveTestComponent.value$ = NEVER;
-      fixtureLetDirectiveTestComponent.detectChanges();
+      markAndDetect();
       expect(componentNativeElement.textContent).toBe('');
     });
 
@@ -332,7 +337,7 @@ describe('LetDirective', () => {
       fixtureLetDirectiveTestComponent.detectChanges();
       expect(componentNativeElement.textContent).toBe('42');
       letDirectiveTestComponent.value$ = of(45);
-      fixtureLetDirectiveTestComponent.detectChanges();
+      markAndDetect();
       expect(componentNativeElement.textContent).toBe('45');
     });
 
@@ -367,7 +372,7 @@ describe('LetDirective', () => {
       fixtureLetDirectiveTestComponent.detectChanges();
       expect(componentNativeElement.textContent).toBe('100');
       letDirectiveTestComponent.value$ = 200;
-      fixtureLetDirectiveTestComponent.detectChanges();
+      markAndDetect();
       expect(componentNativeElement.textContent).toBe('200');
     });
 
@@ -376,7 +381,7 @@ describe('LetDirective', () => {
       fixtureLetDirectiveTestComponent.detectChanges();
       expect(componentNativeElement.textContent).toBe('"ngrx"');
       letDirectiveTestComponent.value$ = 'component';
-      fixtureLetDirectiveTestComponent.detectChanges();
+      markAndDetect();
       expect(componentNativeElement.textContent).toBe('"component"');
     });
   });
@@ -437,7 +442,7 @@ describe('LetDirective', () => {
       letDirectiveTestComponent.value$ = of(true);
       fixtureLetDirectiveTestComponent.detectChanges();
       letDirectiveTestComponent.value$ = of(false).pipe(delay(1000));
-      fixtureLetDirectiveTestComponent.detectChanges();
+      markAndDetect();
       expect(componentNativeElement.textContent).toBe('');
       tick(1000);
       fixtureLetDirectiveTestComponent.detectChanges();
@@ -484,10 +489,11 @@ describe('LetDirective', () => {
     it('should render suspense template when next observable is in suspense state', fakeAsync(() => {
       letDirectiveTestComponent.value$ = new BehaviorSubject('ngrx');
       fixtureLetDirectiveTestComponent.detectChanges();
+      expect(componentNativeElement.textContent).toBe('ngrx');
       letDirectiveTestComponent.value$ = timer(100).pipe(
         switchMap(() => throwError(() => 'ERROR!'))
       );
-      fixtureLetDirectiveTestComponent.detectChanges();
+      markAndDetect();
       expect(componentNativeElement.textContent).toBe('Loading...');
       tick(100);
       fixtureLetDirectiveTestComponent.detectChanges();

diff --git a/modules/component/spec/push/push.pipe.spec.ts b/modules/component/spec/push/push.pipe.spec.ts
@@ -53,6 +53,11 @@ const setupPushPipeComponent = () => {
   pushPipe = TestBed.inject(PushPipe);
 };
 
+function markAndDetect() {
+  fixturePushPipeTestComponent.componentRef.changeDetectorRef.markForCheck();
+  fixturePushPipeTestComponent.detectChanges();
+}
+
 describe('PushPipe', () => {
   describe('used as a Service', () => {
     beforeEach(waitForAsync(setupPushPipeComponent));
@@ -378,7 +383,7 @@ describe('PushPipe', () => {
         fixturePushPipeTestComponent.detectChanges();
         expect(componentNativeElement.textContent).toBe(wrapWithSpace('42'));
         pushPipeTestComponent.value$ = NEVER;
-        fixturePushPipeTestComponent.detectChanges();
+        markAndDetect();
         expect(componentNativeElement.textContent).toBe(
           wrapWithSpace('undefined')
         );
@@ -399,7 +404,7 @@ describe('PushPipe', () => {
         fixturePushPipeTestComponent.detectChanges();
         expect(componentNativeElement.textContent).toBe(wrapWithSpace('10'));
         pushPipeTestComponent.value$ = throwError(() => 'ERROR!');
-        fixturePushPipeTestComponent.detectChanges();
+        markAndDetect();
         expect(componentNativeElement.textContent).toBe(
           wrapWithSpace('undefined')
         );
@@ -412,7 +417,7 @@ describe('PushPipe', () => {
           wrapWithSpace('"ngrx"')
         );
         pushPipeTestComponent.value$ = 'component';
-        fixturePushPipeTestComponent.detectChanges();
+        markAndDetect();
         expect(componentNativeElement.textContent).toBe(
           wrapWithSpace('"component"')
         );
@@ -423,7 +428,7 @@ describe('PushPipe', () => {
         fixturePushPipeTestComponent.detectChanges();
         expect(componentNativeElement.textContent).toBe(wrapWithSpace('10'));
         pushPipeTestComponent.value$ = 100;
-        fixturePushPipeTestComponent.detectChanges();
+        markAndDetect();
         expect(componentNativeElement.textContent).toBe(wrapWithSpace('100'));
       });
     });

diff --git a/modules/component/spec/types/utils.ts b/modules/component/spec/types/utils.ts
@@ -1,8 +1,8 @@
 import { expecter } from 'ts-snippet';
 
 export const compilerOptions = () => ({
-  moduleResolution: 'node',
-  target: 'ES2022',
+  module: 'preserve',
+  moduleResolution: 'bundler',
   baseUrl: '.',
   experimentalDecorators: true,
   strict: true,

diff --git a/modules/component/tsconfig.build.json b/modules/component/tsconfig.build.json
@@ -6,8 +6,8 @@
     "experimentalDecorators": true,
     "strictPropertyInitialization": true,
     "strictNullChecks": true,
-    "module": "ES2022",
-    "moduleResolution": "node",
+    "module": "preserve",
+    "moduleResolution": "bundler",
     "noEmitOnError": false,
     "noImplicitAny": true,
     "noImplicitReturns": true,

diff --git a/modules/component/tsconfig.schematics.json b/modules/component/tsconfig.schematics.json
@@ -4,7 +4,8 @@
     "rootDir": ".",
     "stripInternal": true,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "module": "preserve",
+    "moduleResolution": "bundler",
     "downlevelIteration": true,
     "outDir": "../../dist/modules/component",
     "paths": {

diff --git a/modules/data/package.json b/modules/data/package.json
@@ -20,8 +20,8 @@
   },
   "homepage": "https://github.com/ngrx/platform#readme",
   "peerDependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
+    "@angular/common": "^21.0.0-rc.1",
+    "@angular/core": "^21.0.0-rc.1",
     "@ngrx/store": "20.1.0",
     "@ngrx/effects": "20.1.0",
     "@ngrx/entity": "20.1.0",