feat: upgrade Angular dependencies to v17 pre-release versions (#4068)

BREAKING CHANGES:

The minimum required version of Angular has been updated

BEFORE:

The minimum required version of Angular is 16.x

AFTER:

The minimum required version of Angular is 17.x

build/tasks.ts

@@ -10,7 +10,8 @@ import { ncp } from 'ncp';
  */
 export async function copySchematicsCore(config: Config) {
   (ncp as any).limit = 1;
-  const filter = (name: string) => !name.endsWith('.eslintrc.json');
+  const filter = (name: string) =>
+    !name.endsWith('.eslintrc.json') && !name.endsWith('project.json');
 
   for (let pkg of util.getTopLevelPackages(config)) {
     const packageJson = fs

modules/component-store/schematics-core/utility/project.ts

@@ -67,9 +67,9 @@ export function getProjectMainFile(
   const project = getProject(host, options);
   const projectOptions = project.architect['build'].options;
 
-  if (!projectOptions?.main) {
-    throw new SchematicsException(`Could not find the main file`);
+  if (!projectOptions?.main && !projectOptions?.browser) {
+    throw new SchematicsException(`Could not find the main file ${project}`);
   }
 
-  return projectOptions.main as string;
+  return (projectOptions.browser || projectOptions.main) as string;
 }

modules/component/schematics-core/utility/project.ts

@@ -67,9 +67,9 @@ export function getProjectMainFile(
   const project = getProject(host, options);
   const projectOptions = project.architect['build'].options;
 
-  if (!projectOptions?.main) {
-    throw new SchematicsException(`Could not find the main file`);
+  if (!projectOptions?.main && !projectOptions?.browser) {
+    throw new SchematicsException(`Could not find the main file ${project}`);
   }
 
-  return projectOptions.main as string;
+  return (projectOptions.browser || projectOptions.main) as string;
 }

modules/data/schematics-core/utility/project.ts

@@ -67,9 +67,9 @@ export function getProjectMainFile(
   const project = getProject(host, options);
   const projectOptions = project.architect['build'].options;
 
-  if (!projectOptions?.main) {
-    throw new SchematicsException(`Could not find the main file`);
+  if (!projectOptions?.main && !projectOptions?.browser) {
+    throw new SchematicsException(`Could not find the main file ${project}`);
   }
 
-  return projectOptions.main as string;
+  return (projectOptions.browser || projectOptions.main) as string;
 }

modules/effects/schematics-core/utility/project.ts

@@ -67,9 +67,9 @@ export function getProjectMainFile(
   const project = getProject(host, options);
   const projectOptions = project.architect['build'].options;
 
-  if (!projectOptions?.main) {
-    throw new SchematicsException(`Could not find the main file`);
+  if (!projectOptions?.main && !projectOptions?.browser) {
+    throw new SchematicsException(`Could not find the main file ${project}`);
   }
 
-  return projectOptions.main as string;
+  return (projectOptions.browser || projectOptions.main) as string;
 }

modules/entity/schematics-core/utility/project.ts

@@ -67,9 +67,9 @@ export function getProjectMainFile(
   const project = getProject(host, options);
   const projectOptions = project.architect['build'].options;
 
-  if (!projectOptions?.main) {
-    throw new SchematicsException(`Could not find the main file`);
+  if (!projectOptions?.main && !projectOptions?.browser) {
+    throw new SchematicsException(`Could not find the main file ${project}`);
   }
 
-  return projectOptions.main as string;
+  return (projectOptions.browser || projectOptions.main) as string;
 }

modules/entity/test-setup.ts

@@ -1 +1,2 @@
+import 'zone.js/plugins/zone-legacy';
 import 'jest-preset-angular/setup-jest';

modules/router-store/schematics-core/utility/project.ts

@@ -67,9 +67,9 @@ export function getProjectMainFile(
   const project = getProject(host, options);
   const projectOptions = project.architect['build'].options;
 
-  if (!projectOptions?.main) {
-    throw new SchematicsException(`Could not find the main file`);
+  if (!projectOptions?.main && !projectOptions?.browser) {
+    throw new SchematicsException(`Could not find the main file ${project}`);
   }
 
-  return projectOptions.main as string;
+  return (projectOptions.browser || projectOptions.main) as string;
 }

modules/schematics-core/testing/create-workspace.ts

@@ -17,6 +17,7 @@ export const defaultAppOptions = {
   routing: false,
   style: 'css',
   skipTests: false,
+  standalone: false,
 };
 
 const defaultLibOptions = {

modules/schematics-core/utility/project.ts

@@ -67,9 +67,9 @@ export function getProjectMainFile(
   const project = getProject(host, options);
   const projectOptions = project.architect['build'].options;
 
-  if (!projectOptions?.main) {
-    throw new SchematicsException(`Could not find the main file`);
+  if (!projectOptions?.main && !projectOptions?.browser) {
+    throw new SchematicsException(`Could not find the main file ${project}`);
   }
 
-  return projectOptions.main as string;
+  return (projectOptions.browser || projectOptions.main) as string;
 }

modules/schematics/schematics-core/utility/project.ts

@@ -67,9 +67,9 @@ export function getProjectMainFile(
   const project = getProject(host, options);
   const projectOptions = project.architect['build'].options;
 
-  if (!projectOptions?.main) {
-    throw new SchematicsException(`Could not find the main file`);
+  if (!projectOptions?.main && !projectOptions?.browser) {
+    throw new SchematicsException(`Could not find the main file ${project}`);
   }
 
-  return projectOptions.main as string;
+  return (projectOptions.browser || projectOptions.main) as string;
 }

modules/schematics/src/container/__snapshots__/index.spec.ts.snap

@@ -11,11 +11,14 @@ exports[`Container Schematic display-block should create add style if true 1`] =
 
 exports[`Container Schematic should import Store into the component 1`] = `
 "import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { Store } from '@ngrx/store';
 import * as fromStore from '../reducers';
 
 @Component({
   selector: 'app-foo',
+  standalone: true,
+  imports: [CommonModule],
   templateUrl: './foo.component.html',
   styleUrls: ['./foo.component.css']
 })
@@ -27,10 +30,13 @@ export class FooComponent {
 
 exports[`Container Schematic should respect the state option if not provided 1`] = `
 "import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { Store } from '@ngrx/store';
 
 @Component({
   selector: 'app-foo',
+  standalone: true,
+  imports: [CommonModule],
   templateUrl: './foo.component.html',
   styleUrls: ['./foo.component.css']
 })

modules/signals/schematics-core/utility/project.ts

@@ -67,9 +67,9 @@ export function getProjectMainFile(
   const project = getProject(host, options);
   const projectOptions = project.architect['build'].options;
 
-  if (!projectOptions?.main) {
-    throw new SchematicsException(`Could not find the main file`);
+  if (!projectOptions?.main && !projectOptions?.browser) {
+    throw new SchematicsException(`Could not find the main file ${project}`);
   }
 
-  return projectOptions.main as string;
+  return (projectOptions.browser || projectOptions.main) as string;
 }

modules/store-devtools/schematics-core/utility/project.ts

@@ -67,9 +67,9 @@ export function getProjectMainFile(
   const project = getProject(host, options);
   const projectOptions = project.architect['build'].options;
 
-  if (!projectOptions?.main) {
-    throw new SchematicsException(`Could not find the main file`);
+  if (!projectOptions?.main && !projectOptions?.browser) {
+    throw new SchematicsException(`Could not find the main file ${project}`);
   }
 
-  return projectOptions.main as string;
+  return (projectOptions.browser || projectOptions.main) as string;
 }

modules/store/schematics-core/utility/project.ts

@@ -67,9 +67,9 @@ export function getProjectMainFile(
   const project = getProject(host, options);
   const projectOptions = project.architect['build'].options;
 
-  if (!projectOptions?.main) {
-    throw new SchematicsException(`Could not find the main file`);
+  if (!projectOptions?.main && !projectOptions?.browser) {
+    throw new SchematicsException(`Could not find the main file ${project}`);
   }
 
-  return projectOptions.main as string;
+  return (projectOptions.browser || projectOptions.main) as string;
 }

modules/store/spec/selector.spec.ts

@@ -532,6 +532,7 @@ describe('Selectors', () => {
           expect(warnSpy).not.toHaveBeenCalled();
 
           ngSpy.mockReset();
+          ngSpy.mockReturnValue(true);
         });
 
         it('the feature key exist but is falsy', () => {
@@ -543,6 +544,7 @@ describe('Selectors', () => {
           expect(warnSpy).not.toHaveBeenCalled();
 
           ngSpy.mockReset();
+          ngSpy.mockReturnValue(true);
         });
 
         it('not in development mode', () => {
@@ -554,6 +556,7 @@ describe('Selectors', () => {
           expect(warnSpy).not.toHaveBeenCalled();
 
           ngSpy.mockReset();
+          ngSpy.mockReturnValue(true);
         });
       });
 

modules/store/test-setup.ts

@@ -1 +1,2 @@
+import 'zone.js/plugins/zone-legacy';
 import 'jest-preset-angular/setup-jest';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrx/platform",
-  "version": "16.3.0",
+  "version": "17.0.0-beta.0",
   "description": "monorepo for ngrx development",
   "scripts": {
     "ng": "ng",
@@ -29,7 +29,7 @@
     "prepare": "husky install"
   },
   "engines": {
-    "node": "^16.13.0 || >=18.10.0",
+    "node": ">=18.13.0",
     "yarn": ">=1.22.4 <2",
     "npm": "Please use yarn instead of NPM to install dependencies"
   },
@@ -66,17 +66,17 @@
     ]
   },
   "dependencies": {
-    "@angular/animations": "16.2.3",
-    "@angular/cdk": "16.2.2",
-    "@angular/common": "16.2.3",
-    "@angular/compiler": "16.2.3",
-    "@angular/core": "16.2.3",
-    "@angular/forms": "16.2.3",
-    "@angular/material": "16.2.2",
-    "@angular/platform-browser": "16.2.3",
-    "@angular/platform-browser-dynamic": "16.2.3",
-    "@angular/platform-server": "16.2.3",
-    "@angular/router": "16.2.3",
+    "@angular/animations": "17.0.0-next.8",
+    "@angular/cdk": "17.0.0-next.7",
+    "@angular/common": "17.0.0-next.8",
+    "@angular/compiler": "17.0.0-next.8",
+    "@angular/core": "17.0.0-next.8",
+    "@angular/forms": "17.0.0-next.8",
+    "@angular/material": "17.0.0-next.7",
+    "@angular/platform-browser": "17.0.0-next.8",
+    "@angular/platform-browser-dynamic": "17.0.0-next.8",
+    "@angular/platform-server": "17.0.0-next.8",
+    "@angular/router": "17.0.0-next.8",
     "@nx/angular": "16.8.1",
     "ajv-formats": "^2.1.1",
     "core-js": "^2.5.4",
@@ -86,29 +86,28 @@
     "semver": "^7.3.6",
     "strip-json-comments": "3.1.1",
     "tslib": "^2.3.1",
-    "zone.js": "0.13.0"
+    "zone.js": "0.14.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "16.2.1",
-    "@angular-devkit/core": "16.2.1",
-    "@angular-devkit/schematics": "16.2.1",
+    "@angular-devkit/build-angular": "17.0.0-next.9",
+    "@angular-devkit/core": "17.0.0-next.9",
+    "@angular-devkit/schematics": "17.0.0-next.9",
     "@angular-eslint/builder": "16.1.0",
     "@angular-eslint/eslint-plugin": "16.1.0",
     "@angular-eslint/eslint-plugin-template": "16.1.0",
     "@angular-eslint/schematics": "16.1.0",
     "@angular-eslint/template-parser": "16.1.0",
-    "@angular/cli": "~16.2.0",
-    "@angular/compiler-cli": "16.2.3",
-    "@angular/language-service": "16.2.3",
-    "@babel/core": "7.9.0",
+    "@angular/cli": "17.0.0-next.9",
+    "@angular/compiler-cli": "17.0.0-next.8",
+    "@angular/language-service": "17.0.0-next.8",
     "@nx/cypress": "16.8.1",
     "@nx/eslint-plugin": "16.8.1",
     "@nx/jest": "16.8.1",
     "@nx/linter": "16.8.1",
     "@nx/node": "16.8.1",
     "@nx/workspace": "16.8.1",
     "@octokit/rest": "^15.17.0",
-    "@schematics/angular": "16.2.1",
+    "@schematics/angular": "17.0.0-next.9",
     "@testing-library/cypress": "9.0.0",
     "@types/fs-extra": "^2.1.0",
     "@types/glob": "^5.0.33",
@@ -150,7 +149,7 @@
     "jest": "29.5.0",
     "jest-environment-jsdom": "29.5.0",
     "jest-jasmine2": "29.5.0",
-    "jest-preset-angular": "13.1.1",
+    "jest-preset-angular": "13.1.2",
     "karma": "6.4.0",
     "karma-chrome-launcher": "3.1.0",
     "karma-cli": "~1.0.1",
@@ -159,7 +158,7 @@
     "karma-jasmine-html-reporter": "2.0.0",
     "lint-staged": "^8.0.0",
     "ncp": "^2.0.0",
-    "ng-packagr": "16.2.2",
+    "ng-packagr": "17.0.0-next.2",
     "npm-run-all": "^4.1.5",
     "nx": "16.8.1",
     "nx-cloud": "16.4.0",
@@ -185,7 +184,7 @@
     "tsconfig-paths": "^3.1.3",
     "tsickle": "^0.37.0",
     "tsutils": "2.27.2",
-    "typescript": "5.1.6",
+    "typescript": "~5.2.0",
     "uglify-js": "^3.1.9"
   },
   "collective": {

projects/ngrx.io/package.json

@@ -75,18 +75,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "16.0.0",
+    "@angular/animations": "16.2.9",
     "@angular/cdk": "16.0.0",
-    "@angular/common": "16.0.0",
-    "@angular/core": "16.0.0",
-    "@angular/elements": "16.0.0",
-    "@angular/fire": "^7.5.0",
-    "@angular/forms": "16.0.0",
+    "@angular/common": "16.2.9",
+    "@angular/core": "16.2.9",
+    "@angular/elements": "16.2.9",
+    "@angular/fire": "^7.6.1",
+    "@angular/forms": "16.2.9",
     "@angular/material": "16.0.0",
-    "@angular/platform-browser": "16.0.0",
-    "@angular/platform-browser-dynamic": "16.0.0",
-    "@angular/router": "16.0.0",
-    "@angular/service-worker": "16.0.0",
+    "@angular/platform-browser": "16.2.9",
+    "@angular/platform-browser-dynamic": "16.2.9",
+    "@angular/router": "16.2.9",
+    "@angular/service-worker": "16.2.9",
     "@webcomponents/custom-elements": "^1.2.0",
     "ajv-formats": "^2.1.1",
     "rxjs": "~7.5.0",
@@ -95,11 +95,11 @@
     "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "16.0.0",
-    "@angular/cli": "16.0.0",
-    "@angular/compiler": "16.0.0",
-    "@angular/compiler-cli": "16.0.0",
-    "@angular/language-service": "16.0.0",
+    "@angular-devkit/build-angular": "16.2.6",
+    "@angular/cli": "16.2.6",
+    "@angular/compiler": "16.2.9",
+    "@angular/compiler-cli": "16.2.9",
+    "@angular/language-service": "16.2.9",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.4",
     "@types/node": "18.16.3",
@@ -114,7 +114,7 @@
     "entities": "^1.1.1",
     "eslint": "^3.19.0",
     "eslint-plugin-jasmine": "^2.2.0",
-    "firebase-tools": "^8.2.0",
+    "firebase-tools": "^12.7.0",
     "fs-extra": "^2.1.2",
     "globby": "^6.1.0",
     "hast-util-is-element": "^1.0.0",
@@ -164,4 +164,4 @@
     "xregexp": "^4.0.0",
     "yargs": "^7.0.2"
   }
-}
+}