feat(angular): bump package versions for Angular 15

e2e/angular-core/src/ng-add.test.ts

@@ -184,13 +184,13 @@ describe('convert Angular CLI workspace to an Nx workspace', () => {
     // check project configuration
     const projectConfig = readJson(`apps/${project}/project.json`);
     expect(projectConfig.sourceRoot).toEqual(`apps/${project}/src`);
-    expect(projectConfig.targets.build).toEqual({
+    expect(projectConfig.targets.build).toStrictEqual({
       executor: '@angular-devkit/build-angular:browser',
       options: {
         outputPath: `dist/apps/${project}`,
         index: `apps/${project}/src/index.html`,
         main: `apps/${project}/src/main.ts`,
-        polyfills: `apps/${project}/src/polyfills.ts`,
+        polyfills: [`zone.js`],
         tsConfig: `apps/${project}/tsconfig.app.json`,
         assets: [
           `apps/${project}/src/favicon.ico`,
@@ -201,12 +201,6 @@ describe('convert Angular CLI workspace to an Nx workspace', () => {
       },
       configurations: {
         production: {
-          fileReplacements: [
-            {
-              replace: `apps/${project}/src/environments/environment.ts`,
-              with: `apps/${project}/src/environments/environment.prod.ts`,
-            },
-          ],
           budgets: [
             {
               type: 'initial',
@@ -240,13 +234,11 @@ describe('convert Angular CLI workspace to an Nx workspace', () => {
       },
       defaultConfiguration: 'development',
     });
-    expect(projectConfig.targets.test).toEqual({
+    expect(projectConfig.targets.test).toStrictEqual({
       executor: '@angular-devkit/build-angular:karma',
       options: {
-        main: `apps/${project}/src/test.ts`,
-        polyfills: `apps/${project}/src/polyfills.ts`,
+        polyfills: [`zone.js`, `zone.js/testing`],
         tsConfig: `apps/${project}/tsconfig.spec.json`,
-        karmaConfig: `apps/${project}/karma.conf.js`,
         assets: [
           `apps/${project}/src/favicon.ico`,
           `apps/${project}/src/assets`,

e2e/angular-extensions/src/misc.test.ts

@@ -35,7 +35,6 @@ describe('Move Angular Project', () => {
 
     // just check the output
     expect(moveOutput).toContain(`DELETE apps/${app1}`);
-    expect(moveOutput).toContain(`CREATE apps/${newPath}/.browserslistrc`);
     expect(moveOutput).toContain(`CREATE apps/${newPath}/jest.config.ts`);
     expect(moveOutput).toContain(`CREATE apps/${newPath}/tsconfig.app.json`);
     expect(moveOutput).toContain(`CREATE apps/${newPath}/tsconfig.json`);
@@ -44,7 +43,6 @@ describe('Move Angular Project', () => {
     expect(moveOutput).toContain(`CREATE apps/${newPath}/src/favicon.ico`);
     expect(moveOutput).toContain(`CREATE apps/${newPath}/src/index.html`);
     expect(moveOutput).toContain(`CREATE apps/${newPath}/src/main.ts`);
-    expect(moveOutput).toContain(`CREATE apps/${newPath}/src/polyfills.ts`);
     expect(moveOutput).toContain(`CREATE apps/${newPath}/src/styles.css`);
     expect(moveOutput).toContain(`CREATE apps/${newPath}/src/test-setup.ts`);
     expect(moveOutput).toContain(
@@ -54,12 +52,6 @@ describe('Move Angular Project', () => {
       `CREATE apps/${newPath}/src/app/app.module.ts`
     );
     expect(moveOutput).toContain(`CREATE apps/${newPath}/src/assets/.gitkeep`);
-    expect(moveOutput).toContain(
-      `CREATE apps/${newPath}/src/environments/environment.prod.ts`
-    );
-    expect(moveOutput).toContain(
-      `CREATE apps/${newPath}/src/environments/environment.ts`
-    );
   });
 
   /**

package.json

@@ -26,19 +26,19 @@
     "echo": "echo 123458"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "~0.1402.0",
-    "@angular-devkit/build-angular": "~14.2.0",
-    "@angular-devkit/core": "~14.2.0",
-    "@angular-devkit/schematics": "~14.2.0",
+    "@angular-devkit/architect": "~0.1500.0",
+    "@angular-devkit/build-angular": "~15.0.0",
+    "@angular-devkit/core": "~15.0.0",
+    "@angular-devkit/schematics": "~15.0.0",
     "@angular-eslint/eslint-plugin": "~14.0.4",
     "@angular-eslint/eslint-plugin-template": "~14.0.4",
     "@angular-eslint/template-parser": "~14.0.4",
-    "@angular/cli": "~14.2.0",
-    "@angular/common": "~14.2.0",
-    "@angular/compiler": "~14.2.0",
-    "@angular/compiler-cli": "~14.2.0",
-    "@angular/core": "~14.2.0",
-    "@angular/router": "~14.2.0",
+    "@angular/cli": "~15.0.0",
+    "@angular/common": "~15.0.0",
+    "@angular/compiler": "~15.0.0",
+    "@angular/compiler-cli": "~15.0.0",
+    "@angular/core": "~15.0.0",
+    "@angular/router": "~15.0.0",
     "@babel/core": "^7.15.0",
     "@babel/helper-create-regexp-features-plugin": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
@@ -74,7 +74,7 @@
     "@rollup/plugin-image": "^2.1.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
-    "@schematics/angular": "~14.2.0",
+    "@schematics/angular": "~15.0.0",
     "@storybook/addon-essentials": "~6.5.9",
     "@storybook/angular": "^6.5.12",
     "@storybook/builder-webpack5": "~6.5.9",
@@ -121,6 +121,7 @@
     "autoprefixer": "10.4.12",
     "babel-jest": "28.1.3",
     "babel-loader": "^8.2.2",
+    "browserslist": "^4.21.4",
     "chalk": "4.1.0",
     "chokidar": "^3.5.1",
     "commitizen": "^4.0.3",
@@ -185,7 +186,7 @@
     "mini-css-extract-plugin": "~2.4.7",
     "minimatch": "3.0.5",
     "next-sitemap": "^3.1.10",
-    "ng-packagr": "~14.2.0",
+    "ng-packagr": "~15.0.0",
     "node-fetch": "^2.6.7",
     "nx": "15.1.0-beta.2",
     "open": "^8.4.0",
@@ -241,7 +242,7 @@
     "url-loader": "^4.1.1",
     "verdaccio": "^5.0.4",
     "vite": "^3.2.3",
-    "webpack": "^5.58.1",
+    "webpack": "^5.75.0",
     "webpack-dev-server": "^4.9.3",
     "webpack-merge": "^5.8.0",
     "webpack-node-externals": "^3.0.0",

packages/angular/migrations.json

@@ -190,6 +190,42 @@
       "version": "15.0.0-beta.1",
       "description": "Stop hashing karma spec files and config files for build targets and dependent tasks",
       "factory": "./src/migrations/update-15-0-0/add-karma-inputs"
+    },
+    "update-angular-cli-version-15-0-0": {
+      "cli": "nx",
+      "version": "15.2.0-beta.0",
+      "description": "Update the @angular/cli package version to ~15.0.0.",
+      "factory": "./src/migrations/update-15-2-0/update-angular-cli"
+    },
+    "remove-browserlist-config": {
+      "cli": "nx",
+      "version": "15.2.0-beta.0",
+      "description": "Remove browserlist config as it's handled by build-angular",
+      "factory": "./src/migrations/update-15-2-0/remove-browserlist-config"
+    },
+    "update-typescript-target": {
+      "cli": "nx",
+      "version": "15.2.0-beta.0",
+      "description": "Update typescript target to ES2022",
+      "factory": "./src/migrations/update-15-2-0/update-typescript-target"
+    },
+    "update-workspace-config": {
+      "cli": "nx",
+      "version": "15.2.0-beta.0",
+      "description": "Remove bundleDependencies from server targets",
+      "factory": "./src/migrations/update-15-2-0/update-workspace-config"
+    },
+    "update-platform-server-exports": {
+      "cli": "ng",
+      "version": "15.2.0-beta.0",
+      "description": "Remove exported `@angular/platform-server` `renderModule` method. The `renderModule` method is now exported by the Angular CLI.",
+      "factory": "./src/migrations/update-15-2-0/remove-platform-server-exports"
+    },
+    "update-karma-main-file": {
+      "cli": "ng",
+      "version": "15.2.0-beta.0",
+      "description": "Remove no longer needed require calls in Karma builder main file.",
+      "factory": "./src/migrations/update-15-2-0/update-karma-main-file"
     }
   },
   "packageJsonUpdates": {
@@ -1557,6 +1593,63 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "15.2.0": {
+      "version": "15.2.0-beta.0",
+      "packages": {
+        "@angular-devkit/architect": {
+          "version": "~0.1500.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/build-angular": {
+          "version": "~15.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/build-webpack": {
+          "version": "~0.1500.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/core": {
+          "version": "~15.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/schematics": {
+          "version": "~15.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@schematics/angular": {
+          "version": "~15.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/core": {
+          "version": "~15.0.0",
+          "alwaysAddToPackageJson": true
+        },
+        "@angular/material": {
+          "version": "~15.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/cdk": {
+          "version": "~15.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@nguniversal/common": {
+          "version": "~15.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@nguniversal/express-engine": {
+          "version": "~15.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@nguniversal/builders": {
+          "version": "~15.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "ng-packagr": {
+          "version": "~15.0.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/angular/package.json

@@ -39,7 +39,7 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@angular-devkit/schematics": "~14.2.0",
+    "@angular-devkit/schematics": "~15.0.0",
     "@nrwl/cypress": "file:../cypress",
     "@nrwl/devkit": "file:../devkit",
     "@nrwl/jest": "file:../jest",
@@ -48,7 +48,7 @@
     "@nrwl/webpack": "file:../webpack",
     "@nrwl/workspace": "file:../workspace",
     "@phenomnomnominal/tsquery": "4.1.1",
-    "@schematics/angular": "~14.2.0",
+    "@schematics/angular": "~15.0.0",
     "chalk": "4.1.0",
     "chokidar": "^3.5.1",
     "http-server": "^14.1.0",
@@ -58,7 +58,7 @@
     "semver": "7.3.4",
     "ts-node": "10.9.1",
     "tsconfig-paths": "^3.9.0",
-    "webpack": "^5.58.1",
+    "webpack": "^5.75.0",
     "webpack-merge": "5.7.3"
   },
   "publishConfig": {

packages/angular/plugins/component-testing.ts

@@ -167,7 +167,12 @@ function normalizeBuildTargetOptions(
   const buildOptions = withSchemaDefaults(options);
 
   // paths need to be unix paths for angular devkit
-  buildOptions.polyfills = joinPathFragments(offset, buildOptions.polyfills);
+  buildOptions.polyfills =
+    Array.isArray(buildOptions.polyfills) && buildOptions.polyfills.length > 0
+      ? (buildOptions.polyfills as string[]).map((p) =>
+          joinPathFragments(offset, p)
+        )
+      : joinPathFragments(offset, buildOptions.polyfills as string);
   buildOptions.main = joinPathFragments(offset, buildOptions.main);
   buildOptions.index =
     typeof buildOptions.index === 'string'

packages/angular/src/builders/webpack-browser/schema.json

@@ -37,8 +37,22 @@
       "description": "The full path for the main entry point to the app, relative to the current workspace."
     },
     "polyfills": {
-      "type": "string",
-      "description": "The full path for the polyfills file, relative to the current workspace."
+      "description": "Polyfills to be included in the build.",
+      "oneOf": [
+        {
+          "type": "array",
+          "description": "A list of polyfills to include in the build. Can be a full path for a file, relative to the current workspace or module specifier. Example: 'zone.js'.",
+          "items": {
+            "type": "string",
+            "uniqueItems": true
+          },
+          "default": []
+        },
+        {
+          "type": "string",
+          "description": "The full path for the polyfills file, relative to the current workspace or a module specifier. Example: 'zone.js'."
+        }
+      ]
     },
     "tsConfig": {
       "type": "string",

packages/angular/src/executors/ng-packagr-lite/ng-packagr-adjustments/styles/stylesheet-processor.ts

@@ -17,7 +17,7 @@ import {
   saveCacheEntry,
 } from 'ng-packagr/lib/utils/cache';
 import * as log from 'ng-packagr/lib/utils/log';
-import { dirname, extname, join, resolve } from 'path';
+import { dirname, extname, join } from 'path';
 import * as postcssPresetEnv from 'postcss-preset-env';
 import * as postcssUrl from 'postcss-url';
 import {
@@ -26,6 +26,7 @@ import {
   tailwindDirectives,
   TailwindSetup,
 } from '../../../utilities/tailwindcss';
+import { pathToFileURL } from 'url';
 
 const postcss = require('postcss');
 
@@ -250,12 +251,10 @@ export class StylesheetProcessor {
       case '.sass':
       case '.scss': {
         return (await import('sass'))
-          .renderSync({
-            file: filePath,
-            data: css,
-            indentedSyntax: '.sass' === ext,
-            importer: customSassImporter,
-            includePaths: this.styleIncludePaths,
+          .compileString(css, {
+            url: pathToFileURL(filePath),
+            syntax: '.sass' === ext ? 'indented' : 'scss',
+            loadPaths: this.styleIncludePaths,
           })
           .css.toString();
       }
@@ -271,27 +270,6 @@ export class StylesheetProcessor {
 
         return content;
       }
-      case '.styl':
-      case '.stylus': {
-        const stylus = (await import('stylus')).default;
-
-        return (
-          stylus(css)
-            // add paths for resolve
-            .set('paths', [
-              this.basePath,
-              '.',
-              ...this.styleIncludePaths,
-              'node_modules',
-            ])
-            // add support for resolving plugins from node_modules
-            .set('filename', filePath)
-            // turn on url resolver in stylus, same as flag --resolve-url
-            .set('resolve url', true)
-            .define('url', stylus.resolver(undefined))
-            .render()
-        );
-      }
       case '.css':
       default:
         return css;
@@ -340,19 +318,3 @@ function transformSupportedBrowsersToTargets(
 
   return transformed.length ? transformed : undefined;
 }
-
-function customSassImporter(
-  url: string,
-  prev: string
-): { file: string; prev: string } | undefined {
-  // NB: Sass importer should always be sync as otherwise it will cause
-  // sass to go in the async path which is slower.
-  if (url[0] !== '~') {
-    return undefined;
-  }
-
-  return {
-    file: url.substring(1),
-    prev,
-  };
-}