@angular-devkit/build-angular 0.1101.0 → 0.1101.4

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "0.1101.0",
+  "version": "0.1101.4",
   "description": "Angular Webpack Build Facade",
   "experimental": true,
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
-    "@angular-devkit/architect": "0.1101.0",
-    "@angular-devkit/build-optimizer": "0.1101.0",
-    "@angular-devkit/build-webpack": "0.1101.0",
-    "@angular-devkit/core": "11.1.0",
+    "@angular-devkit/architect": "0.1101.4",
+    "@angular-devkit/build-optimizer": "0.1101.4",
+    "@angular-devkit/build-webpack": "0.1101.4",
+    "@angular-devkit/core": "11.1.4",
     "@babel/core": "7.12.10",
     "@babel/generator": "7.12.11",
     "@babel/plugin-transform-runtime": "7.12.10",
@@ -18,7 +18,7 @@
     "@babel/runtime": "7.12.5",
     "@babel/template": "7.12.7",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@ngtools/webpack": "11.1.0",
+    "@ngtools/webpack": "11.1.4",
     "ansi-colors": "4.1.1",
     "autoprefixer": "10.2.1",
     "babel-loader": "8.2.2",
@@ -34,11 +34,12 @@
     "file-loader": "6.2.0",
     "find-cache-dir": "3.3.1",
     "glob": "7.1.6",
+    "https-proxy-agent": "5.0.0",
     "inquirer": "7.3.3",
     "jest-worker": "26.6.2",
     "karma-source-map-support": "1.4.0",
     "less": "4.1.0",
-    "less-loader": "7.2.1",
+    "less-loader": "7.3.0",
     "license-webpack-plugin": "2.3.11",
     "loader-utils": "2.0.0",
     "mini-css-extract-plugin": "1.3.3",
@@ -49,7 +50,7 @@
     "pnp-webpack-plugin": "1.6.4",
     "postcss": "8.2.4",
     "postcss-import": "14.0.0",
-    "postcss-loader": "4.1.0",
+    "postcss-loader": "4.2.0",
     "raw-loader": "4.0.2",
     "regenerator-runtime": "0.13.7",
     "resolve-url-loader": "3.1.2",
@@ -79,10 +80,10 @@
     "worker-plugin": "5.0.0"
   },
   "peerDependencies": {
-    "@angular/compiler-cli": "^11.0.0 || ^11.1.0-next",
-    "@angular/localize": "^11.0.0 || ^11.1.0-next",
+    "@angular/compiler-cli": "^11.0.0",
+    "@angular/localize": "^11.0.0",
     "karma": "^5.2.0",
-    "ng-packagr": "^11.0.0 || ^11.1.0-next",
+    "ng-packagr": "^11.0.0",
     "protractor": "^7.0.0",
     "tslint": "^6.1.0",
     "typescript": "~4.0.0 || ~4.1.0"
@@ -117,7 +118,7 @@
   },
   "engines": {
     "node": ">= 10.13.0",
-    "npm": ">= 6.11.0",
+    "npm": "^6.11.0",
     "yarn": ">= 1.13.0"
   },
   "author": "Angular Authors",

package/src/browser/index.js

@@ -159,8 +159,10 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                 throw new Error('Webpack stats build result is required.');
             }
             // Fix incorrectly set `initial` value on chunks.
