feat(angular): bump package versions for Angular 15

docs/generated/packages/angular.json

@@ -2558,8 +2558,19 @@
             "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",

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

@@ -189,7 +189,7 @@ describe('convert Angular CLI workspace to an Nx workspace', () => {
         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`,
@@ -200,12 +200,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',
@@ -243,7 +237,7 @@ describe('convert Angular CLI workspace to an Nx workspace', () => {
       executor: '@angular-devkit/build-angular:karma',
       options: {
         main: `apps/${project}/src/test.ts`,
-        polyfills: `apps/${project}/src/polyfills.ts`,
+        polyfills: [`zone.js`],
         tsConfig: `apps/${project}/tsconfig.spec.json`,
         karmaConfig: `apps/${project}/karma.conf.js`,
         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`);

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-next.3",
+    "@angular-devkit/build-angular": "~15.0.0-next.3",
+    "@angular-devkit/core": "~15.0.0-next.3",
+    "@angular-devkit/schematics": "~15.0.0-next.3",
     "@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-next.3",
+    "@angular/common": "~15.0.0-next.4",
+    "@angular/compiler": "~15.0.0-next.4",
+    "@angular/compiler-cli": "~15.0.0-next.4",
+    "@angular/core": "~15.0.0-next.4",
+    "@angular/router": "~15.0.0-next.4",
     "@babel/core": "^7.15.0",
     "@babel/helper-create-regexp-features-plugin": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
@@ -73,7 +73,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-next.3",
     "@storybook/addon-essentials": "~6.5.9",
     "@storybook/addon-knobs": "~6.3.0",
     "@storybook/angular": "~6.5.9",
@@ -187,7 +187,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-next.3",
     "node-fetch": "^2.6.7",
     "nx": "14.8.0",
     "open": "^8.4.0",
@@ -308,4 +308,3 @@
     "minimist": "^1.2.6"
   }
 }
-

packages/angular/migrations.json

@@ -184,6 +184,12 @@
       "version": "15.0.0-beta.0",
       "description": "Update the usages of @nrwl/angular/testing to import jasmine-marbles symbols from jasmine-marbles itself.",
       "factory": "./src/migrations/update-15-0-0/switch-to-jasmine-marbles"
+    },
+    "update-angular-cli-version-15-0-0": {
+      "cli": "nx",
+      "version": "16.0.0-beta.0",
+      "description": "Update the @angular/cli package version to ~15.0.0.",
+      "factory": "./src/migrations/update-16-0-0/update-angular-cli"
     }
   },
   "packageJsonUpdates": {
@@ -1551,6 +1557,51 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "16.0.0": {
+      "version": "16.0.0-beta.0",
+      "packages": {
+        "@angular-devkit/architect": {
+          "version": "~0.1500.0-next.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/build-angular": {
+          "version": "~15.0.0-next.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/build-webpack": {
+          "version": "~0.1500.0-next.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/core": {
+          "version": "~15.0.0-next.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/schematics": {
+          "version": "~15.0.0-next.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@schematics/angular": {
+          "version": "~15.0.0-next.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/core": {
+          "version": "~15.0.0-next.4",
+          "alwaysAddToPackageJson": true
+        },
+        "@angular/material": {
+          "version": "~15.0.0-next.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/cdk": {
+          "version": "~15.0.0-next.2",
+          "alwaysAddToPackageJson": false
+        },
+        "ng-packagr": {
+          "version": "~15.0.0-next.3",
+          "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-next.3",
     "@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-next.3",
     "chalk": "4.1.0",
     "chokidar": "^3.5.1",
     "http-server": "^14.1.0",

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 =
+    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

@@ -35,8 +35,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,
-  };
-}

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

@@ -26,6 +26,7 @@ import {
   tailwindDirectives,
   TailwindSetup,
 } from '../../../utilities/tailwindcss';
+import { pathToFileURL } from 'url';
 
 const postcss = require('postcss');
 
@@ -243,12 +244,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();
       }
@@ -264,27 +263,6 @@ export class StylesheetProcessor {
 
         return content;
       }
-      case '.styl':
-      case '.stylus': {
-        const stylus = await import('stylus');
-
-        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;
@@ -333,19 +311,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,
-  };
-}