packages/angular_devkit/build_angular/src/angular-cli-files/plugins/common-js-usage-warn-plugin.ts

@@ -20,12 +20,10 @@ const STYLES_TEMPLATE_URL_REGEXP = /\.(html|svg|css|sass|less|styl|scss)$/;
 interface WebpackModule extends compilation.Module {
   name?: string;
   rawRequest?: string;
-  dependencies: unknown[];
+  dependencies: WebpackModule[];
   issuer: WebpackModule | null;
+  module: WebpackModule | null;
   userRequest?: string;
-}
-
-interface CommonJsRequireDependencyType {
   request: string;
 }
 
@@ -58,22 +56,22 @@ export class CommonJsUsageWarnPlugin {
             this.allowedDepedencies.has(this.rawRequestToPackageName(rawRequest)) ||
             rawRequest.startsWith('@angular/common/locales/')
           ) {
-          /**
-           * Skip when:
-           * - module is absolute or relative.
-           * - module is allowed even if it's a CommonJS.
-           * - module is a locale imported from '@angular/common'.
-           */
+            /**
+             * Skip when:
+             * - module is absolute or relative.
+             * - module is allowed even if it's a CommonJS.
+             * - module is a locale imported from '@angular/common'.
+             */
             continue;
           }
 
-          if (this.hasCommonJsDependencies(dependencies, true)) {
+          if (this.hasCommonJsDependencies(dependencies)) {
             // Dependency is CommonsJS or AMD.
 
             // Check if it's parent issuer is also a CommonJS dependency.
             // In case it is skip as an warning will be show for the parent CommonJS dependency.
             const parentDependencies = issuer?.issuer?.dependencies;
-            if (parentDependencies && this.hasCommonJsDependencies(parentDependencies)) {
+            if (parentDependencies && this.hasCommonJsDependencies(parentDependencies, true)) {
               continue;
             }
 
@@ -103,10 +101,10 @@ export class CommonJsUsageWarnPlugin {
     });
   }
 
-  private hasCommonJsDependencies(dependencies: unknown[], checkForStylesAndTemplatesCJS = false): boolean {
+  private hasCommonJsDependencies(dependencies: WebpackModule[], checkParentModules = false): boolean {
     for (const dep of dependencies) {
       if (dep instanceof CommonJsRequireDependency) {
-        if (checkForStylesAndTemplatesCJS && STYLES_TEMPLATE_URL_REGEXP.test((dep as CommonJsRequireDependencyType).request)) {
+        if (STYLES_TEMPLATE_URL_REGEXP.test(dep.request)) {
           // Skip in case it's a template or stylesheet
           continue;
         }
@@ -117,6 +115,10 @@ export class CommonJsUsageWarnPlugin {
       if (dep instanceof AMDDefineDependency) {
         return true;
       }
+
+      if (checkParentModules && dep.module && this.hasCommonJsDependencies(dep.module.dependencies)) {
+        return true;
+      }
     }
 
     return false;

packages/angular_devkit/build_angular/src/angular-cli-files/utilities/stats.ts

@@ -87,10 +87,11 @@ export function statsToString(json: any, statsConfig: any) {
 }
 
 // TODO(#16193): Don't emit this warning in the first place rather than just suppressing it.
-const ERRONEOUS_WARNINGS = [
+const ERRONEOUS_WARNINGS_FILTER = (warning: string) => ![
   /multiple assets emit different content.*3rdpartylicenses\.txt/i,
-];
-export function statsWarningsToString(json: any, statsConfig: any) {
+].some(msg => msg.test(warning));
+
+export function statsWarningsToString(json: any, statsConfig: any): string {
   const colors = statsConfig.colors;
   const rs = (x: string) => colors ? reset(x) : x;
   const y = (x: string) => colors ? bold(yellow(x)) : x;
@@ -104,12 +105,12 @@ export function statsWarningsToString(json: any, statsConfig: any) {
 
   return rs('\n' + warnings
     .map((warning: any) => `${warning}`)
-    .filter((warning: string) => !ERRONEOUS_WARNINGS.some((erroneous) => erroneous.test(warning)))
+    .filter(ERRONEOUS_WARNINGS_FILTER)
     .map((warning: string) => y(`WARNING in ${warning}`))
     .join('\n\n'));
 }
 
-export function statsErrorsToString(json: any, statsConfig: any) {
+export function statsErrorsToString(json: any, statsConfig: any): string {
   const colors = statsConfig.colors;
   const rs = (x: string) => colors ? reset(x) : x;
   const r = (x: string) => colors ? bold(red(x)) : x;
@@ -120,16 +121,18 @@ export function statsErrorsToString(json: any, statsConfig: any) {
       .reduce((a: string[], b: string[]) => [...a, ...b], [])
     );
   }
+
   return rs('\n' + errors
     .map((error: any) => r(`ERROR in ${error}`))
     .join('\n\n')
   );
 }
 
 export function statsHasErrors(json: any): boolean {
-  return json.errors.length > 0 || !!json.children?.some((c: any) => c.errors.length);
+  return json.errors.length || !!json.children?.some((c: any) => c.errors.length);
 }
 
 export function statsHasWarnings(json: any): boolean {
-  return json.warnings.length > 0 || !!json.children?.some((c: any) => c.warnings.length);
+  return json.warnings.filter(ERRONEOUS_WARNINGS_FILTER).length ||
+    !!json.children?.some((c: any) => c.warnings.filter(ERRONEOUS_WARNINGS_FILTER).length);
 }

packages/angular_devkit/build_angular/src/browser/index.ts

@@ -101,10 +101,10 @@ export function createBrowserLoggingCallback(
       logger.info(statsToString(json, config.stats));
     }
 
-    if (stats.hasWarnings()) {
+    if (statsHasWarnings(json)) {
       logger.warn(statsWarningsToString(json, config.stats));
     }
-    if (stats.hasErrors()) {
+    if (statsHasErrors(json)) {
       logger.error(statsErrorsToString(json, config.stats));
     }
   };

packages/angular_devkit/build_angular/src/browser/specs/common-js-warning_spec.ts

@@ -28,20 +28,43 @@ describe('Browser Builder commonjs warning', () => {
 
   afterEach(async () => host.restore().toPromise());
 
-  it('should show warning when depending on a Common JS bundle', async () => {
-    // Add a Common JS dependency
-    host.appendToFile('src/app/app.component.ts', `
-      import 'bootstrap';
-    `);
-
-    const run = await architect.scheduleTarget(targetSpec, undefined, { logger });
-    const output = await run.result;
-    expect(output.success).toBe(true);
-    const logMsg = logs.join();
-    expect(logMsg).toMatch(/WARNING in.+app\.component\.ts depends on 'bootstrap'\. CommonJS or AMD dependencies/);
-    expect(logMsg).not.toContain('jquery', 'Should not warn on transitive CommonJS packages which parent is also CommonJS.');
-    await run.stop();
-  });
+  for (const aot of [true, false]) {
+    it(`should not show warning for styles import in ${aot ? 'AOT' : 'JIT'} Mode`, async () => {
+      // Add a Common JS dependency
+      host.appendToFile('src/app/app.component.ts', `
+        import '../../test.css';
+      `);
+
+      host.writeMultipleFiles({
+        './test.css': `
+          body {
+            color: red;
+          };
+        `,
+      });
+
+      const run = await architect.scheduleTarget(targetSpec, { aot }, { logger });
+      const output = await run.result;
+      expect(output.success).toBe(true);
+      expect(logs.join()).not.toContain('WARNING');
+      await run.stop();
+    });
+
+    it(`should show warning when depending on a Common JS bundle in ${aot ? 'AOT' : 'JIT'} Mode`, async () => {
+      // Add a Common JS dependency
+      host.appendToFile('src/app/app.component.ts', `
+        import 'bootstrap';
+      `);
+
+      const run = await architect.scheduleTarget(targetSpec, { aot }, { logger });
+      const output = await run.result;
+      expect(output.success).toBe(true);
+      const logMsg = logs.join();
+      expect(logMsg).toMatch(/WARNING in.+app\.component\.ts depends on 'bootstrap'\. CommonJS or AMD dependencies/);
+      expect(logMsg).not.toContain('jquery', 'Should not warn on transitive CommonJS packages which parent is also CommonJS.');
+      await run.stop();
+    });
+  }
 
   it('should not show warning when depending on a Common JS bundle which is allowed', async () => {
     // Add a Common JS dependency

packages/angular_devkit/build_angular/src/extract-i18n/index.ts

@@ -20,7 +20,7 @@ import {
   getStatsConfig,
   getStylesConfig,
 } from '../angular-cli-files/models/webpack-configs';
-import { statsErrorsToString, statsWarningsToString } from '../angular-cli-files/utilities/stats';
+import { statsErrorsToString, statsHasErrors, statsHasWarnings, statsWarningsToString } from '../angular-cli-files/utilities/stats';
 import { Schema as BrowserBuilderOptions } from '../browser/schema';
 import { createI18nOptions } from '../utils/i18n-options';
 import { assertCompatibleAngularVersion } from '../utils/version';
@@ -127,11 +127,11 @@ export async function execute(
   const logging: WebpackLoggingCallback = (stats, config) => {
     const json = stats.toJson({ errors: true, warnings: true });
 
-    if (stats.hasWarnings()) {
+    if (statsHasWarnings(json)) {
       context.logger.warn(statsWarningsToString(json, config.stats));
     }
 
-    if (stats.hasErrors()) {
+    if (statsHasErrors(json)) {
       context.logger.error(statsErrorsToString(json, config.stats));
     }
   };

packages/angular_devkit/core/src/virtual-fs/host/sync.ts

@@ -37,11 +37,13 @@ export class SyncDelegateHost<T extends object = {}> {
     let completed = false;
     let result: ResultT | undefined = undefined;
     let errorResult: Error | undefined = undefined;
-    observable.subscribe({
-      next(x: ResultT) { result = x; },
-      error(err: Error) { errorResult = err; },
-      complete() { completed = true; },
-    });
+    // Perf note: this is not using an observer object to avoid a performance penalty in RxJS.
+    // See https://github.com/ReactiveX/rxjs/pull/5646 for details.
+    observable.subscribe(
+      (x: ResultT) => result = x,
+      (err: Error) => errorResult = err,
+      () => completed = true,
+    );
 
     if (errorResult !== undefined) {
       throw errorResult;

packages/angular_devkit/schematics_cli/bin/schematics.ts

@@ -22,11 +22,10 @@ import {
 import { NodeJsSyncHost, ProcessOutput, createConsoleLogger } from '@angular-devkit/core/node';
 import {
   DryRunEvent,
-  SchematicEngine,
   UnsuccessfulWorkflowExecution,
   formats,
 } from '@angular-devkit/schematics';
-import { NodeModulesEngineHost, NodeWorkflow, validateOptionsWithSchema } from '@angular-devkit/schematics/tools';
+import { NodeWorkflow, validateOptionsWithSchema } from '@angular-devkit/schematics/tools';
 import * as inquirer from 'inquirer';
 import * as minimist from 'minimist';
 
@@ -64,12 +63,10 @@ export interface MainOptions {
 }
 
 
-function _listSchematics(collectionName: string, logger: logging.Logger) {
+function _listSchematics(workflow: NodeWorkflow, collectionName: string, logger: logging.Logger) {
   try {
-    const engineHost = new NodeModulesEngineHost();
-    const engine = new SchematicEngine(engineHost);
-    const collection = engine.createCollection(collectionName);
-    logger.info(engine.listSchematicNames(collection).join('\n'));
+    const collection = workflow.engine.createCollection(collectionName);
+    logger.info(collection.listSchematicNames().join('\n'));
   } catch (error) {
     logger.fatal(error.message);
 
@@ -140,18 +137,8 @@ export async function main({
     collection: collectionName,
     schematic: schematicName,
   } = parseSchematicName(argv._.shift() || null);
-  const isLocalCollection = collectionName.startsWith('.') || collectionName.startsWith('/');
-
-  /** If the user wants to list schematics, we simply show all the schematic names. */
-  if (argv['list-schematics']) {
-    return _listSchematics(collectionName, logger);
-  }
 
-  if (!schematicName) {
-    logger.info(getUsage());
-
-    return 1;
-  }
+  const isLocalCollection = collectionName.startsWith('.') || collectionName.startsWith('/');
 
   /** Gather the arguments for later use. */
   const debug: boolean = argv.debug === null ? isLocalCollection : argv.debug;
@@ -171,6 +158,17 @@ export async function main({
     resolvePaths: [process.cwd(), __dirname],
   });
 
+  /** If the user wants to list schematics, we simply show all the schematic names. */
+  if (argv['list-schematics']) {
+    return _listSchematics(workflow, collectionName, logger);
+  }
+
+  if (!schematicName) {
+    logger.info(getUsage());
+
+    return 1;
+  }
+
   registry.addPostTransform(schema.transforms.addUndefinedDefaults);
   workflow.engineHost.registerOptionsTransform(validateOptionsWithSchema(registry));
 

packages/schematics/angular/utility/latest-versions.ts

@@ -8,7 +8,7 @@
 
 export const latestVersions = {
   // These versions should be kept up to date with latest Angular peer dependencies.
-  Angular: '~10.0.9',
+  Angular: '~10.0.11',
   RxJs: '~6.5.5',
   ZoneJs: '~0.10.3',
   TypeScript: '~3.9.5',
@@ -18,9 +18,9 @@ export const latestVersions = {
   // For our e2e tests, these versions must match the latest tag present on the branch.
   // During RC periods they will not match the latest RC until there's a new git tag, and
   // should not be updated.
-  DevkitBuildAngular: '~0.1000.6',
-  DevkitBuildNgPackagr: '~0.1000.6',
-  DevkitBuildWebpack: '~0.1000.6',
+  DevkitBuildAngular: '~0.1000.7',
+  DevkitBuildNgPackagr: '~0.1000.7',
+  DevkitBuildWebpack: '~0.1000.7',
 
   ngPackagr: '^10.0.0',
 };

tests/legacy-cli/e2e/tests/build/multiple-configs.ts

@@ -9,34 +9,37 @@ export default async function () {
     // These are the default options, that we'll overwrite in subsequent configs.
     // extractCss defaults to false
     // sourceMap defaults to true
-    appArchitect['options'] = {
-      outputPath: 'dist/latest-project',
-      index: 'src/index.html',
-      main: 'src/main.ts',
-      polyfills: 'src/polyfills.ts',
-      tsConfig: 'tsconfig.app.json',
-      assets: [
-        'src/favicon.ico',
-        'src/assets',
-      ],
-      'styles': [
-        'src/styles.css',
-      ],
-      'scripts': [],
-    };
-    const browserConfigs = appArchitect['build'].configurations;
-    browserConfigs['production'] = {
-      extractCss: true,
-    };
-    browserConfigs['one'] = {
-      assets: [],
-    };
-    browserConfigs['two'] = {
-      sourceMap: false,
-    };
-    browserConfigs['three'] = {
-      extractCss: false, // Defaults to false when not set.
+    appArchitect['build'] = {
+      ...appArchitect['build'],
+      options: {
+        ...appArchitect['build'].options,
+        extractCss: false,
+        assets: [
+          'src/favicon.ico',
+          'src/assets',
+        ],
+        styles: [
+          'src/styles.css',
+        ],
+        scripts: [],
+      },
+      configurations: {
+        production: {
+          extractCss: true,
+        },
+        one: {
+          assets: [],
+        },
+        two: {
+          sourceMap: false,
+        },
+        three: {
+          extractCss: false, // Defaults to false when not set.
+        },
+      },
     };
+
+    return workspaceJson;
   });
 
   // Test the base configuration.