@angular-devkit/build-angular 0.1000.0-rc.5 → 0.1000.3

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "0.1000.0-rc.5",
+  "version": "0.1000.3",
   "description": "Angular Webpack Build Facade",
   "experimental": true,
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
-    "@angular-devkit/architect": "0.1000.0-rc.5",
-    "@angular-devkit/build-optimizer": "0.1000.0-rc.5",
-    "@angular-devkit/build-webpack": "0.1000.0-rc.5",
-    "@angular-devkit/core": "10.0.0-rc.5",
+    "@angular-devkit/architect": "0.1000.3",
+    "@angular-devkit/build-optimizer": "0.1000.3",
+    "@angular-devkit/build-webpack": "0.1000.3",
+    "@angular-devkit/core": "10.0.3",
     "@babel/core": "7.9.6",
     "@babel/generator": "7.9.6",
     "@babel/plugin-transform-runtime": "7.9.6",
@@ -18,7 +18,7 @@
     "@babel/runtime": "7.9.6",
     "@babel/template": "7.8.6",
     "@jsdevtools/coverage-istanbul-loader": "3.0.3",
-    "@ngtools/webpack": "10.0.0-rc.5",
+    "@ngtools/webpack": "10.0.3",
     "ajv": "6.12.2",
     "autoprefixer": "9.8.0",
     "babel-loader": "8.1.0",
@@ -26,7 +26,7 @@
     "cacache": "15.0.3",
     "caniuse-lite": "^1.0.30001032",
     "circular-dependency-plugin": "5.2.0",
-    "copy-webpack-plugin": "6.0.2",
+    "copy-webpack-plugin": "6.0.3",
     "core-js": "3.6.4",
     "css-loader": "3.5.3",
     "cssnano": "4.1.10",

package/src/angular-cli-files/models/webpack-configs/common.js