-            const extraEntryPoints = configs_1.normalizeExtraEntryPoints(options.styles || [], 'styles')
-                .concat(configs_1.normalizeExtraEntryPoints(options.scripts || [], 'scripts'));
+            const extraEntryPoints = [
+                ...configs_1.normalizeExtraEntryPoints(options.styles || [], 'styles'),
+                ...configs_1.normalizeExtraEntryPoints(options.scripts || [], 'scripts'),
+            ];
             const webpackStats = {
                 ...webpackRawStats,
                 chunks: async_chunks_1.markAsyncChunksNonInitial(webpackRawStats, extraEntryPoints),

package/src/browser/schema.d.ts

@@ -329,7 +329,8 @@ export declare type Localize = string[] | boolean;
 export declare type OptimizationUnion = boolean | OptimizationClass;
 export interface OptimizationClass {
     /**
-     * Enables optimization for fonts. This requires internet access.
+     * Enables optimization for fonts. This option requires internet access. `HTTPS_PROXY`
+     * environment variable can be used to specify a proxy server.
      */
     fonts?: FontsUnion;
     /**
@@ -342,13 +343,15 @@ export interface OptimizationClass {
     styles?: StylesUnion;
 }
 /**
- * Enables optimization for fonts. This requires internet access.
+ * Enables optimization for fonts. This option requires internet access. `HTTPS_PROXY`
+ * environment variable can be used to specify a proxy server.
  */
 export declare type FontsUnion = boolean | FontsClass;
 export interface FontsClass {
     /**
      * Reduce render blocking requests by inlining external Google fonts and icons CSS
-     * definitions in the application's HTML index file. This requires internet access.
+     * definitions in the application's HTML index file. This option requires internet access.
+     * `HTTPS_PROXY` environment variable can be used to specify a proxy server.
      */
     inline?: boolean;
 }

package/src/browser/schema.json

@@ -95,7 +95,7 @@
               ]
             },
             "fonts": {
-              "description": "Enables optimization for fonts. This requires internet access.",
+              "description": "Enables optimization for fonts. This option requires internet access. `HTTPS_PROXY` environment variable can be used to specify a proxy server.",
               "default": true,
               "oneOf": [
                 {
@@ -103,7 +103,7 @@
                   "properties": {
                     "inline": {
                       "type": "boolean",
-                      "description": "Reduce render blocking requests by inlining external Google fonts and icons CSS definitions in the application's HTML index file. This requires internet access.",
+                      "description": "Reduce render blocking requests by inlining external Google fonts and icons CSS definitions in the application's HTML index file. This option requires internet access. `HTTPS_PROXY` environment variable can be used to specify a proxy server.",
                       "default": true
                     }
                   },

package/src/testing/builder-harness.d.ts

@@ -45,6 +45,7 @@ export declare class BuilderHarness<T> {
     removeFile(path: string): Promise<void>;
     modifyFile(path: string, modifier: (content: string) => string | Promise<string>): Promise<void>;
     hasFile(path: string): boolean;
+    hasFileMatch(directory: string, pattern: RegExp): boolean;
     readFile(path: string): string;
     private validateProjectName;
 }

package/src/testing/builder-harness.js

@@ -213,6 +213,11 @@ class BuilderHarness {
     hasFile(path) {
         return this.host.scopedSync().exists(core_1.normalize(path));
     }
+    hasFileMatch(directory, pattern) {
+        return this.host.scopedSync()
+            .list(core_1.normalize(directory))
+            .some(name => pattern.test(name));
+    }
     readFile(path) {
         const content = this.host.scopedSync().read(core_1.normalize(path));
         return Buffer.from(content).toString('utf8');

package/src/utils/bundle-calculator.d.ts

@@ -1,10 +1,3 @@
-/**
- * @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 * as webpack from 'webpack';
 import { Budget } from '../browser/schema';
 import { ProcessBundleResult } from '../utils/process-bundle';

package/src/utils/bundle-calculator.js

@@ -1,6 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkThresholds = exports.checkBudgets = exports.calculateThresholds = exports.ThresholdSeverity = void 0;
+/**
+ * @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
+ */
+const path_1 = require("path");
 const schema_1 = require("../browser/schema");
 const stats_1 = require("../webpack/utils/stats");
 var ThresholdType;
@@ -133,6 +141,16 @@ class Calculator {
                 .reduce((l, r) => l + r, 0);
         }
     }
+    getAssetSize(asset) {
+        if (asset.name.endsWith('.js')) {
+            const processResult = this.processResults
+                .find((processResult) => processResult.original && path_1.basename(processResult.original.filename) === asset.name);
+            if (processResult === null || processResult === void 0 ? void 0 : processResult.original) {
+                return processResult.original.size;
+            }
+        }
+        return asset.size;
+    }
 }
 /**
  * A named bundle.
@@ -193,7 +211,7 @@ class AllScriptCalculator extends Calculator {
     calculate() {
         const size = this.assets
             .filter(asset => asset.name.endsWith('.js'))
-            .map(asset => asset.size)
+            .map(asset => this.getAssetSize(asset))
             .reduce((total, size) => total + size, 0);
         return [{ size, label: 'total scripts' }];
     }
@@ -205,7 +223,7 @@ class AllCalculator extends Calculator {
     calculate() {
         const size = this.assets
             .filter(asset => !asset.name.endsWith('.map'))
-            .map(asset => asset.size)
+            .map(asset => this.getAssetSize(asset))
             .reduce((total, size) => total + size, 0);
         return [{ size, label: 'total' }];
     }
@@ -218,7 +236,7 @@ class AnyScriptCalculator extends Calculator {
         return this.assets
             .filter(asset => asset.name.endsWith('.js'))
             .map(asset => ({
-            size: asset.size,
+            size: this.getAssetSize(asset),
             label: asset.name,
         }));
     }
@@ -231,7 +249,7 @@ class AnyCalculator extends Calculator {
         return this.assets
             .filter(asset => !asset.name.endsWith('.map'))
             .map(asset => ({
-            size: asset.size,
+            size: this.getAssetSize(asset),
             label: asset.name,
         }));
     }

package/src/utils/index-file/inline-fonts.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineFontsProcessor = void 0;
 const cacache = require("cacache");
 const https = require("https");
+const proxyAgent = require("https-proxy-agent");
 const url_1 = require("url");
 const cache_path_1 = require("../cache-path");
 const environment_options_1 = require("../environment-options");
@@ -69,6 +70,7 @@ class InlineFontsProcessor {
         return transformedContent;
     }
     async getResponse(url, userAgent) {
+        var _a;
         const key = `${packageVersion}|${url}|${userAgent}`;
         if (cacheFontsPath) {
             const entry = await cacache.get.info(cacheFontsPath, key);
@@ -76,13 +78,24 @@ class InlineFontsProcessor {
                 return fs_1.readFile(entry.path, 'utf8');
             }
         }
+        let agent;
+        const httpsProxy = (_a = process.env.HTTPS_PROXY) !== null && _a !== void 0 ? _a : process.env.https_proxy;
+        if (httpsProxy) {
+            agent = proxyAgent(httpsProxy);
+        }
         const data = await new Promise((resolve, reject) => {
             let rawResponse = '';
             https.get(url, {
+                agent,
+                rejectUnauthorized: false,
                 headers: {
                     'user-agent': userAgent,
                 },
             }, res => {
+                if (res.statusCode !== 200) {
+                    reject(new Error(`Inlining of fonts failed. ${url} returned status code: ${res.statusCode}.`));
+                    return;
+                }
                 res
                     .on('data', chunk => rawResponse += chunk)
                     .on('end', () => resolve(rawResponse));

package/src/utils/version.js

@@ -38,7 +38,7 @@ function assertCompatibleAngularVersion(projectRoot, logger) {
         const angularCliPkgPath = require.resolve('@angular/cli/package.json', resolveOptions);
         angularCliPkgJson = require(angularCliPkgPath);
         if (!(angularCliPkgJson && angularCliPkgJson['version'])) {
-            throw new Error();
+            return;
         }
     }
     catch (_b) {
@@ -46,17 +46,16 @@ function assertCompatibleAngularVersion(projectRoot, logger) {
         // In this case we don't provide as many version checks.
         return;
     }
-    if (angularCliPkgJson['version'] === '0.0.0') {
-        // Internal testing version
+    if (angularCliPkgJson['version'] === '0.0.0' || angularPkgJson['version'] === '0.0.0-PLACEHOLDER') {
+        // Internal CLI testing version or integration testing in the angular/angular
+        // repository with the generated development @angular/core npm package which is versioned "0.0.0-PLACEHOLDER".
         return;
     }
-    const cliMajor = new semver_1.SemVer(angularCliPkgJson['version']).major;
-    // e.g. CLI 8.0 supports '>=8.0.0 <9.0.0', including pre-releases (betas, rcs, snapshots)
-    // of both 8 and 9. Also allow version "0.0.0" for integration testing in the angular/angular
-    // repository with the generated development @angular/core npm package which is versioned "0.0.0".
-    const supportedAngularSemver = `0.0.0 || ^${cliMajor}.0.0-beta || ` + `>=${cliMajor}.0.0 <${cliMajor + 1}.0.0`;
     const angularVersion = new semver_1.SemVer(angularPkgJson['version']);
-    const rxjsVersion = new semver_1.SemVer(rxjsPkgJson['version']);
+    const cliMajor = new semver_1.SemVer(angularCliPkgJson['version']).major;
+    // e.g. CLI 8.0 supports '>=8.0.0 <9.0.0', including pre-releases (next, rcs, snapshots)
+    // of both 8 and 9.
+    const supportedAngularSemver = `^${cliMajor}.0.0-next || >=${cliMajor}.0.0 <${cliMajor + 1}.0.0`;
     if (!semver_1.satisfies(angularVersion, supportedAngularSemver, { includePrerelease: true })) {
         logger.error(core_1.tags.stripIndents `
         This version of CLI is only compatible with Angular versions ${supportedAngularSemver},
@@ -67,25 +66,5 @@ function assertCompatibleAngularVersion(projectRoot, logger) {
       ` + '\n');
         process.exit(3);
     }
-    else if (semver_1.gte(angularVersion, '6.0.0-rc.0') &&
-        !semver_1.gte(rxjsVersion, '5.6.0-forward-compat.0') &&
-        !semver_1.gte(rxjsVersion, '6.0.0-beta.0')) {
-        logger.error(core_1.tags.stripIndents `
-        This project uses version ${rxjsVersion} of RxJs, which is not supported by Angular v6+.
-        The official RxJs version that is supported is 5.6.0-forward-compat.0 and greater.
-
-        Please visit the link below to find instructions on how to update RxJs.
-        https://docs.google.com/document/d/12nlLt71VLKb-z3YaSGzUfx6mJbc34nsMXtByPUN35cg/edit#
-      ` + '\n');
-        process.exit(3);
-    }
-    else if (semver_1.gte(angularVersion, '6.0.0-rc.0') && !semver_1.gte(rxjsVersion, '6.0.0-beta.0')) {
-        logger.warn(core_1.tags.stripIndents `
-        This project uses a temporary compatibility version of RxJs (${rxjsVersion}).
-
-        Please visit the link below to find instructions on how to update RxJs.
-        https://docs.google.com/document/d/12nlLt71VLKb-z3YaSGzUfx6mJbc34nsMXtByPUN35cg/edit#
-      ` + '\n');
-    }
 }
 exports.assertCompatibleAngularVersion = assertCompatibleAngularVersion;

package/src/webpack/configs/common.js

@@ -269,10 +269,14 @@ function getCommonConfig(wco) {
         // Provide full names for lazy routes that use the deprecated string format
         extraPlugins.push(new webpack_1.ContextReplacementPlugin(/\@angular[\\\/]core[\\\/]/, (data) => (data.chunkName = '[request]')));
     }
-    if (!differentialLoadingMode) {
+    if (buildOptions.budgets.length && !differentialLoadingMode) {
         // Budgets are computed after differential builds, not via a plugin.
         // https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/browser/index.ts
-        extraPlugins.push(new plugins_1.BundleBudgetPlugin({ budgets: buildOptions.budgets }));
+        const extraEntryPoints = [
+            ...helpers_1.normalizeExtraEntryPoints(buildOptions.styles || [], 'styles'),
+            ...helpers_1.normalizeExtraEntryPoints(buildOptions.scripts || [], 'scripts'),
+        ];
+        extraPlugins.push(new plugins_1.BundleBudgetPlugin({ budgets: buildOptions.budgets, extraEntryPoints }));
     }
     if ((scriptsSourceMap || stylesSourceMap)) {
         extraRules.push({

package/src/webpack/configs/stats.d.ts

@@ -7,10 +7,12 @@
  */
 import { WebpackConfigOptions } from '../../utils/build-options';
 export declare function getWebpackStatsConfig(verbose?: boolean): {
+    all: boolean;
     colors: boolean;
     hash: boolean;
     timings: boolean;
     chunks: boolean;
+    builtAt: boolean;
     chunkModules: boolean;
     children: boolean;
     modules: boolean;
@@ -24,10 +26,12 @@ export declare function getWebpackStatsConfig(verbose?: boolean): {
 };
 export declare function getStatsConfig(wco: WebpackConfigOptions): {
     stats: {
+        all: boolean;
         colors: boolean;
         hash: boolean;
         timings: boolean;
         chunks: boolean;
+        builtAt: boolean;
         chunkModules: boolean;
         children: boolean;
         modules: boolean;

package/src/webpack/configs/stats.js

@@ -10,10 +10,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStatsConfig = exports.getWebpackStatsConfig = void 0;
 const webpack_version_1 = require("../../utils/webpack-version");
 const webpackOutputOptions = {
+    all: false,
     colors: true,
     hash: true,
     timings: true,
     chunks: true,
+    builtAt: true,
     chunkModules: false,
     children: false,
     modules: false,

package/src/webpack/configs/styles.js

@@ -109,6 +109,7 @@ function getStylesConfig(wco) {
                 {
                     loader: require.resolve('less-loader'),
                     options: {
+                        implementation: require('less'),
                         sourceMap: cssSourceMap,
                         lessOptions: {
                             javascriptEnabled: true,
@@ -135,6 +136,7 @@ function getStylesConfig(wco) {
             ],
         },
     ];
+    const assetNameTemplate = helpers_1.assetNameTemplateFactory(hashFormat);
     const postcssOptionsCreator = (sourceMap, extracted) => {
         return (loader) => ({
             map: sourceMap && {
@@ -162,7 +164,7 @@ function getStylesConfig(wco) {
                     deployUrl: buildOptions.deployUrl,
                     resourcesOutputPath: buildOptions.resourcesOutputPath,
                     loader,
-                    filename: `[name]${hashFormat.file}.[ext]`,
+                    filename: assetNameTemplate,
                     emitFile: buildOptions.platform !== 'server',
                     extracted,
                 }),
@@ -186,6 +188,7 @@ function getStylesConfig(wco) {
             {
                 loader: require.resolve('postcss-loader'),
                 options: {
+                    implementation: require('postcss'),
                     postcssOptions: postcssOptionsCreator(componentsSourceMap, false),
                 },
             },
@@ -215,6 +218,7 @@ function getStylesConfig(wco) {
                     {
                         loader: require.resolve('postcss-loader'),
                         options: {
+                            implementation: require('postcss'),
                             postcssOptions: postcssOptionsCreator(globalSourceMap, buildOptions.extractCss),
                         },
                     },

package/src/webpack/configs/typescript.js

@@ -30,7 +30,6 @@ function createIvyPlugin(wco, aot, tsconfig) {
     const { buildOptions } = wco;
     const optimize = buildOptions.optimization.scripts;
     const compilerOptions = {
-        skipTemplateCodegen: !aot,
         sourceMap: buildOptions.sourceMap.scripts,
     };
     if (buildOptions.preserveSymlinks !== undefined) {
@@ -46,6 +45,7 @@ function createIvyPlugin(wco, aot, tsconfig) {
         tsconfig,
         compilerOptions,
         fileReplacements,
+        jitMode: !aot,
         emitNgModuleScope: !optimize,
     });
 }

package/src/webpack/plugins/bundle-budget.d.ts

@@ -7,8 +7,10 @@
  */
 import { Compiler } from 'webpack';
 import { Budget } from '../../browser/schema';
+import { NormalizedEntryPoint } from '../utils/helpers';
 export interface BundleBudgetPluginOptions {
     budgets: Budget[];
+    extraEntryPoints: NormalizedEntryPoint[];
 }
 export declare class BundleBudgetPlugin {
     private options;

package/src/webpack/plugins/bundle-budget.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BundleBudgetPlugin = void 0;
 const bundle_calculator_1 = require("../../utils/bundle-calculator");
 const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
+const async_chunks_1 = require("../utils/async-chunks");
 class BundleBudgetPlugin {
     constructor(options) {
         this.options = options;
@@ -16,7 +17,9 @@ class BundleBudgetPlugin {
             // No process bundle results because this plugin is only used when differential
             // builds are disabled.
             const processResults = [];
+            // Fix incorrectly set `initial` value on chunks.
             const stats = compilation.getStats().toJson();
+            stats.chunks = async_chunks_1.markAsyncChunksNonInitial(stats, this.options.extraEntryPoints);
             for (const { severity, message } of bundle_calculator_1.checkBudgets(budgets, stats, processResults)) {
                 switch (severity) {
                     case bundle_calculator_1.ThresholdSeverity.Warning:

package/src/webpack/plugins/index-html-webpack-plugin.js

@@ -48,36 +48,41 @@ class IndexHtmlWebpackPlugin extends index_html_generator_1.IndexHtmlGenerator {
             const files = [];
             const noModuleFiles = [];
             const moduleFiles = [];
-            for (const [entryName, entrypoint] of this.compilation.entrypoints) {
-                const entryFiles = (_a = entrypoint === null || entrypoint === void 0 ? void 0 : entrypoint.getFiles()) === null || _a === void 0 ? void 0 : _a.map((f) => ({
-                    name: entryName,
-                    file: f,
-                    extension: path_1.extname(f),
-                }));
-                if (!entryFiles) {
-                    continue;
-                }
-                if (this.options.noModuleEntrypoints.includes(entryName)) {
-                    noModuleFiles.push(...entryFiles);
-                }
-                else if (this.options.moduleEntrypoints.includes(entryName)) {
-                    moduleFiles.push(...entryFiles);
-                }
-                else {
-                    files.push(...entryFiles);
+            try {
+                for (const [entryName, entrypoint] of this.compilation.entrypoints) {
+                    const entryFiles = (_a = entrypoint === null || entrypoint === void 0 ? void 0 : entrypoint.getFiles()) === null || _a === void 0 ? void 0 : _a.map((f) => ({
+                        name: entryName,
+                        file: f,
+                        extension: path_1.extname(f),
+                    }));
+                    if (!entryFiles) {
+                        continue;
+                    }
+                    if (this.options.noModuleEntrypoints.includes(entryName)) {
+                        noModuleFiles.push(...entryFiles);
+                    }
+                    else if (this.options.moduleEntrypoints.includes(entryName)) {
+                        moduleFiles.push(...entryFiles);
+                    }
+                    else {
+                        files.push(...entryFiles);
+                    }
                 }
+                const { content, warnings, errors } = await this.process({
+                    files,
+                    noModuleFiles,
+                    moduleFiles,
+                    outputPath: path_1.dirname(this.options.outputPath),
+                    baseHref: this.options.baseHref,
+                    lang: this.options.lang,
+                });
+                assets[this.options.outputPath] = new webpack_sources_1.RawSource(content);
+                warnings.forEach(msg => webpack_diagnostics_1.addWarning(this.compilation, msg));
+                errors.forEach(msg => webpack_diagnostics_1.addError(this.compilation, msg));
+            }
+            catch (error) {
+                webpack_diagnostics_1.addError(this.compilation, error.message);
             }
-            const { content, warnings, errors } = await this.process({
-                files,
-                noModuleFiles,
-                moduleFiles,
-                outputPath: path_1.dirname(this.options.outputPath),
-                baseHref: this.options.baseHref,
-                lang: this.options.lang,
-            });
-            assets[this.options.outputPath] = new webpack_sources_1.RawSource(content);
-            warnings.forEach(msg => webpack_diagnostics_1.addWarning(this.compilation, msg));
-            errors.forEach(msg => webpack_diagnostics_1.addError(this.compilation, msg));
         };
     }
     async readAsset(path) {

package/src/webpack/plugins/postcss-cli-resources.d.ts

@@ -7,7 +7,7 @@ export interface PostcssCliResourcesOptions {
     rebaseRootRelative?: boolean;
     /** CSS is extracted to a `.css` or is embedded in a `.js` file. */
     extracted?: boolean;
-    filename: string;
+    filename: (resourcePath: string) => string;
     loader: webpack.loader.LoaderContext;
     emitFile: boolean;
 }

package/src/webpack/plugins/postcss-cli-resources.js

@@ -74,7 +74,8 @@ function default_1(options) {
                     reject(err);
                     return;
                 }
-                let outputPath = loader_utils_1.interpolateName({ resourcePath: result }, filename, { content });
+                let outputPath = loader_utils_1.interpolateName({ resourcePath: result }, filename(result), { content, context: loader.context || loader.rootContext })
+                    .replace(/\\|\//g, '-');
                 if (resourcesOutputPath) {
                     outputPath = path.posix.join(resourcesOutputPath, outputPath);
                 }

package/src/webpack/plugins/scripts-webpack-plugin.js

@@ -71,6 +71,7 @@ class ScriptsWebpackPlugin {
             compilation.chunks.push(chunk);
         }
         compilation.assets[filename] = source;
+        compilation.hooks.chunkAsset.call(chunk, filename);
     }
     apply(compiler) {
         if (!this.options.scripts || this.options.scripts.length === 0) {

package/src/webpack/utils/async-chunks.d.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import * as webpack from 'webpack';
-import { NormalizedEntryPoint } from '../configs';
+import { NormalizedEntryPoint } from './helpers';
 /**
  * Webpack stats may incorrectly mark extra entry points `initial` chunks, when
  * they are actually loaded asynchronously and thus not in the main bundle. This

package/src/webpack/utils/helpers.d.ts

@@ -24,3 +24,4 @@ export declare function getSourceMapDevTool(scriptsSourceMap: boolean | undefine
 export declare function getEsVersionForFileName(scriptTarget: ScriptTarget | undefined, esVersionInFileName?: boolean): string;
 export declare function isPolyfillsEntry(name: string): boolean;
 export declare function getWatchOptions(poll: number | undefined): Options.WatchOptions;
+export declare function assetNameTemplateFactory(hashFormat: HashFormat): (resourcePath: string) => string;

package/src/webpack/utils/helpers.js

@@ -7,8 +7,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getWatchOptions = exports.isPolyfillsEntry = exports.getEsVersionForFileName = exports.getSourceMapDevTool = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
+exports.assetNameTemplateFactory = exports.getWatchOptions = exports.isPolyfillsEntry = exports.getEsVersionForFileName = exports.getSourceMapDevTool = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
 const core_1 = require("@angular-devkit/core");
+const path = require("path");
 const typescript_1 = require("typescript");
 const webpack_1 = require("webpack");
 const webpack_version_1 = require("../../utils/webpack-version");
@@ -98,3 +99,27 @@ function getWatchOptions(poll) {
     };
 }
 exports.getWatchOptions = getWatchOptions;
+function assetNameTemplateFactory(hashFormat) {
+    const visitedFiles = new Map();
+    return (resourcePath) => {
+        if (hashFormat.file) {
+            // File names are hashed therefore we don't need to handle files with the same file name.
+            return `[name]${hashFormat.file}.[ext]`;
+        }
+        const filename = path.basename(resourcePath);
+        // Check if the file with the same name has already been processed.
+        const visited = visitedFiles.get(filename);
+        if (!visited) {
+            // Not visited.
+            visitedFiles.set(filename, resourcePath);
+            return filename;
+        }
+        else if (visited === resourcePath) {
+            // Same file.
+            return filename;
+        }
+        // File has the same name but it's in a different location.
+        return '[path][name].[ext]';
+    };
+}
+exports.assetNameTemplateFactory = assetNameTemplateFactory;