@angular-devkit/build-angular 0.800.2 → 0.800.6

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "0.800.2",
+  "version": "0.800.6",
   "description": "Angular Webpack Build Facade",
   "experimental": true,
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
-    "@angular-devkit/architect": "0.800.2",
-    "@angular-devkit/build-optimizer": "0.800.2",
-    "@angular-devkit/build-webpack": "0.800.2",
-    "@angular-devkit/core": "8.0.2",
-    "@ngtools/webpack": "8.0.2",
+    "@angular-devkit/architect": "0.800.6",
+    "@angular-devkit/build-optimizer": "0.800.6",
+    "@angular-devkit/build-webpack": "0.800.6",
+    "@angular-devkit/core": "8.0.6",
+    "@ngtools/webpack": "8.0.6",
     "ajv": "6.10.0",
     "autoprefixer": "9.5.1",
     "browserslist": "4.5.5",
-    "caniuse-api": "3.0.0",
+    "caniuse-lite": "1.0.30000974",
     "circular-dependency-plugin": "5.0.2",
     "clean-css": "4.2.1",
     "copy-webpack-plugin": "5.0.2",
@@ -58,6 +58,7 @@
     "worker-plugin": "3.1.0"
   },
   "peerDependencies": {
+    "@angular/compiler-cli": ">=8.0.0-beta.0 < 9.0.0",
     "typescript": ">=3.1 < 3.5"
   },
   "keywords": [

package/src/angular-cli-files/models/build-options.d.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { logging } from '@angular-devkit/core';
-import { ParsedCommandLine, ScriptTarget } from 'typescript';
+import { ParsedConfiguration } from '@angular/compiler-cli';
+import { ScriptTarget } from 'typescript';
 import { AssetPatternClass, Budget, ExtraEntryPoint, OptimizationClass, SourceMapClass } from '../../browser/schema';
 import { NormalizedFileReplacement } from '../../utils/normalize-file-replacements';
 export interface BuildOptions {
@@ -78,7 +79,7 @@ export interface WebpackConfigOptions<T = BuildOptions> {
     projectRoot: string;
     sourceRoot?: string;
     buildOptions: T;
-    tsConfig: ParsedCommandLine;
+    tsConfig: ParsedConfiguration;
     tsConfigPath: string;
     supportES2015: boolean;
 }

package/src/angular-cli-files/models/es5-polyfills.js

@@ -8,6 +8,7 @@
 
 // ES2015 symbol capabilities
 import 'core-js/modules/es.symbol';
+import 'core-js/modules/es.symbol.iterator';
 
 // ES2015 function capabilities
 import 'core-js/modules/es.function.bind';

package/src/angular-cli-files/models/safari-nomodule.js

@@ -1,22 +1,8 @@
-/**
- * Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
- * load <script nomodule> anyway. This snippet solve this problem, but only for script
- * tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
- *
- * Again: this will **not** prevent inline script, e.g.:
- * <script nomodule>alert('no modules');</script>.
- *
- * This workaround is possible because Safari supports the non-standard 'beforeload' event.
- * This allows us to trap the module and nomodule load.
- *
- * Note also that `nomodule` is supported in later versions of Safari - it's just 10.1 that
- * omits this attribute.
- */
-(function() {
+(function () {
   var check = document.createElement('script');
   if (!('noModule' in check) && 'onbeforeload' in check) {
     var support = false;
-    document.addEventListener('beforeload', function(e) {
+    document.addEventListener('beforeload', function (e) {
       if (e.target === check) {
         support = true;
       } else if (!e.target.hasAttribute('nomodule') || !support) {
@@ -30,4 +16,4 @@
     document.head.appendChild(check);
     check.remove();
   }
-}());
+}());

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

@@ -12,7 +12,7 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 const path = require("path");
 const typescript_1 = require("typescript");
 const webpack_1 = require("webpack");
-const differential_loading_1 = require("../../../utils/differential-loading");
+const build_browser_features_1 = require("../../../utils/build-browser-features");
 const bundle_budget_1 = require("../../plugins/bundle-budget");
 const cleancss_webpack_plugin_1 = require("../../plugins/cleancss-webpack-plugin");
 const named_chunks_plugin_1 = require("../../plugins/named-chunks-plugin");
@@ -31,7 +31,7 @@ exports.buildOptimizerLoader = g['_DevKitIsLocal']
     : '@angular-devkit/build-optimizer/webpack-loader';
 // tslint:disable-next-line:no-big-function
 function getCommonConfig(wco) {
-    const { root, projectRoot, buildOptions } = wco;
+    const { root, projectRoot, buildOptions, tsConfig } = wco;
     const { styles: stylesOptimization, scripts: scriptsOptimization } = buildOptions.optimization;
     const { styles: stylesSourceMap, scripts: scriptsSourceMap, vendor: vendorSourceMap, } = buildOptions.sourceMap;
     const nodeModules = find_up_1.findUp('node_modules', projectRoot);
@@ -46,27 +46,31 @@ function getCommonConfig(wco) {
         entryPoints['main'] = [path.resolve(root, buildOptions.main)];
     }
     if (wco.buildOptions.platform !== 'server') {
-        const es5Polyfills = path.join(__dirname, '..', 'es5-polyfills.js');
-        const es5JitPolyfills = path.join(__dirname, '..', 'es5-jit-polyfills.js');
-        if (targetInFileName) {
-            // For differential loading we don't need to have 2 polyfill bundles
-            if (buildOptions.scriptTargetOverride === typescript_1.ScriptTarget.ES2015) {
-                entryPoints['polyfills'] = [path.join(__dirname, '..', 'safari-nomodule.js')];
-            }
-            else {
-                entryPoints['polyfills'] = [es5Polyfills];
-                if (!buildOptions.aot) {
-                    entryPoints['polyfills'].push(es5JitPolyfills);
+        const buildBrowserFeatures = new build_browser_features_1.BuildBrowserFeatures(projectRoot, tsConfig.options.target || typescript_1.ScriptTarget.ES5);
+        if ((buildOptions.scriptTargetOverride || tsConfig.options.target) === typescript_1.ScriptTarget.ES5) {
+            if (buildOptions.es5BrowserSupport ||
+                (buildOptions.es5BrowserSupport === undefined &&
+                    buildBrowserFeatures.isEs5SupportNeeded())) {
+                // The nomodule polyfill needs to be inject prior to any script and be
+                // outside of webpack compilation because otherwise webpack will cause the
+                // script to be wrapped in window["webpackJsonp"] which causes this to fail.
+                if (buildBrowserFeatures.isNoModulePolyfillNeeded()) {
+                    const noModuleScript = {
+                        bundleName: 'polyfills-nomodule-es5',
+                        input: path.join(__dirname, '..', 'safari-nomodule.js'),
+                    };
+                    buildOptions.scripts = buildOptions.scripts
+                        ? [...buildOptions.scripts, noModuleScript]
+                        : [noModuleScript];
                 }
-            }
-        }
-        else {
-            // For NON differential loading we want to have 2 polyfill bundles
-            if (buildOptions.es5BrowserSupport
-                || (buildOptions.es5BrowserSupport === undefined && differential_loading_1.isEs5SupportNeeded(projectRoot))) {
-                entryPoints['polyfills-es5'] = [es5Polyfills];
+                // For differential loading we don't need to generate a seperate polyfill file
+                // because they will be loaded exclusivly based on module and nomodule
+                const polyfillsChunkName = buildBrowserFeatures.isDifferentialLoadingNeeded()
+                    ? 'polyfills'
+                    : 'polyfills-es5';
+                entryPoints[polyfillsChunkName] = [path.join(__dirname, '..', 'es5-polyfills.js')];
                 if (!buildOptions.aot) {
-                    entryPoints['polyfills-es5'].push(es5JitPolyfills);
+                    entryPoints[polyfillsChunkName].push(path.join(__dirname, '..', 'es5-jit-polyfills.js'));
                 }
             }
         }

package/src/angular-cli-files/models/webpack-configs/typescript.d.ts

@@ -9,7 +9,7 @@ export declare function getNonAotConfig(wco: WebpackConfigOptions): {
     };
     plugins: AngularCompilerPlugin[];
 };
-export declare function getAotConfig(wco: WebpackConfigOptions, extract?: boolean): {
+export declare function getAotConfig(wco: WebpackConfigOptions, i18nExtract?: boolean): {
     module: {
         rules: {
             test: RegExp;

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

@@ -34,12 +34,12 @@ function _pluginOptionsOverrides(buildOptions, pluginOptions) {
         compilerOptions
     };
 }
-function _createAotPlugin(wco, options, useMain = true, extract = false) {
+function _createAotPlugin(wco, options, i18nExtract = false) {
     const { root, buildOptions } = wco;
     const i18nInFile = buildOptions.i18nFile
         ? path.resolve(root, buildOptions.i18nFile)
         : undefined;
-    const i18nFileAndFormat = extract
+    const i18nFileAndFormat = i18nExtract
         ? {
             i18nOutFile: buildOptions.i18nFile,
             i18nOutFormat: buildOptions.i18nFormat,
@@ -54,7 +54,7 @@ function _createAotPlugin(wco, options, useMain = true, extract = false) {
         }
     }
     let pluginOptions = {
-        mainPath: useMain ? path.join(root, buildOptions.main) : undefined,
+        mainPath: path.join(root, buildOptions.main),
         ...i18nFileAndFormat,
         locale: buildOptions.i18nLocale,
         platform: buildOptions.platform === 'server' ? webpack_1.PLATFORM.Server : webpack_1.PLATFORM.Browser,
@@ -79,7 +79,7 @@ function getNonAotConfig(wco) {
     };
 }
 exports.getNonAotConfig = getNonAotConfig;
-function getAotConfig(wco, extract = false) {
+function getAotConfig(wco, i18nExtract = false) {
     const { tsConfigPath, buildOptions } = wco;
     const loaders = [webpack_1.NgToolsLoader];
     if (buildOptions.buildOptimizer) {
@@ -91,7 +91,7 @@ function getAotConfig(wco, extract = false) {
     const test = /(?:\.ngfactory\.js|\.ngstyle\.js|\.tsx?)$/;
     return {
         module: { rules: [{ test, use: loaders }] },
-        plugins: [_createAotPlugin(wco, { tsConfigPath }, true, extract)]
+        plugins: [_createAotPlugin(wco, { tsConfigPath }, i18nExtract)]
     };
 }
 exports.getAotConfig = getAotConfig;

package/src/angular-cli-files/models/webpack-configs/utils.d.ts

@@ -8,7 +8,6 @@
 import { ExtraEntryPoint, ExtraEntryPointClass } from '../../../browser/schema';
 import { SourceMapDevToolPlugin } from 'webpack';
 import { ScriptTarget } from 'typescript';
-export declare const ngAppResolve: (resolvePath: string) => string;
 export interface HashFormat {
     chunk: string;
     extract: string;

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

@@ -9,13 +9,9 @@
 // tslint:disable
 // TODO: cleanup this file, it's copied as is from Angular CLI.
 Object.defineProperty(exports, "__esModule", { value: true });
-const path = require("path");
 const core_1 = require("@angular-devkit/core");
 const webpack_1 = require("webpack");
 const typescript_1 = require("typescript");
-exports.ngAppResolve = (resolvePath) => {
-    return path.resolve(process.cwd(), resolvePath);
-};
 function getOutputHashFormat(option, length = 20) {
     /* tslint:disable:max-line-length */
     const hashFormats = {

package/src/angular-cli-files/plugins/karma.js

@@ -60,15 +60,14 @@ const init = (config, emitter, customFileHandlers) => {
     const logger = config.buildWebpack.logger || node_1.createConsoleLogger();
     successCb = config.buildWebpack.successCb;
     failureCb = config.buildWebpack.failureCb;
-    config.reporters.unshift('@angular-devkit/build-angular--event-reporter');
     // When using code-coverage, auto-add coverage-istanbul.
     config.reporters = config.reporters || [];
     if (options.codeCoverage && config.reporters.indexOf('coverage-istanbul') === -1) {
-        config.reporters.unshift('coverage-istanbul');
+        config.reporters.push('coverage-istanbul');
     }
     // Add a reporter that fixes sourcemap urls.
     if (index_1.normalizeSourceMaps(options.sourceMap).scripts) {
-        config.reporters.unshift('@angular-devkit/build-angular--sourcemap-reporter');
+        config.reporters.push('@angular-devkit/build-angular--sourcemap-reporter');
         // Code taken from https://github.com/tschaub/karma-source-map-support.
         // We can't use it directly because we need to add it conditionally in this file, and karma
         // frameworks cannot be added dynamically.
@@ -79,6 +78,7 @@ const init = (config, emitter, customFileHandlers) => {
             { pattern: path.join(ksmsPath, 'client.js'), watched: false }
         ], true);
     }
+    config.reporters.push('@angular-devkit/build-angular--event-reporter');
     // Add webpack config.
     const webpackConfig = config.buildWebpack.webpackConfig;
     const webpackMiddlewareConfig = {

package/src/angular-cli-files/utilities/index-file/write-index-html.js

@@ -21,7 +21,7 @@ function writeIndexHtml({ host, outputPath, indexPath, ES5BuildFiles, ES2015Buil
         deployUrl,
         sri,
         entrypoints: package_chunk_sort_1.generateEntryPoints({ scripts, styles }),
-        files: filterAndMapBuildFiles(ES5BuildFiles, '.css'),
+        files: filterAndMapBuildFiles(ES2015BuildFiles, '.css'),
         noModuleFiles: filterAndMapBuildFiles(ES5BuildFiles, '.js'),
         moduleFiles: filterAndMapBuildFiles(ES2015BuildFiles, '.js'),
         loadOutputFile: async (filePath) => {

package/src/angular-cli-files/utilities/package-chunk-sort.js

@@ -11,6 +11,7 @@ function generateEntryPoints(appConfig) {
         return [...new Set(entryPoints)];
     };
     const entryPoints = [
+        'polyfills-nomodule-es5',
         'polyfills-es5',
         'polyfills',
         'sw-register',

package/src/angular-cli-files/utilities/read-tsconfig.d.ts

@@ -5,5 +5,12 @@
  * 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 ts from 'typescript';
-export declare function readTsconfig(tsconfigPath: string): ts.ParsedCommandLine;
+import { ParsedConfiguration } from '@angular/compiler-cli';
+/**
+ * Reads and parses a given TsConfig file.
+ *
+ * @param tsconfigPath - An absolute or relative path from 'workspaceRoot' of the tsconfig file.
+ * @param workspaceRoot - workspaceRoot root location when provided
+ * it will resolve 'tsconfigPath' from this path.
+ */
+export declare function readTsconfig(tsconfigPath: string, workspaceRoot?: string): ParsedConfiguration;

package/src/angular-cli-files/utilities/read-tsconfig.js

@@ -1,14 +1,31 @@
 "use strict";
+/**
+ * @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
+ */
 Object.defineProperty(exports, "__esModule", { value: true });
 const path = require("path");
-const require_project_module_1 = require("../utilities/require-project-module");
-function readTsconfig(tsconfigPath) {
-    const projectTs = require_project_module_1.requireProjectModule(path.dirname(tsconfigPath), 'typescript');
-    const configResult = projectTs.readConfigFile(tsconfigPath, projectTs.sys.readFile);
-    const tsConfig = projectTs.parseJsonConfigFileContent(configResult.config, projectTs.sys, path.dirname(tsconfigPath), undefined, tsconfigPath);
-    if (tsConfig.errors.length > 0) {
-        throw new Error(`Errors found while reading ${tsconfigPath}:\n  ${tsConfig.errors.map(e => e.messageText).join('\n  ')}`);
+/**
+ * Reads and parses a given TsConfig file.
+ *
+ * @param tsconfigPath - An absolute or relative path from 'workspaceRoot' of the tsconfig file.
+ * @param workspaceRoot - workspaceRoot root location when provided
+ * it will resolve 'tsconfigPath' from this path.
+ */
+function readTsconfig(tsconfigPath, workspaceRoot) {
+    const tsConfigFullPath = workspaceRoot
+        ? path.resolve(workspaceRoot, tsconfigPath)
+        : tsconfigPath;
+    // We use 'ng' instead of 'ts' here because 'ts' is not aware of 'angularCompilerOptions'
+    // and will not merged them if they are at un upper level tsconfig file when using `extends`.
+    const ng = require('@angular/compiler-cli');
+    const configResult = ng.readConfiguration(tsConfigFullPath);
+    if (configResult.errors && configResult.errors.length) {
+        throw new Error(ng.formatDiagnostics(configResult.errors));
     }
-    return tsConfig;
+    return configResult;
 }
 exports.readTsconfig = readTsconfig;

package/src/angular-cli-files/utilities/service-worker/index.js

@@ -68,7 +68,7 @@ async function augmentAppWithServiceWorker(host, projectRoot, appRoot, outputPat
     if (!configExists) {
         throw new Error(core_1.tags.oneLine `
       Error: Expected to find an ngsw-config.json configuration
-      file in the ${appRoot} folder. Either provide one or disable Service Worker
+      file in the ${core_1.getSystemPath(appRoot)} folder. Either provide one or disable Service Worker
       in your angular.json configuration file.
     `);
     }

package/src/browser/index.js

@@ -61,7 +61,9 @@ function getAnalyticsConfig(wco, context) {
         let category = 'build';
         if (context.builder) {
             // We already vetted that this is a "safe" package, otherwise the analytics would be noop.
-            category = context.builder.builderName.split(':')[1];
+            category = context.builder.builderName.split(':')[1]
+                || context.builder.builderName
+                || 'build';
         }
         // The category is the builder name if it's an angular builder.
         return {
@@ -106,11 +108,10 @@ function buildWebpackBrowser(options, context, transforms = {}) {
             throw new Error('Must either have a target from the context or a default project.');
         }
         const projectRoot = core_1.resolve(workspace.root, core_1.normalize(workspace.getProject(projectName).root));
-        const tsConfigPath = path.resolve(core_1.getSystemPath(workspace.root), options.tsConfig);
-        const tsConfig = read_tsconfig_1.readTsconfig(tsConfigPath);
-        if (utils_1.isEs5SupportNeeded(projectRoot) &&
-            tsConfig.options.target !== typescript_1.ScriptTarget.ES5 &&
-            tsConfig.options.target !== typescript_1.ScriptTarget.ES2015) {
+        const tsConfig = read_tsconfig_1.readTsconfig(options.tsConfig, context.workspaceRoot);
+        const target = tsConfig.options.target || typescript_1.ScriptTarget.ES5;
+        const buildBrowserFeatures = new utils_1.BuildBrowserFeatures(core_1.getSystemPath(projectRoot), target);
+        if (target > typescript_1.ScriptTarget.ES2015 && buildBrowserFeatures.isDifferentialLoadingNeeded()) {
             context.logger.warn(core_1.tags.stripIndent `
           WARNING: Using differential loading with targets ES5 and ES2016 or higher may
           cause problems. Browsers with support for ES2015 will load the ES2016+ scripts
@@ -145,14 +146,14 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                     scripts: options.scripts,
                     styles: options.styles,
                 })
-                    .pipe(operators_1.map(() => ({ success: true })), operators_1.catchError(() => rxjs_1.of({ success: false })));
+                    .pipe(operators_1.map(() => ({ success: true })), operators_1.catchError(error => rxjs_1.of({ success: false, error: mapErrorToMessage(error) })));
             }
             else {
                 return rxjs_1.of({ success });
             }
         }), operators_1.concatMap(buildEvent => {
             if (buildEvent.success && !options.watch && options.serviceWorker) {
-                return rxjs_1.from(service_worker_1.augmentAppWithServiceWorker(host, root, projectRoot, core_1.resolve(root, core_1.normalize(options.outputPath)), options.baseHref || '/', options.ngswConfigPath).then(() => ({ success: true }), () => ({ success: false })));
+                return rxjs_1.from(service_worker_1.augmentAppWithServiceWorker(host, root, projectRoot, core_1.resolve(root, core_1.normalize(options.outputPath)), options.baseHref || '/', options.ngswConfigPath).then(() => ({ success: true }), error => ({ success: false, error: mapErrorToMessage(error) })));
             }
             else {
                 return rxjs_1.of(buildEvent);
@@ -165,4 +166,13 @@ function buildWebpackBrowser(options, context, transforms = {}) {
     }));
 }
 exports.buildWebpackBrowser = buildWebpackBrowser;
+function mapErrorToMessage(error) {
+    if (error instanceof Error) {
+        return error.message;
+    }
+    if (typeof error === 'string') {
+        return error;
+    }
+    return undefined;
+}
 exports.default = architect_1.createBuilder(buildWebpackBrowser);

package/src/extract-i18n/index.js

@@ -12,6 +12,7 @@ const build_webpack_1 = require("@angular-devkit/build-webpack");
 const path = require("path");
 const webpack = require("webpack");
 const webpack_configs_1 = require("../angular-cli-files/models/webpack-configs");
+const read_tsconfig_1 = require("../angular-cli-files/utilities/read-tsconfig");
 const stats_1 = require("../angular-cli-files/utilities/stats");
 const version_1 = require("../utils/version");
 const webpack_browser_config_1 = require("../utils/webpack-browser-config");
@@ -40,6 +41,13 @@ async function execute(options, context) {
     version_1.Version.assertCompatibleAngularVersion(context.workspaceRoot);
     const browserTarget = architect_1.targetFromTargetString(options.browserTarget);
     const browserOptions = await context.validateOptions(await context.getTargetOptions(browserTarget), await context.getBuilderNameForTarget(browserTarget));
+    // FIXME: i18n is not yet implemented in Ivy
+    // We should display a warning and exit gracefully.
+    const { options: compilerOptions } = read_tsconfig_1.readTsconfig(browserOptions.tsConfig, context.workspaceRoot);
+    if (compilerOptions.enableIvy) {
+        context.logger.warn('We are sorry but i18n is not yet implemented in Ivy.');
+        return { success: true };
+    }
     // We need to determine the outFile name so that AngularCompiler can retrieve it.
     let outFile = options.outFile || getI18nOutfile(options.i18nFormat);
     if (options.outputPath) {
@@ -52,6 +60,7 @@ async function execute(options, context) {
             scripts: false,
             styles: false,
         },
+        buildOptimizer: false,
         i18nLocale: options.i18nLocale,
         i18nFormat: options.i18nFormat,
         i18nFile: outFile,

package/src/karma/index.js

@@ -81,7 +81,7 @@ function execute(options, context, transforms = {}) {
                 return karmaStart.then(() => karmaServerWithStop.stop());
             }
         };
-    })));
+    })), operators_1.defaultIfEmpty({ success: false }));
 }
 exports.execute = execute;
 exports.default = architect_1.createBuilder(execute);

package/src/utils/build-browser-features.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @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 ts from 'typescript';
+export declare class BuildBrowserFeatures {
+    private projectRoot;
+    private scriptTarget;
+    private readonly _supportedBrowsers;
+    private readonly _es6TargetOrLater;
+    constructor(projectRoot: string, scriptTarget: ts.ScriptTarget);
+    /**
+     * True, when one or more browsers requires ES5
+     * support and the scirpt target is ES2015 or greater.
+     */
+    isDifferentialLoadingNeeded(): boolean;
+    /**
+     * True, when one or more browsers requires ES5 support
+     */
+    isEs5SupportNeeded(): boolean;
+    /**
+     * Safari 10.1 and iOS Safari 10.3 supports modules,
+     * but does not support the `nomodule` attribute.
+     * While return `true`, when support for Safari 10.1 and iOS Safari 10.3
+     * is required and in differential loading is enabled.
+     */
+    isNoModulePolyfillNeeded(): boolean;
+    /**
+     * True, when a browser feature is supported partially or fully.
+     */
+    isFeatureSupported(featureId: string): boolean;
+}

package/src/utils/build-browser-features.js

@@ -0,0 +1,74 @@
+"use strict";
+/**
+ * @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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const browserslist = require("browserslist");
+const caniuse_lite_1 = require("caniuse-lite");
+const ts = require("typescript");
+class BuildBrowserFeatures {
+    constructor(projectRoot, scriptTarget) {
+        this.projectRoot = projectRoot;
+        this.scriptTarget = scriptTarget;
+        this._supportedBrowsers = browserslist(undefined, { path: this.projectRoot });
+        this._es6TargetOrLater = this.scriptTarget > ts.ScriptTarget.ES5;
+    }
+    /**
+     * True, when one or more browsers requires ES5
+     * support and the scirpt target is ES2015 or greater.
+     */
+    isDifferentialLoadingNeeded() {
+        return this._es6TargetOrLater && this.isEs5SupportNeeded();
+    }
+    /**
+     * True, when one or more browsers requires ES5 support
+     */
+    isEs5SupportNeeded() {
+        return !this.isFeatureSupported('es6-module');
+    }
+    /**
+     * Safari 10.1 and iOS Safari 10.3 supports modules,
+     * but does not support the `nomodule` attribute.
+     * While return `true`, when support for Safari 10.1 and iOS Safari 10.3
+     * is required and in differential loading is enabled.
+     */
+    isNoModulePolyfillNeeded() {
+        if (!this.isDifferentialLoadingNeeded()) {
+            return false;
+        }
+        const safariBrowsers = [
+            'safari 10.1',
+            'ios_saf 10.3',
+        ];
+        return this._supportedBrowsers.some(browser => safariBrowsers.includes(browser));
+    }
+    /**
+     * True, when a browser feature is supported partially or fully.
+     */
+    isFeatureSupported(featureId) {
+        // y: feature is fully available
+        // n: feature is unavailable
+        // a: feature is partially supported
+        // x: feature is prefixed
+        const criteria = [
+            'y',
+            'a',
+        ];
+        const data = caniuse_lite_1.feature(caniuse_lite_1.features[featureId]);
+        return !this._supportedBrowsers
+            .some(browser => {
+            const [agentId, version] = browser.split(' ');
+            const browserData = data.stats[agentId];
+            const featureStatus = (browserData && browserData[version]);
+            // We are only interested in the first character
+            // Ex: when 'a #4 #5', we only need to check for 'a'
+            // as for such cases we should polyfill these features as needed
+            return !featureStatus || !criteria.includes(featureStatus.charAt(0));
+        });
+    }
+}
+exports.BuildBrowserFeatures = BuildBrowserFeatures;

package/src/utils/index.d.ts

@@ -5,9 +5,9 @@
  * 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
  */
+export * from './build-browser-features';
 export * from './default-progress';
 export * from './delete-output-dir';
-export * from './differential-loading';
 export * from './run-module-as-observable-fork';
 export * from './normalize-file-replacements';
 export * from './normalize-asset-patterns';

package/src/utils/index.js

@@ -1,8 +1,4 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-Object.defineProperty(exports, "__esModule", { value: true });
 /**
  * @license
  * Copyright Google Inc. All Rights Reserved.
@@ -10,9 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * 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
  */
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+__export(require("./build-browser-features"));
 __export(require("./default-progress"));
 __export(require("./delete-output-dir"));
-__export(require("./differential-loading"));
 __export(require("./run-module-as-observable-fork"));
 __export(require("./normalize-file-replacements"));
 __export(require("./normalize-asset-patterns"));

package/src/utils/webpack-browser-config.js

@@ -6,7 +6,7 @@ const path = require("path");
 const webpack_configs_1 = require("../angular-cli-files/models/webpack-configs");
 const read_tsconfig_1 = require("../angular-cli-files/utilities/read-tsconfig");
 const utils_1 = require("../utils");
-const differential_loading_1 = require("./differential-loading");
+const build_browser_features_1 = require("./build-browser-features");
 const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
 const webpackMerge = require('webpack-merge');
 async function generateWebpackConfig(context, workspaceRoot, projectRoot, sourceRoot, options, webpackPartialGenerator, logger) {
@@ -20,9 +20,11 @@ async function generateWebpackConfig(context, workspaceRoot, projectRoot, source
     const ts = await Promise.resolve().then(() => require('typescript'));
     // At the moment, only the browser builder supports differential loading
     // However this config generation is used by multiple builders such as dev-server
-    const scriptTarget = tsConfig.options.target;
+    const scriptTarget = tsConfig.options.target || ts.ScriptTarget.ES5;
+    const buildBrowserFeatures = new build_browser_features_1.BuildBrowserFeatures(projectRoot, scriptTarget);
     const differentialLoading = context.builder.builderName === 'browser'
-        && differential_loading_1.isDifferentialLoadingNeeded(projectRoot, scriptTarget) && !options.watch;
+        && !options.watch
+        && buildBrowserFeatures.isDifferentialLoadingNeeded();
     const scriptTargets = [scriptTarget];
     if (differentialLoading) {
         scriptTargets.unshift(ts.ScriptTarget.ES5);
@@ -30,18 +32,26 @@ async function generateWebpackConfig(context, workspaceRoot, projectRoot, source
     // For differential loading, we can have several targets
     return scriptTargets.map(scriptTarget => {
         let buildOptions = { ...options };
+        const supportES2015 = scriptTarget !== ts.ScriptTarget.ES3 && scriptTarget !== ts.ScriptTarget.ES5;
         if (differentialLoading) {
-            // For differential loading, the builder needs to created the index.html by itself
-            // without using a webpack plugin.
             buildOptions = {
                 ...options,
+                ...(
+                // FIXME: we do create better webpack config composition to achieve the below
+                // When DL is enabled and supportES2015 is true it means that we are on the second build
+                // This also means that we don't need to include styles and assets multiple times
+                supportES2015
+                    ? {}
+                    : {
+                        styles: options.extractCss ? [] : options.styles,
+                        assets: [],
+                    }),
                 es5BrowserSupport: undefined,
                 index: '',
                 esVersionInFileName: true,
                 scriptTargetOverride: scriptTarget,
             };
         }
-        const supportES2015 = scriptTarget !== ts.ScriptTarget.ES3 && scriptTarget !== ts.ScriptTarget.ES5;
         const wco = {
             root: workspaceRoot,
             logger: logger.createChild('webpackConfigOptions'),

package/src/utils/differential-loading.d.ts

@@ -1,10 +0,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
- */
-import { ScriptTarget } from 'typescript';
-export declare function isDifferentialLoadingNeeded(projectRoot: string, target?: ScriptTarget): boolean;
-export declare function isEs5SupportNeeded(projectRoot: string): boolean;

package/src/utils/differential-loading.js

@@ -1,24 +0,0 @@
-"use strict";
-/**
- * @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
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-const browserslist = require("browserslist");
-const caniuse = require("caniuse-api");
-const typescript_1 = require("typescript");
-function isDifferentialLoadingNeeded(projectRoot, target = typescript_1.ScriptTarget.ES5) {
-    const supportES2015 = target !== typescript_1.ScriptTarget.ES3 && target !== typescript_1.ScriptTarget.ES5;
-    return supportES2015 && isEs5SupportNeeded(projectRoot);
-}
-exports.isDifferentialLoadingNeeded = isDifferentialLoadingNeeded;
-function isEs5SupportNeeded(projectRoot) {
-    const browsersList = browserslist(undefined, {
-        path: projectRoot,
-    });
-    return !caniuse.isSupported('es6-module', browsersList.join(', '));
-}
-exports.isEs5SupportNeeded = isEs5SupportNeeded;