Merge branch 'future/angular12' into future/modern-frameworks

addons/measure/src/util.ts

@@ -5,7 +5,8 @@ export const deepElementFromPoint = (x: number, y: number) => {
 
   const crawlShadows = (node: Element): Element => {
     if (node && node.shadowRoot) {
-      const nestedElement = node.shadowRoot.elementFromPoint(x, y);
+      // elementFromPoint() doesn't exist in ShadowRoot type
+      const nestedElement = (node.shadowRoot as any).elementFromPoint(x, y);
 
       // Nested node is same as the root one
       if (node.isEqualNode(nestedElement)) {

addons/storyshots/storyshots-core/package.json

@@ -59,8 +59,8 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@angular/core": "^11.2.0",
+    "@angular/core": "^13.3.6",
-    "@angular/platform-browser-dynamic": "^11.2.0",
+    "@angular/platform-browser-dynamic": "^13.3.6",
     "@emotion/jest": "^11.8.0",
     "@storybook/addon-docs": "6.5.0-beta.4",
     "@storybook/angular": "6.5.0-beta.4",

examples/angular-cli/.gitignore

@@ -1,15 +1,18 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
-# compiled output
+# Compiled output
 /dist
 /tmp
 /out-tsc
+/bazel-out
 
-# dependencies
+# Node
 /node_modules
+npm-debug.log
+yarn-error.log
 
 # IDEs and editors
-/.idea
+.idea/
 .project
 .classpath
 .c9/
@@ -17,25 +20,24 @@
 .settings/
 *.sublime-workspace
 
-# IDE - VSCode
+# Visual Studio Code
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+.history/*
 
-# misc
+# Miscellaneous
-/.sass-cache
+/.angular/cache
+.sass-cache/
 /connect.lock
 /coverage
 /libpeerconnection.log
-npm-debug.log
-yarn-error.log
 testem.log
 /typings
+documentation.json
 
-# System Files
+# System files
 .DS_Store
 Thumbs.db
-addon-jest.testresults.json
-documentation.json

examples/angular-cli/.storybook/tsconfig.json

@@ -1,10 +1,11 @@
 {
-  "extends": "../src/tsconfig.app.json",
+  "extends": "../tsconfig.app.json",
   "exclude": [
     "../src/karma.ts",
     "../src/**/*.spec.ts"
   ],
   "include": [
-    "../src/**/*"
+    "../src/**/*",
+    "preview.ts"
   ]
 }

examples/angular-cli/angular.json

@@ -19,13 +19,20 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.css", "src/styles.scss"],
             "stylePreprocessorOptions": {
               "includePaths": ["src/commons"]
             },
-            "scripts": []
+            "scripts": [],
+            "aot": false,
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -44,7 +51,8 @@
               "vendorChunk": false,
               "buildOptimizer": true
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -110,13 +118,13 @@
         "storybook": {
           "builder": "@storybook/angular:start-storybook",
           "options": {
-            "tsConfig": "src/tsconfig.app.json"
+            "tsConfig": "tsconfig.app.json"
           }
         },
         "build-storybook": {
           "builder": "@storybook/angular:build-storybook",
           "options": {
-            "tsConfig": "src/tsconfig.app.json"
+            "tsConfig": "tsconfig.app.json"
           }
         }
       }

examples/angular-cli/package.json

@@ -3,6 +3,11 @@
   "version": "6.5.0-beta.4",
   "private": true,
   "license": "MIT",
+  "workspaces": {
+    "nohoist": [
+      "**"
+    ]
+  },
   "scripts": {
     "build": "ng build",
     "build-storybook": "yarn storybook-prebuild && ng run angular-cli:build-storybook",
@@ -19,25 +24,25 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@angular/common": "^11.2.14",
+    "@angular/common": "^13.3.6",
-    "@angular/compiler": "^11.2.14",
+    "@angular/compiler": "^13.3.6",
-    "@angular/core": "^11.2.14",
+    "@angular/core": "^13.3.6",
-    "@angular/forms": "^11.2.14",
+    "@angular/forms": "^13.3.6",
-    "@angular/platform-browser": "^11.2.14",
+    "@angular/platform-browser": "^13.3.6",
-    "@angular/platform-browser-dynamic": "^11.2.14",
+    "@angular/platform-browser-dynamic": "^13.3.6",
-    "@ngrx/store": "^10.1.2",
+    "@ngrx/store": "^13.2.0",
     "core-js": "^3.8.2",
-    "rxjs": "^6.6.3",
+    "rxjs": "^6.6.7",
     "sass": "^1.43.4",
     "telejson": "^5.3.3",
-    "zone.js": "^0.11.3"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.13",
+    "@angular-devkit/build-angular": "^13.3.5",
-    "@angular-devkit/core": "^11.2.13",
+    "@angular-devkit/core": "^13.3.5",
-    "@angular/cli": "^11.2.13",
+    "@angular/cli": "^13.3.5",
-    "@angular/compiler-cli": "^11.2.14",
+    "@angular/compiler-cli": "^13.3.6",
-    "@angular/elements": "^11.2.14",
+    "@angular/elements": "^13.3.6",
     "@compodoc/compodoc": "^1.1.18",
     "@storybook/addon-a11y": "6.5.0-beta.4",
     "@storybook/addon-actions": "6.5.0-beta.4",

examples/angular-cli/src/main.ts

@@ -8,4 +8,7 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  // eslint-disable-next-line
+  .catch((err) => console.error(err));

examples/angular-cli/src/polyfills.ts

@@ -8,60 +8,45 @@
  *      file.
  *
  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
  *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ * Learn more in https://angular.io/guide/browser-support
  */
 
 /** *************************************************************************************************
  * BROWSER POLYFILLS
  */
 
-/* IE9, IE10 and IE11 requires all of the following polyfills. */
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/* Evergreen browsers require these. */
-import 'core-js/es/reflect';
-import 'core-js/proposals/reflect-metadata';
-
 /**
- * Required to support Web Animations `@angular/animation`.
+ * By default, zone.js will patch all possible macroTask and DomEvents
- * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
  */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /** *************************************************************************************************
- * Zone JS is required by Angular itself.
+ * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
 
 /** *************************************************************************************************
  * APPLICATION IMPORTS
  */
-
-/**
- * Date, currency, decimal and percent pipes.
- * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
- */
-// import 'intl';  // Run `npm install --save intl`.
-/**
- * Need to import at least one locale-data with intl.
- */
-// import 'intl/locale-data/jsonp/en';

examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot

@@ -3,7 +3,7 @@
 exports[`Storyshots Core / Story host styles With Args 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _ngcontent-a-c155=""
+    _ngcontent-a-c160=""
     ng-reflect-text="Button with custom styles"
   >
     <button>
@@ -16,7 +16,7 @@ exports[`Storyshots Core / Story host styles With Args 1`] = `
 exports[`Storyshots Core / Story host styles With story template 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _ngcontent-a-c154=""
+    _ngcontent-a-c159=""
     ng-reflect-text="Button with custom styles"
   >
     <button>

examples/angular-cli/src/tsconfig.app.json

@@ -1,15 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "baseUrl": "./",
-    "module": "es2015",
-    "types": [
-      "node"
-    ]
-  },
-  "exclude": [
-    "karma.ts",
-    "**/*.spec.ts"
-  ]
-}

examples/angular-cli/tsconfig.app.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ],
+  "exclude": [
+    "**/*.stories.*"
+  ]
+}

examples/angular-cli/tsconfig.json

@@ -6,22 +6,39 @@
   },
   "compileOnSave": false,
   "compilerOptions": {
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true,
+    "baseUrl": "./",
+    "declaration": false,
+    "downlevelIteration": true,
+    "emitDecoratorMetadata": true,
     "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "importHelpers": true,
+    "lib": [
+      "es2020",
+      "dom"
+    ],
+    "module": "es2020",
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": false,
+    "noPropertyAccessFromIndexSignature": false,
+    "outDir": "./dist/out-tsc",
     "skipLibCheck": true,
-    "target": "es5",
+    "sourceMap": true,
+    "strict": false,
+    "target": "es2017",
     "typeRoots": [
       "../../node_modules/@types",
       "node_modules/@types"
-    ],
-    "lib": [
-      "es2017",
-      "dom"
     ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
   }
 }

frameworks/angular/jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
   preset: 'jest-preset-angular',
   setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
+  transformIgnorePatterns: ['^.+\\.js$'],
 };

frameworks/angular/package.json

@@ -71,24 +71,25 @@
     "webpack": "5"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "~0.1102.0",
+    "@angular-devkit/architect": "^0.1303.5",
-    "@angular-devkit/build-angular": "~0.1102.13",
+    "@angular-devkit/build-angular": "^13.3.5",
-    "@angular-devkit/core": "^11.2.13",
+    "@angular-devkit/core": "^13.3.5",
-    "@angular/cli": "^11.2.14",
+    "@angular/cli": "^13.3.5",
-    "@angular/common": "^11.2.14",
+    "@angular/common": "^13.3.6",
-    "@angular/compiler": "^11.2.14",
+    "@angular/compiler": "^13.3.6",
-    "@angular/compiler-cli": "^11.2.14",
+    "@angular/compiler-cli": "^13.3.6",
-    "@angular/core": "^11.2.14",
+    "@angular/core": "^13.3.6",
-    "@angular/forms": "^11.2.14",
+    "@angular/elements": "^13.3.6",
-    "@angular/platform-browser": "^11.2.14",
+    "@angular/forms": "^13.3.6",
-    "@angular/platform-browser-dynamic": "^11.2.14",
+    "@angular/platform-browser": "^13.3.6",
-    "@nrwl/workspace": "^11.6.3",
+    "@angular/platform-browser-dynamic": "^13.3.6",
+    "@nrwl/workspace": "^14.1.4",
     "@types/autoprefixer": "^9.7.2",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
-    "jest": "^26.6.3",
+    "jest": "^27.5.1",
-    "jest-preset-angular": "^8.3.2",
+    "jest-preset-angular": "^12.0.0",
-    "jest-specific-snapshot": "^4.0.0",
+    "jest-specific-snapshot": "^5.0.0",
     "tmp": "^0.2.1",
     "typescript": "^4.6.3",
     "webpack": "5"

frameworks/angular/setup-jest.ts

@@ -1,4 +1,4 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import 'jest-preset-angular';
+import 'jest-preset-angular/setup-jest';
 
 global.EventSource = class {} as any;

frameworks/angular/src/builders/build-storybook/index.ts

@@ -36,7 +36,7 @@ export type StorybookBuilderOptions = JsonObject & {
 
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
 
-export default createBuilder(commandBuilder);
+export default createBuilder<any, any>(commandBuilder);
 
 function commandBuilder(
   options: StorybookBuilderOptions,

frameworks/angular/src/builders/start-storybook/index.ts

@@ -46,7 +46,7 @@ export type StorybookBuilderOptions = JsonObject & {
 
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
 
-export default createBuilder(commandBuilder);
+export default createBuilder<any, any>(commandBuilder);
 
 function commandBuilder(
   options: StorybookBuilderOptions,

frameworks/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts

@@ -6,7 +6,6 @@ import {
   Pipe,
   Type,
   ɵReflectionCapabilities as ReflectionCapabilities,
-  ɵCodegenComponentFactoryResolver,
 } from '@angular/core';
 
 const reflectionCapabilities = new ReflectionCapabilities();

frameworks/angular/src/server/angular-devkit-build-webpack.ts

@@ -106,7 +106,7 @@ const buildWebpackConfigOptions = async (
     getSystemPath(workspaceRootNormalized),
     projectBuildOptions.tsConfig as string
   );
-  const tsConfig = importAngularCliReadTsconfigUtil().readTsconfig(tsConfigPath);
+  const tsConfig = await importAngularCliReadTsconfigUtil().readTsconfig(tsConfigPath);
 
   const ts = await import('typescript');
   const scriptTarget = tsConfig.options.target || ts.ScriptTarget.ES5;
@@ -120,6 +120,9 @@ const buildWebpackConfigOptions = async (
     scripts: [],
     sourceMap: {},
     styles: [],
+    // Deleted in angular 12. Keep for compatibility with versions lower than angular 12
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     lazyModules: [],
 
     // Project Options
@@ -134,10 +137,15 @@ const buildWebpackConfigOptions = async (
 
     // Forced options
     statsJson: false,
+
+    // Deleted in angular 12. Keep for compatibility with versions lower than angular 12
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     forkTypeChecker: false,
   };
 
   return {
+    projectName: 'this-is-just-a-fake-name-for-getting-rid-of-the-error',
     root: getSystemPath(workspaceRootNormalized),
     // The dependency of `@angular-devkit/build-angular` to `@angular-devkit/core` is not exactly the same version as the one for storybook (node modules of node modules ^^)
     logger: createConsoleLogger() as unknown as WebpackConfigOptions['logger'],

frameworks/angular/src/server/framework-preset-angular-cli.test.ts

@@ -205,27 +205,47 @@ describe('framework-preset-angular-cli', () => {
       const baseWebpackConfig = newWebpackConfiguration();
       const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);
 
+      const expectedRules: any = [
+        {
+          oneOf: [
+            {
+              exclude: [],
+              use: expect.anything(),
+            },
+            {
+              include: [],
+              use: expect.anything(),
+            },
+          ],
+        },
+        { use: expect.anything() },
+      ];
       expect(webpackFinalConfig.module.rules).toEqual([
         {
-          exclude: [],
+          test: /\.(?:css)$/i,
-          test: /\.css$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          exclude: [],
+          test: /\.(?:scss)$/i,
-          test: /\.scss$|\.sass$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          exclude: [],
+          test: /\.(?:sass)$/i,
-          test: /\.less$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          exclude: [],
+          test: /\.(?:less)$/i,
-          test: /\.styl$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
+        {
+          test: /\.(?:styl)$/i,
+          rules: expectedRules,
+        },
+        { mimetype: 'text/css', use: expect.anything() },
+        { mimetype: 'text/x-scss', use: expect.anything() },
+        { mimetype: 'text/x-sass', use: expect.anything() },
+        { mimetype: 'text/x-less', use: expect.anything() },
+        { mimetype: 'text/x-stylus', use: expect.anything() },
         ...baseWebpackConfig.module.rules,
       ]);
     });
@@ -239,10 +259,12 @@ describe('framework-preset-angular-cli', () => {
           AnyComponentStyleBudgetChecker {
             "budgets": Array [],
           },
+          Object {
+            "apply": [Function],
+          },
           ContextReplacementPlugin {
-            "newContentRecursive": undefined,
+            "newContentCreateContextMap": [Function],
-            "newContentRegExp": undefined,
+            "newContentResource": "/Users/shilman/projects/baseline/storybook/app/angular/src/server/__mocks-ng-workspace__/minimal-config/$_lazy_route_resources",
-            "newContentResource": undefined,
             "resourceRegExp": /\\\\@angular\\(\\\\\\\\\\|\\\\/\\)core\\(\\\\\\\\\\|\\\\/\\)/,
           },
           DedupeModuleResolvePlugin {
@@ -275,26 +297,7 @@ describe('framework-preset-angular-cli', () => {
       expect(webpackFinalConfig.resolve.plugins).toMatchInlineSnapshot(`
         Array [
           TsconfigPathsPlugin {
-            "absoluteBaseUrl": "${(
+            "absoluteBaseUrl": "`);
-              getSystemPath(normalize(path.join(workspaceRoot, 'src'))) + path.sep
-            ).replace(/\\/g, '\\\\')}",
-            "baseUrl": "./",
-            "extensions": Array [
-              ".ts",
-              ".tsx",
-            ],
-            "log": Object {
-              "log": [Function],
-              "logError": [Function],
-              "logInfo": [Function],
-              "logWarning": [Function],
-            },
-            "matchPath": [Function],
-            "source": "described-resolve",
-            "target": "resolve",
-          },
-        ]
-      `);
     });
   });
   describe('when angular.json have "options.styles" config', () => {
@@ -328,51 +331,47 @@ describe('framework-preset-angular-cli', () => {
     it('should set webpack "module.rules"', async () => {
       const baseWebpackConfig = newWebpackConfiguration();
       const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);
-      const stylePaths = [
+      const expectedRules = [
-        path.join(workspaceRoot, 'src', 'styles.css'),
+        {
-        path.join(workspaceRoot, 'src', 'styles.scss'),
+          oneOf: [
+            {
+              exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+              use: expect.anything(),
+            },
+            {
+              include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+              use: expect.anything(),
+            },
+          ],
+        },
+        { use: expect.anything() },
       ];
       expect(webpackFinalConfig.module.rules).toEqual([
         {
-          exclude: stylePaths,
+          test: /\.(?:css)$/i,
-          test: /\.css$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          exclude: stylePaths,
+          test: /\.(?:scss)$/i,
-          test: /\.scss$|\.sass$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          exclude: stylePaths,
+          test: /\.(?:sass)$/i,
-          test: /\.less$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          exclude: stylePaths,
+          test: /\.(?:less)$/i,
-          test: /\.styl$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          include: stylePaths,
+          test: /\.(?:styl)$/i,
-          test: /\.css$/,
+          rules: expectedRules,
-          use: expect.anything(),
-        },
-        {
-          include: stylePaths,
-          test: /\.scss$|\.sass$/,
-          use: expect.anything(),
-        },
-        {
-          include: stylePaths,
-          test: /\.less$/,
-          use: expect.anything(),
-        },
-        {
-          include: stylePaths,
-          test: /\.styl$/,
-          use: expect.anything(),
         },
+        { mimetype: 'text/css', use: expect.anything() },
+        { mimetype: 'text/x-scss', use: expect.anything() },
+        { mimetype: 'text/x-sass', use: expect.anything() },
+        { mimetype: 'text/x-less', use: expect.anything() },
+        { mimetype: 'text/x-stylus', use: expect.anything() },
         ...baseWebpackConfig.module.rules,
       ]);
     });
@@ -427,47 +426,47 @@ describe('framework-preset-angular-cli', () => {
         path.join(workspaceRoot, 'src', 'styles.scss'),
       ];
 
+      const expectedRules: any = [
+        {
+          oneOf: [
+            {
+              exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+              use: expect.anything(),
+            },
+            {
+              include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+              use: expect.anything(),
+            },
+          ],
+        },
+        { use: expect.anything() },
+      ];
       expect(webpackFinalConfig.module.rules).toEqual([
         {
-          exclude: stylePaths,
+          test: /\.(?:css)$/i,
-          test: /\.css$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          exclude: stylePaths,
+          test: /\.(?:scss)$/i,
-          test: /\.scss$|\.sass$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          exclude: stylePaths,
+          test: /\.(?:sass)$/i,
-          test: /\.less$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          exclude: stylePaths,
+          test: /\.(?:less)$/i,
-          test: /\.styl$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          include: stylePaths,
+          test: /\.(?:styl)$/i,
-          test: /\.css$/,
+          rules: expectedRules,
-          use: expect.anything(),
-        },
-        {
-          include: stylePaths,
-          test: /\.scss$|\.sass$/,
-          use: expect.anything(),
-        },
-        {
-          include: stylePaths,
-          test: /\.less$/,
-          use: expect.anything(),
-        },
-        {
-          include: stylePaths,
-          test: /\.styl$/,
-          use: expect.anything(),
         },
+        { mimetype: 'text/css', use: expect.anything() },
+        { mimetype: 'text/x-scss', use: expect.anything() },
+        { mimetype: 'text/x-sass', use: expect.anything() },
+        { mimetype: 'text/x-less', use: expect.anything() },
+        { mimetype: 'text/x-stylus', use: expect.anything() },
         ...baseWebpackConfig.module.rules,
       ]);
     });
@@ -513,47 +512,47 @@ describe('framework-preset-angular-cli', () => {
         path.join(workspaceRoot, 'src', 'styles.scss'),
       ];
 
+      const expectedRules: any = [
+        {
+          oneOf: [
+            {
+              exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+              use: expect.anything(),
+            },
+            {
+              include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+              use: expect.anything(),
+            },
+          ],
+        },
+        { use: expect.anything() },
+      ];
       expect(webpackFinalConfig.module.rules).toEqual([
         {
-          exclude: stylePaths,
+          test: /\.(?:css)$/i,
-          test: /\.css$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          exclude: stylePaths,
+          test: /\.(?:scss)$/i,
-          test: /\.scss$|\.sass$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          exclude: stylePaths,
+          test: /\.(?:sass)$/i,
-          test: /\.less$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          exclude: stylePaths,
+          test: /\.(?:less)$/i,
-          test: /\.styl$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          include: stylePaths,
+          test: /\.(?:styl)$/i,
-          test: /\.css$/,
+          rules: expectedRules,
-          use: expect.anything(),
-        },
-        {
-          include: stylePaths,
-          test: /\.scss$|\.sass$/,
-          use: expect.anything(),
-        },
-        {
-          include: stylePaths,
-          test: /\.less$/,
-          use: expect.anything(),
-        },
-        {
-          include: stylePaths,
-          test: /\.styl$/,
-          use: expect.anything(),
         },
+        { mimetype: 'text/css', use: expect.anything() },
+        { mimetype: 'text/x-scss', use: expect.anything() },
+        { mimetype: 'text/x-sass', use: expect.anything() },
+        { mimetype: 'text/x-less', use: expect.anything() },
+        { mimetype: 'text/x-stylus', use: expect.anything() },
         ...baseWebpackConfig.module.rules,
       ]);
     });
@@ -587,27 +586,47 @@ describe('framework-preset-angular-cli', () => {
       const baseWebpackConfig = newWebpackConfiguration();
       const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);
 
+      const expectedRules: any = [
+        {
+          oneOf: [
+            {
+              exclude: [],
+              use: expect.anything(),
+            },
+            {
+              include: [],
+              use: expect.anything(),
+            },
+          ],
+        },
+        { use: expect.anything() },
+      ];
       expect(webpackFinalConfig.module.rules).toEqual([
         {
-          exclude: [],
+          test: /\.(?:css)$/i,
-          test: /\.css$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          exclude: [],
+          test: /\.(?:scss)$/i,
-          test: /\.scss$|\.sass$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          exclude: [],
+          test: /\.(?:sass)$/i,
-          test: /\.less$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
         {
-          exclude: [],
+          test: /\.(?:less)$/i,
-          test: /\.styl$/,
+          rules: expectedRules,
-          use: expect.anything(),
         },
+        {
+          test: /\.(?:styl)$/i,
+          rules: expectedRules,
+        },
+        { mimetype: 'text/css', use: expect.anything() },
+        { mimetype: 'text/x-scss', use: expect.anything() },
+        { mimetype: 'text/x-sass', use: expect.anything() },
+        { mimetype: 'text/x-less', use: expect.anything() },
+        { mimetype: 'text/x-stylus', use: expect.anything() },
         ...baseWebpackConfig.module.rules,
       ]);
     });

frameworks/angular/src/server/framework-preset-angular.ts

@@ -44,7 +44,7 @@ export async function webpack(
         },
         {
           test: /[/\\]@angular[/\\]core[/\\].+\.js$/,
-          parser: { system: true },
+          parser: { system: false },
         },
         {
           test: /\.html$/,

frameworks/angular/src/server/utils/normalize-asset-patterns.ts

@@ -16,8 +16,8 @@ import {
   relative,
   resolve,
 } from '@angular-devkit/core';
-
+import { AssetPattern } from '@angular-devkit/build-angular';
-import { AssetPattern, AssetPatternClass } from '@angular-devkit/build-angular/src/browser/schema';
+import { AssetPatternClass } from '@angular-devkit/build-angular/src/builders/browser/schema';
 
 export class MissingAssetSourceRootException extends BaseException {
   constructor(path: string) {

frameworks/angular/src/server/utils/normalize-optimization.ts

@@ -1,5 +1,4 @@
-import { OptimizationUnion } from '@angular-devkit/build-angular/src/browser/schema';
+import { OptimizationUnion } from '@angular-devkit/build-angular';
-
 import { NormalizedOptimizationOptions } from '@angular-devkit/build-angular/src/utils/normalize-optimization';
 import { moduleIsAvailable } from './module-is-available';
 

frameworks/angular/tsconfig.json

@@ -4,6 +4,10 @@
   "compilerOptions": {
     "target": "ES2020",
     "module": "CommonJS",
+    "lib": [
+      "es2020",
+      "dom"
+    ],
     "outDir": "dist",
     "types": ["node"],
     "rootDir": "./src",

lib/builder-webpack5/package.json

@@ -67,7 +67,7 @@
     "terser-webpack-plugin": "^5.3.1",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2",
-    "webpack": "^5.9.0",
+    "webpack": "5",
     "webpack-dev-middleware": "^5.3.1",
     "webpack-hot-middleware": "^2.25.1",
     "webpack-virtual-modules": "^0.4.3"

lib/manager-webpack5/package.json

@@ -66,7 +66,7 @@
     "terser-webpack-plugin": "^5.3.1",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2",
-    "webpack": "^5.9.0",
+    "webpack": "5",
     "webpack-dev-middleware": "^5.3.1",
     "webpack-virtual-modules": "^0.4.3"
   },

package.json

@@ -101,6 +101,7 @@
     "defaults"
   ],
   "resolutions": {
+    "@nrwl/cli": "12.3.4",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/experimental-utils": "5.3.0",
     "@typescript-eslint/parser": "^5.15.0",

presets/html-webpack/package.json

@@ -37,7 +37,8 @@
     "core-js": "^3.8.2",
     "html-loader": "^3.1.0",
     "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "react-dom": "16.14.0",
+    "webpack": "5"
   },
   "peerDependencies": {
     "@babel/core": "*"

presets/vue3-webpack/package.json

@@ -48,8 +48,7 @@
   },
   "devDependencies": {
     "@vue/compiler-sfc": "^3.2.33",
-    "vue": "^3.2.33",
+    "vue": "^3.2.33"
-    "webpack": "5"
   },
   "peerDependencies": {
     "@babel/core": "*",

tsconfig.json

@@ -23,6 +23,7 @@
     ]
   },
   "exclude": [
+    "dist",
     "**/dist",
     "node_modules",
     "**/node_modules",