@@ -226,7 +226,7 @@ function getCommonConfig(wco) {
         extraPlugins.push(new (class {
             apply(compiler) {
                 compiler.hooks.emit.tap('angular-cli-stats', compilation => {
-                    const data = JSON.stringify(compilation.getStats().toJson('verbose'));
+                    const data = JSON.stringify(compilation.getStats().toJson('verbose'), undefined, 2);
                     compilation.assets['stats.json'] = new webpack_sources_1.RawSource(data);
                 });
             }

package/src/angular-cli-files/plugins/common-js-usage-warn-plugin.d.ts

@@ -17,4 +17,5 @@ export declare class CommonJsUsageWarnPlugin {
     constructor(options?: CommonJsUsageWarnPluginOptions);
     apply(compiler: Compiler): void;
     private hasCommonJsDependencies;
+    private rawRequestToPackageName;
 }

package/src/angular-cli-files/plugins/common-js-usage-warn-plugin.js

@@ -12,40 +12,43 @@ const path_1 = require("path");
 // Webpack doesn't export these so the deep imports can potentially break.
 const CommonJsRequireDependency = require('webpack/lib/dependencies/CommonJsRequireDependency');
 const AMDDefineDependency = require('webpack/lib/dependencies/AMDDefineDependency');
+const STYLES_TEMPLATE_URL_REGEXP = /\.(html|svg|css|sass|less|styl|scss)$/;
 class CommonJsUsageWarnPlugin {
     constructor(options = {}) {
+        var _a;
         this.options = options;
         this.shownWarnings = new Set();
         // Allow the below depedency for HMR
         // tslint:disable-next-line: max-line-length
         // https://github.com/angular/angular-cli/blob/1e258317b1f6ec1e957ee3559cc3b28ba602f3ba/packages/angular_devkit/build_angular/src/dev-server/index.ts#L605-L638
-        this.allowedDepedencies = [
-            'webpack/hot/dev-server',
-        ];
-        if (this.options.allowedDepedencies) {
-            this.allowedDepedencies.push(...this.options.allowedDepedencies);
-        }
+        this.allowedDepedencies = new Set(['webpack/hot/dev-server']);
+        (_a = this.options.allowedDepedencies) === null || _a === void 0 ? void 0 : _a.forEach(d => this.allowedDepedencies.add(d));
     }
     apply(compiler) {
         compiler.hooks.compilation.tap('CommonJsUsageWarnPlugin', compilation => {
             compilation.hooks.finishModules.tap('CommonJsUsageWarnPlugin', modules => {
-                var _a, _b, _c, _d;
+                var _a, _b;
                 for (const { dependencies, rawRequest, issuer } of modules) {
                     if (!rawRequest ||
                         rawRequest.startsWith('.') ||
-                        path_1.isAbsolute(rawRequest)) {
-                        // Skip if module is absolute or relative.
-                        continue;
-                    }
-                    if ((_a = this.allowedDepedencies) === null || _a === void 0 ? void 0 : _a.includes(rawRequest)) {
-                        // Skip as this module is allowed even if it's a CommonJS.
+                        path_1.isAbsolute(rawRequest) ||
+                        this.allowedDepedencies.has(rawRequest) ||
+                        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'.
+                         */
                         continue;
                     }
-                    if (this.hasCommonJsDependencies(dependencies)) {
+                    if (this.hasCommonJsDependencies(dependencies, true)) {
                         // 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.
-                        if (this.hasCommonJsDependencies((_c = (_b = issuer === null || issuer === void 0 ? void 0 : issuer.issuer) === null || _b === void 0 ? void 0 : _b.dependencies) !== null && _c !== void 0 ? _c : [])) {
+                        const parentDependencies = (_a = issuer === null || issuer === void 0 ? void 0 : issuer.issuer) === null || _a === void 0 ? void 0 : _a.dependencies;
+                        if (parentDependencies && this.hasCommonJsDependencies(parentDependencies)) {
                             continue;
                         }
                         // Find the main issuer (entry-point).
@@ -56,10 +59,10 @@ class CommonJsUsageWarnPlugin {
                         // Only show warnings for modules from main entrypoint.
                         // And if the issuer request is not from 'webpack-dev-server', as 'webpack-dev-server'
                         // will require CommonJS libraries for live reloading such as 'sockjs-node'.
-                        if ((mainIssuer === null || mainIssuer === void 0 ? void 0 : mainIssuer.name) === 'main' && !((_d = issuer === null || issuer === void 0 ? void 0 : issuer.userRequest) === null || _d === void 0 ? void 0 : _d.includes('webpack-dev-server'))) {
-                            const warning = `${issuer === null || issuer === void 0 ? void 0 : issuer.userRequest} depends on ${rawRequest}. CommonJS or AMD dependencies can cause optimization bailouts.\n` +
-                                'For more info see: https://web.dev/commonjs-larger-bundles\n' +
-                                `To disable this warning add "${rawRequest}" to the "allowedCommonJsDependencies" option under "build" options in "angular.json".`;
+                        if ((mainIssuer === null || mainIssuer === void 0 ? void 0 : mainIssuer.name) === 'main' && !((_b = issuer === null || issuer === void 0 ? void 0 : issuer.userRequest) === null || _b === void 0 ? void 0 : _b.includes('webpack-dev-server'))) {
+                            const warning = `${issuer === null || issuer === void 0 ? void 0 : issuer.userRequest} depends on '${rawRequest}'. ` +
+                                'CommonJS or AMD dependencies can cause optimization bailouts.\n' +
+                                'For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies';
                             // Avoid showing the same warning multiple times when in 'watch' mode.
                             if (!this.shownWarnings.has(warning)) {
                                 compilation.warnings.push(warning);
@@ -71,8 +74,27 @@ class CommonJsUsageWarnPlugin {
             });
         });
     }
-    hasCommonJsDependencies(dependencies) {
-        return dependencies.some(d => d instanceof CommonJsRequireDependency || d instanceof AMDDefineDependency);
+    hasCommonJsDependencies(dependencies, checkForStylesAndTemplatesCJS = false) {
+        for (const dep of dependencies) {
+            if (dep instanceof CommonJsRequireDependency) {
+                if (checkForStylesAndTemplatesCJS && STYLES_TEMPLATE_URL_REGEXP.test(dep.request)) {
+                    // Skip in case it's a template or stylesheet
+                    continue;
+                }
+                return true;
+            }
+            if (dep instanceof AMDDefineDependency) {
+                return true;
+            }
+        }
+        return false;
+    }
+    rawRequestToPackageName(rawRequest) {
+        return rawRequest.startsWith('@')
+            // Scoped request ex: @angular/common/locale/en -> @angular/common
+            ? rawRequest.split('/', 2).join('/')
+            // Non-scoped request ex: lodash/isEmpty -> lodash
+            : rawRequest.split('/', 1)[0];
     }
 }
 exports.CommonJsUsageWarnPlugin = CommonJsUsageWarnPlugin;

package/src/angular-cli-files/plugins/dedupe-module-resolve-plugin.d.ts

@@ -13,11 +13,13 @@ interface NormalModuleFactoryRequest {
     relativePath: string;
     path: string;
     descriptionFileData: {
-        name: string;
-        version: string;
+        name?: string;
+        version?: string;
     };
     descriptionFileRoot: string;
     descriptionFilePath: string;
+    directory?: boolean;
+    file?: boolean;
 }
 export interface DedupeModuleResolvePluginOptions {
     verbose?: boolean;

package/src/angular-cli-files/plugins/dedupe-module-resolve-plugin.js

@@ -28,6 +28,15 @@ class DedupeModuleResolvePlugin {
             if (request.relativePath !== '.') {
                 return;
             }
+            // When either of these properties is undefined. It typically means it's a link.
+            // In which case we shouldn't try to dedupe it.
+            if (request.file === undefined || request.directory === undefined) {
+                return;
+            }
+            // Empty name or versions are no valid primary entrypoints of a library
+            if (!request.descriptionFileData.name || !request.descriptionFileData.version) {
+                return;
+            }
             const moduleId = request.descriptionFileData.name + '@' + request.descriptionFileData.version;
             const prevResolvedModule = this.modules.get(moduleId);
             if (!prevResolvedModule) {

package/src/angular-cli-files/utilities/stats.d.ts

@@ -12,3 +12,5 @@ export declare function generateBuildStats(hash: string, time: number, colors: b
 export declare function statsToString(json: any, statsConfig: any): string;
 export declare function statsWarningsToString(json: any, statsConfig: any): string;
 export declare function statsErrorsToString(json: any, statsConfig: any): string;
+export declare function statsHasErrors(json: any): boolean;
+export declare function statsHasWarnings(json: any): boolean;

package/src/angular-cli-files/utilities/stats.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.statsErrorsToString = exports.statsWarningsToString = exports.statsToString = exports.generateBuildStats = exports.generateBundleStats = exports.formatSize = void 0;
+exports.statsHasWarnings = exports.statsHasErrors = exports.statsErrorsToString = exports.statsWarningsToString = exports.statsToString = exports.generateBuildStats = exports.generateBundleStats = exports.formatSize = void 0;
 /**
  * @license
  * Copyright Google Inc. All Rights Reserved.
@@ -77,7 +77,12 @@ function statsWarningsToString(json, statsConfig) {
     const colors = statsConfig.colors;
     const rs = (x) => colors ? reset(x) : x;
     const y = (x) => colors ? bold(yellow(x)) : x;
-    return rs('\n' + json.warnings
+    const warnings = [...json.warnings];
+    if (json.children) {
+        warnings.push(...json.children.map((c) => c.warnings));
+    }
+    return rs('\n' + warnings
+        .filter(m => !!m)
         .map((warning) => `${warning}`)
         .filter((warning) => !ERRONEOUS_WARNINGS.some((erroneous) => erroneous.test(warning)))
         .map((warning) => y(`WARNING in ${warning}`))
@@ -88,6 +93,23 @@ function statsErrorsToString(json, statsConfig) {
     const colors = statsConfig.colors;
     const rs = (x) => colors ? reset(x) : x;
     const r = (x) => colors ? bold(red(x)) : x;
-    return rs('\n' + json.errors.map((error) => r(`ERROR in ${error}`)).join('\n'));
+    const errors = [...json.errors];
+    if (json.children) {
+        errors.push(...json.children.map((c) => c.errors));
+    }
+    return rs('\n' + errors
+        .filter(m => !!m)
+        .map((error) => r(`ERROR in ${error}`))
+        .join('\n\n'));
 }
 exports.statsErrorsToString = statsErrorsToString;
+function statsHasErrors(json) {
+    var _a;
+    return json.errors.length > 0 || !!((_a = json.children) === null || _a === void 0 ? void 0 : _a.some((c) => c.errors.length));
+}
+exports.statsHasErrors = statsHasErrors;
+function statsHasWarnings(json) {
+    var _a;
+    return json.warnings.length > 0 || !!((_a = json.children) === null || _a === void 0 ? void 0 : _a.some((c) => c.warnings.length));
+}
+exports.statsHasWarnings = statsHasWarnings;

package/src/browser/index.js

@@ -93,8 +93,19 @@ function getCompilerConfig(wco) {
     return {};
 }
 async function initialize(options, context, host, webpackConfigurationTransform) {
+    var _a, _b;
     const originalOutputPath = options.outputPath;
-    const { config, projectRoot, projectSourceRoot, i18n, } = await buildBrowserWebpackConfigFromContext(options, context, host, true);
+    // Assets are processed directly by the builder except when watching
+    const adjustedOptions = options.watch ? options : { ...options, assets: [] };
+    const { config, projectRoot, projectSourceRoot, i18n, } = await buildBrowserWebpackConfigFromContext(adjustedOptions, context, host, true);
+    // Validate asset option values if processed directly
+    if (((_a = options.assets) === null || _a === void 0 ? void 0 : _a.length) && !((_b = adjustedOptions.assets) === null || _b === void 0 ? void 0 : _b.length)) {
+        utils_1.normalizeAssetPatterns(options.assets, new core_1.virtualFs.SyncDelegateHost(host), core_1.normalize(context.workspaceRoot), core_1.normalize(projectRoot), projectSourceRoot === undefined ? undefined : core_1.normalize(projectSourceRoot)).forEach(({ output }) => {
+            if (output.startsWith('..')) {
+                throw new Error('An asset cannot be written to a location outside of the output path.');
+            }
+        });
+    }
     let transformedConfig;
     if (webpackConfigurationTransform) {
         transformedConfig = await webpackConfigurationTransform(config);
@@ -152,10 +163,10 @@ function buildWebpackBrowser(options, context, transforms = {}) {
             if (!success && useBundleDownleveling) {
                 // If using bundle downleveling then there is only one build
                 // If it fails show any diagnostic messages and bail
-                if (webpackStats && webpackStats.warnings.length > 0) {
+                if (stats_1.statsHasWarnings(webpackStats)) {
                     context.logger.warn(stats_1.statsWarningsToString(webpackStats, { colors: true }));
                 }
-                if (webpackStats && webpackStats.errors.length > 0) {
+                if (stats_1.statsHasErrors(webpackStats)) {
                     context.logger.error(stats_1.statsErrorsToString(webpackStats, { colors: true }));
                 }
                 return { success };
@@ -388,16 +399,6 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                     finally {
                         executor.stop();
                     }
-                    // Copy assets
-                    if (options.assets) {
-                        try {
-                            await copy_assets_1.copyAssets(utils_1.normalizeAssetPatterns(options.assets, new core_1.virtualFs.SyncDelegateHost(host), root, core_1.normalize(projectRoot), projectSourceRoot === undefined ? undefined : core_1.normalize(projectSourceRoot)), Array.from(outputPaths.values()), context.workspaceRoot);
-                        }
-                        catch (err) {
-                            context.logger.error('Unable to copy assets: ' + err.message);
-                            return { success: false };
-                        }
-                    }
                     function generateBundleInfoStats(id, bundle, chunk) {
                         return stats_1.generateBundleStats({
                             id,
@@ -448,13 +449,12 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                                 break;
                             default:
                                 assertNever(severity);
-                                break;
                         }
                     }
-                    if (webpackStats && webpackStats.warnings.length > 0) {
+                    if (stats_1.statsHasWarnings(webpackStats)) {
                         context.logger.warn(stats_1.statsWarningsToString(webpackStats, { colors: true }));
                     }
-                    if (webpackStats && webpackStats.errors.length > 0) {
+                    if (stats_1.statsHasErrors(webpackStats)) {
                         context.logger.error(stats_1.statsErrorsToString(webpackStats, { colors: true }));
                         return { success: false };
                     }
@@ -471,6 +471,16 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                         }
                     }
                 }
+                // Copy assets
+                if (!options.watch && options.assets) {
+                    try {
+                        await copy_assets_1.copyAssets(utils_1.normalizeAssetPatterns(options.assets, new core_1.virtualFs.SyncDelegateHost(host), root, core_1.normalize(projectRoot), projectSourceRoot === undefined ? undefined : core_1.normalize(projectSourceRoot)), Array.from(outputPaths.values()), context.workspaceRoot);
+                    }
+                    catch (err) {
+                        context.logger.error('Unable to copy assets: ' + err.message);
+                        return { success: false };
+                    }
+                }
                 if (options.index) {
                     for (const [locale, outputPath] of outputPaths.entries()) {
                         let localeBaseHref;

package/src/utils/process-bundle.js

@@ -91,7 +91,10 @@ async function process(options) {
                         exclude: ['transform-typeof-symbol'],
                     },
                 ]],
-            plugins: options.replacements ? [createReplacePlugin(options.replacements)] : [],
+            plugins: [
+                createIifeWrapperPlugin(),
+                ...(options.replacements ? [createReplacePlugin(options.replacements)] : []),
+            ],
             minified: environment_options_1.allowMinify && !!options.optimize,
             compact: !environment_options_1.shouldBeautify && !!options.optimize,
             sourceMaps: !!sourceMap,
@@ -335,6 +338,25 @@ function createReplacePlugin(replacements) {
         },
     };
 }
+function createIifeWrapperPlugin() {
+    return {
+        visitor: {
+            Program: {
+                exit(path) {
+                    // Save existing body and directives
+                    const { body, directives } = path.node;
+                    // Clear out body and directives for wrapper
+                    path.node.body = [];
+                    path.node.directives = [];
+                    // Create the wrapper - "(function() { ... })();"
+                    const wrapper = core_1.types.expressionStatement(core_1.types.callExpression(core_1.types.parenthesizedExpression(core_1.types.functionExpression(undefined, [], core_1.types.blockStatement(body, directives))), []));
+                    // Insert the wrapper
+                    path.pushContainer('body', wrapper);
+                },
+            },
+        },
+    };
+}
 const USE_LOCALIZE_PLUGINS = false;
 async function createI18nPlugins(locale, translation, missingTranslation, localeDataContent) {
     const plugins = [];