feat(@angular-devkit/build-angular): integrate Angular compiler linker

package.json

@@ -64,21 +64,21 @@
     ]
   },
   "devDependencies": {
-    "@angular/animations": "11.1.0-next.3",
+    "@angular/animations": "11.1.0-next.4",
     "@angular/cdk": "11.0.3",
-    "@angular/common": "11.1.0-next.3",
-    "@angular/compiler": "11.1.0-next.3",
-    "@angular/compiler-cli": "11.1.0-next.3",
-    "@angular/core": "11.1.0-next.3",
+    "@angular/common": "11.1.0-next.4",
+    "@angular/compiler": "11.1.0-next.4",
+    "@angular/compiler-cli": "11.1.0-next.4",
+    "@angular/core": "11.1.0-next.4",
     "@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#8cfa1d0e3a36bad2e34ad6c0795cac6bc3816d72",
-    "@angular/forms": "11.1.0-next.3",
-    "@angular/localize": "11.1.0-next.3",
+    "@angular/forms": "11.1.0-next.4",
+    "@angular/localize": "11.1.0-next.4",
     "@angular/material": "11.0.3",
-    "@angular/platform-browser": "11.1.0-next.3",
-    "@angular/platform-browser-dynamic": "11.1.0-next.3",
-    "@angular/platform-server": "11.1.0-next.3",
-    "@angular/router": "11.1.0-next.3",
-    "@angular/service-worker": "11.1.0-next.3",
+    "@angular/platform-browser": "11.1.0-next.4",
+    "@angular/platform-browser-dynamic": "11.1.0-next.4",
+    "@angular/platform-server": "11.1.0-next.4",
+    "@angular/router": "11.1.0-next.4",
+    "@angular/service-worker": "11.1.0-next.4",
     "@babel/core": "7.12.10",
     "@babel/generator": "7.12.11",
     "@babel/plugin-transform-runtime": "7.12.10",

packages/angular_devkit/build_angular/src/babel/babel-loader.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+declare module 'babel-loader' {
+  type BabelLoaderCustomizer<T> = (
+    babel: typeof import('@babel/core'),
+  ) => {
+    customOptions?(
+      this: import('webpack').loader.LoaderContext,
+      loaderOptions: Record<string, unknown>,
+      loaderArguments: { source: string; map?: unknown },
+    ): Promise<{ custom?: T; loader: Record<string, unknown> }>;
+    config?(
+      this: import('webpack').loader.LoaderContext,
+      configuration: import('@babel/core').PartialConfig,
+      loaderArguments: { source: string; map?: unknown; customOptions: T },
+    ): import('@babel/core').TransformOptions;
+  };
+  function custom<T>(customizer: BabelLoaderCustomizer<T>): import('webpack').loader.Loader;
+}

packages/angular_devkit/build_angular/src/babel/presets/application.ts

@@ -5,16 +5,19 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+import * as fs from 'fs';
 import * as path from 'path';
 
-export type DiagnosticReporter = (type: 'error' | 'warning', message: string) => void;
+export type DiagnosticReporter = (type: 'error' | 'warning' | 'info', message: string) => void;
 export interface ApplicationPresetOptions {
   i18n?: {
     locale: string;
     missingTranslationBehavior?: 'error' | 'warning' | 'ignore';
     translation?: unknown;
   };
 
+  angularLinker?: boolean;
+
   forceES5?: boolean;
   forceAsyncTransformation?: boolean;
 
@@ -98,11 +101,47 @@ function createI18nPlugins(
   return plugins;
 }
 
+function createNgtscLogger(
+  reporter: DiagnosticReporter | undefined,
+): import('@angular/compiler-cli/src/ngtsc/logging').Logger {
+  return {
+    level: 1, // Info level
+    debug(...args: string[]) {},
+    info(...args: string[]) {
+      reporter?.('info', args.join());
+    },
+    warn(...args: string[]) {
+      reporter?.('warning', args.join());
+    },
+    error(...args: string[]) {
+      reporter?.('error', args.join());
+    },
+  };
+}
+
 export default function (api: unknown, options: ApplicationPresetOptions) {
   const presets = [];
   const plugins = [];
   let needRuntimeTransform = false;
 
+  if (options.angularLinker) {
+    // Babel currently is synchronous so import cannot be used
+    const {
+      createEs2015LinkerPlugin,
+    } = require('@angular/compiler-cli/linker/babel');
+
+    plugins.push(createEs2015LinkerPlugin({
+      logger: createNgtscLogger(options.diagnosticReporter),
+      fileSystem: {
+        resolve: path.resolve,
+        exists: fs.existsSync,
+        dirname: path.dirname,
+        relative: path.relative,
+        readFile: fs.readFileSync,
+      },
+    }));
+  }
+
   if (options.forceES5) {
     presets.push([
       require('@babel/preset-env').default,

packages/angular_devkit/build_angular/src/babel/webpack-loader.ts

@@ -0,0 +1,120 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { custom } from 'babel-loader';
+
+interface AngularCustomOptions {
+  forceES5: boolean;
+  shouldLink: boolean;
+}
+
+/**
+ * Cached linker check utility function
+ *
+ * If undefined, not yet been imported
+ * If null, attempted import failed and no linker support
+ * If function, import succeeded and linker supported
+ */
+let needsLinking: undefined | null | typeof import('@angular/compiler-cli/linker').needsLinking;
+
+async function checkLinking(
+  path: string,
+  source: string,
+): Promise<{ hasLinkerSupport?: boolean; requiresLinking: boolean }> {
+  // @angular/core and @angular/compiler will cause false positives
+  if (/[\\\/]@angular[\\\/](?:compiler|core)/.test(path)) {
+    return { requiresLinking: false };
+  }
+
+  if (needsLinking !== null) {
+    try {
+      if (needsLinking === undefined) {
+        needsLinking = (await import('@angular/compiler-cli/linker')).needsLinking;
+      }
+
+      // If the linker entry point is present then there is linker support
+      return { hasLinkerSupport: true, requiresLinking: needsLinking(path, source) };
+    } catch {
+      needsLinking = null;
+    }
+  }
+
+  // Fallback for Angular versions less than 11.1.0 with no linker support.
+  // This information is used to issue errors if a partially compiled library is used when unsupported.
+  return {
+    hasLinkerSupport: false,
+    requiresLinking:
+      source.includes('ɵɵngDeclareDirective') || source.includes('ɵɵngDeclareComponent'),
+  };
+}
+
+export default custom<AngularCustomOptions>(() => {
+  const baseOptions = Object.freeze({
+    babelrc: false,
+    configFile: false,
+    compact: false,
+    cacheCompression: false,
+    sourceType: 'unambiguous',
+  });
+
+  return {
+    async customOptions({ forceES5, ...loaderOptions }, { source }) {
+      let shouldProcess = forceES5;
+
+      let shouldLink = false;
+      const { hasLinkerSupport, requiresLinking } = await checkLinking(this.resourcePath, source);
+      if (requiresLinking && !hasLinkerSupport) {
+        // Cannot link if there is no linker support
+        this.emitError(
+          'File requires the Angular linker. "@angular/compiler-cli" version 11.1.0 or greater is needed.',
+        );
+      } else {
+        shouldLink = requiresLinking;
+      }
+      shouldProcess ||= shouldLink;
+
+      const options: Record<string, unknown> = {
+        ...baseOptions,
+        ...loaderOptions,
+      };
+
+      if (!shouldProcess) {
+        // Force the current file to be ignored
+        options.ignore = [() => true];
+      }
+
+      return { custom: { forceES5: !!forceES5, shouldLink }, loader: options };
+    },
+    config(configuration, { customOptions }) {
+      return {
+        ...configuration.options,
+        presets: [
+          ...(configuration.options.presets || []),
+          [
+            require('./presets/application').default,
+            {
+              angularLinker: customOptions.shouldLink,
+              forceES5: customOptions.forceES5,
+              diagnosticReporter: (type, message) => {
+                switch (type) {
+                  case 'error':
+                    this.emitError(message);
+                    break;
+                  case 'info':
+                  // Webpack does not currently have an informational diagnostic
+                  case 'warning':
+                    this.emitWarning(message);
+                    break;
+                }
+              },
+            } as import('./presets/application').ApplicationPresetOptions,
+          ],
+        ],
+      };
+    },
+  };
+});

packages/angular_devkit/build_angular/src/webpack/configs/common.ts

@@ -544,35 +544,19 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
           sideEffects: true,
         },
         {
-          test: /\.m?js$/,
+          test: /\.[cm]?js$/,
           exclude: [/[\/\\](?:core-js|\@babel|tslib|web-animations-js)[\/\\]/, /(ngfactory|ngstyle)\.js$/],
           use: [
-            ...(wco.supportES2015
-              ? []
-              : [
-                  {
-                    loader: require.resolve('babel-loader'),
-                    options: {
-                      babelrc: false,
-                      configFile: false,
-                      compact: false,
-                      cacheCompression: false,
-                      cacheDirectory: findCachePath('babel-webpack'),
-                      cacheIdentifier: JSON.stringify({
-                        buildAngular: require('../../../package.json').version,
-                      }),
-                      sourceType: 'unambiguous',
-                      presets: [
-                        [
-                          require.resolve('../../babel/presets/application'),
-                          {
-                            forceES5: true,
-                          } as import('../../babel/presets/application').ApplicationPresetOptions,
-                        ],
-                      ],
-                    },
-                  },
-                ]),
+            {
+              loader: require.resolve('../../babel/webpack-loader'),
+              options: {
+                cacheDirectory: findCachePath('babel-webpack'),
+                cacheIdentifier: JSON.stringify({
+                  buildAngular: require('../../../package.json').version,
+                }),
+                forceES5: !wco.supportES2015,
+              },
+            },
             ...buildOptimizerUseRule,
           ],
         },

packages/ngtools/webpack/package.json

@@ -31,8 +31,8 @@
     "webpack": "^4.0.0"
   },
   "devDependencies": {
-    "@angular/compiler": "11.1.0-next.3",
-    "@angular/compiler-cli": "11.1.0-next.3",
+    "@angular/compiler": "11.1.0-next.4",
+    "@angular/compiler-cli": "11.1.0-next.4",
     "typescript": "4.1.3",
     "webpack": "4.44.2"
   }