@angular-devkit/build-angular 0.1101.0-next.3 → 0.1101.1

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

@@ -7,6 +7,7 @@ const path = require("path");
 const webpack_merge_1 = require("webpack-merge");
 const utils_1 = require("../utils");
 const read_tsconfig_1 = require("../utils/read-tsconfig");
+const builder_watch_plugin_1 = require("../webpack/plugins/builder-watch-plugin");
 const helpers_1 = require("../webpack/utils/helpers");
 const environment_options_1 = require("./environment-options");
 const i18n_options_1 = require("./i18n-options");
@@ -40,7 +41,7 @@ async function generateWebpackConfig(workspaceRoot, projectRoot, sourceRoot, opt
         buildOptions,
         tsConfig,
         tsConfigPath,
-        supportES2015,
+        scriptTarget,
     };
     wco.buildOptions.progress = utils_1.defaultProgress(wco.buildOptions.progress);
     const webpackConfig = webpack_merge_1.merge(webpackPartialGenerator(wco));
@@ -62,7 +63,7 @@ async function generateWebpackConfig(workspaceRoot, projectRoot, sourceRoot, opt
         }
     }
     if (environment_options_1.profilingEnabled) {
-        const esVersionInFileName = helpers_1.getEsVersionForFileName(tsConfig.options.target, buildOptions.differentialLoadingMode);
+        const esVersionInFileName = helpers_1.getEsVersionForFileName(tsConfig.options.target, buildOptions.differentialLoadingNeeded);
         const SpeedMeasurePlugin = await Promise.resolve().then(() => require('speed-measure-webpack-plugin'));
         const smp = new SpeedMeasurePlugin({
             outputFormat: 'json',
@@ -135,6 +136,15 @@ async function generateBrowserWebpackConfigFromContext(options, context, webpack
         : undefined;
     const normalizedOptions = utils_1.normalizeBrowserSchema(host, workspaceRoot, projectRoot, sourceRoot, options);
     const config = await generateWebpackConfig(core_1.getSystemPath(workspaceRoot), core_1.getSystemPath(projectRoot), sourceRoot && core_1.getSystemPath(sourceRoot), normalizedOptions, webpackPartialGenerator, context.logger, extraBuildOptions);
+    // If builder watch support is present in the context, add watch plugin
+    // This is internal only and currently only used for testing
+    const watcherFactory = context.watcherFactory;
+    if (watcherFactory) {
+        if (!config.plugins) {
+            config.plugins = [];
+        }
+        config.plugins.push(new builder_watch_plugin_1.BuilderWatchPlugin(watcherFactory));
+    }
     return {
         config,
         projectRoot: core_1.getSystemPath(projectRoot),

package/src/webpack/configs/browser.js

@@ -28,7 +28,7 @@ function getBrowserConfig(wco) {
         }));
     }
     if (scriptsSourceMap || stylesSourceMap) {
-        extraPlugins.push(helpers_1.getSourceMapDevTool(scriptsSourceMap, stylesSourceMap, buildOptions.differentialLoadingMode ? true : hiddenSourceMap, false));
+        extraPlugins.push(helpers_1.getSourceMapDevTool(scriptsSourceMap, stylesSourceMap, buildOptions.differentialLoadingNeeded && !buildOptions.watch ? true : hiddenSourceMap, false));
     }
     let crossOriginLoading = false;
     if (subresourceIntegrity && crossOrigin === 'none') {

package/src/webpack/configs/common.js

@@ -35,7 +35,7 @@ function getCommonConfig(wco) {
     const entryPoints = {};
     // determine hashing format
     const hashFormat = helpers_1.getOutputHashFormat(buildOptions.outputHashing || 'none');
-    const targetInFileName = helpers_1.getEsVersionForFileName(tsConfig.options.target, buildOptions.differentialLoadingMode);
+    const targetInFileName = helpers_1.getEsVersionForFileName(tsConfig.options.target, buildOptions.differentialLoadingNeeded);
     if (buildOptions.main) {
         const mainPath = path.resolve(root, buildOptions.main);
         entryPoints['main'] = [mainPath];
@@ -78,7 +78,7 @@ function getCommonConfig(wco) {
             });
         }
     }
-    const differentialLoadingMode = buildOptions.differentialLoadingMode;
+    const differentialLoadingMode = buildOptions.differentialLoadingNeeded && !buildOptions.watch;
     if (platform !== 'server') {
         if (differentialLoadingMode || tsConfig.options.target === typescript_1.ScriptTarget.ES5) {
             const buildBrowserFeatures = new utils_1.BuildBrowserFeatures(projectRoot);
@@ -439,35 +439,19 @@ function getCommonConfig(wco) {
                     sideEffects: true,
                 },
                 {
-                    test: /\.m?js$/,
-                    exclude: [/[\/\\](?:core-js|\@babel|tslib)[\/\\]/, /(ngfactory|ngstyle)\.js$/],
+                    test: /\.[cm]?js$/,
+                    exclude: [/[\/\\](?:core-js|\@babel|tslib|web-animations-js)[\/\\]/, /(ngfactory|ngstyle)\.js$/],
                     use: [
-                        ...(wco.supportES2015
-                            ? []
-                            : [
-                                {
-                                    loader: require.resolve('babel-loader'),
-                                    options: {
-                                        babelrc: false,
-                                        configFile: false,
-                                        compact: false,
-                                        cacheCompression: false,
-                                        cacheDirectory: cache_path_1.findCachePath('babel-webpack'),
-                                        cacheIdentifier: JSON.stringify({
-                                            buildAngular: require('../../../package.json').version,
-                                        }),
-                                        sourceType: 'unambiguous',
-                                        presets: [
-                                            [
-                                                require.resolve('../../babel/presets/application'),
-                                                {
-                                                    forceES5: true,
-                                                },
-                                            ],
-                                        ],
-                                    },
-                                },
-                            ]),
+                        {
+                            loader: require.resolve('../../babel/webpack-loader'),
+                            options: {
+                                cacheDirectory: cache_path_1.findCachePath('babel-webpack'),
+                                cacheIdentifier: JSON.stringify({
+                                    buildAngular: require('../../../package.json').version,
+                                }),
+                                scriptTarget: wco.scriptTarget,
+                            },
+                        },
                         ...buildOptimizerUseRule,
                     ],
                 },

package/src/webpack/configs/styles.js

@@ -40,6 +40,9 @@ function getStylesConfig(wco) {
                 }
                 catch (_a) { }
             }
+            if (!buildOptions.preserveSymlinks) {
+                resolvedPath = fs.realpathSync(resolvedPath);
+            }
             // Add style entry points.
             if (entryPoints[style.bundleName]) {
                 entryPoints[style.bundleName].push(resolvedPath);
@@ -106,6 +109,7 @@ function getStylesConfig(wco) {
                 {
                     loader: require.resolve('less-loader'),
                     options: {
+                        implementation: require('less'),
                         sourceMap: cssSourceMap,
                         lessOptions: {
                             javascriptEnabled: true,
@@ -183,6 +187,7 @@ function getStylesConfig(wco) {
             {
                 loader: require.resolve('postcss-loader'),
                 options: {
+                    implementation: require('postcss'),
                     postcssOptions: postcssOptionsCreator(componentsSourceMap, false),
                 },
             },
@@ -212,6 +217,7 @@ function getStylesConfig(wco) {
                     {
                         loader: require.resolve('postcss-loader'),
                         options: {
+                            implementation: require('postcss'),
                             postcssOptions: postcssOptionsCreator(globalSourceMap, buildOptions.extractCss),
                         },
                     },

package/src/webpack/es5-polyfills.js

@@ -32,6 +32,10 @@ import 'core-js/modules/es.object.assign';
 import 'core-js/modules/es.object.is';
 import 'core-js/modules/es.object.set-prototype-of';
 import 'core-js/modules/es.object.to-string';
+import 'core-js/modules/es.object.entries';
+import 'core-js/modules/es.object.values';
+import 'core-js/modules/es.object.get-own-property-descriptors';
+import 'core-js/modules/es.object.from-entries';
 
 // ES2015 array capabilities
 import 'core-js/modules/es.array.concat';
@@ -56,6 +60,9 @@ import 'core-js/modules/es.array.fill';
 import 'core-js/modules/es.array.find';
 import 'core-js/modules/es.array.find-index';
 import 'core-js/modules/es.array.iterator';
+import 'core-js/modules/es.array.includes';
+import 'core-js/modules/es.array.flat';
+import 'core-js/modules/es.array.flat-map';
 
 // ES2015 string capabilities
 import 'core-js/modules/es.string.from-code-point';

package/src/webpack/plugins/builder-watch-plugin.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @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 { Compiler } from 'webpack';
+export declare type BuilderWatcherCallback = (events: Array<{
+    path: string;
+    type: 'created' | 'modified' | 'deleted';
+    time?: number;
+}>) => void;
+export interface BuilderWatcherFactory {
+    watch(files: Iterable<string>, directories: Iterable<string>, callback: BuilderWatcherCallback): {
+        close(): void;
+    };
+}
+export interface WebpackWatcher {
+    close(): void;
+    pause(): void;
+    getFileTimestamps(): Map<string, number>;
+    getContextTimestamps(): Map<string, number>;
+    getFileTimeInfoEntries(): Map<string, {
+        safeTime: number;
+        timestamp: number;
+    }>;
+    getContextTimeInfoEntries(): Map<string, {
+        safeTime: number;
+        timestamp: number;
+    }>;
+}
+declare type WatchCallback4 = (error: Error | undefined, fileChanges: Set<string>, directoryChanges: Set<string>, missingChanges: Set<string>, files: Map<string, number>, contexts: Map<string, number>, removals: Set<string>) => void;
+declare type WatchCallback5 = (error: Error | undefined, files: Map<string, {
+    safeTime: number;
+    timestamp: number;
+}>, contexts: Map<string, {
+    safeTime: number;
+    timestamp: number;
+}>, changes: Set<string>, removals: Set<string>) => void;
+export interface WebpackWatchFileSystem {
+    watch(files: Iterable<string>, directories: Iterable<string>, missing: Iterable<string>, startTime: number, options: {}, callback: WatchCallback4 | WatchCallback5, callbackUndelayed: (file: string, time: number) => void): WebpackWatcher;
+}
+export declare class BuilderWatchPlugin {
+    private readonly watcherFactory;
+    constructor(watcherFactory: BuilderWatcherFactory);
+    apply(compiler: Compiler & {
+        watchFileSystem: WebpackWatchFileSystem;
+    }): void;
+}
+export {};

package/src/webpack/plugins/builder-watch-plugin.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BuilderWatchPlugin = void 0;
+const webpack_version_1 = require("../../utils/webpack-version");
+class TimeInfoMap extends Map {
+    update(path, timestamp) {
+        this.set(path, Object.freeze({ safeTime: timestamp, timestamp }));
+    }
+    toTimestamps() {
+        const timestamps = new Map();
+        for (const [file, entry] of this) {
+            timestamps.set(file, entry.timestamp);
+        }
+        return timestamps;
+    }
+}
+class BuilderWatchFileSystem {
+    constructor(watcherFactory, inputFileSystem) {
+        this.watcherFactory = watcherFactory;
+        this.inputFileSystem = inputFileSystem;
+    }
+    watch(files, directories, missing, startTime, _options, callback, callbackUndelayed) {
+        const watchedFiles = new Set(files);
+        const watchedDirectories = new Set(directories);
+        const watchedMissing = new Set(missing);
+        const timeInfo = new TimeInfoMap();
+        for (const file of files) {
+            timeInfo.update(file, startTime);
+        }
+        for (const directory of directories) {
+            timeInfo.update(directory, startTime);
+        }
+        const watcher = this.watcherFactory.watch(files, directories, (events) => {
+            if (events.length === 0) {
+                return;
+            }
+            if (callbackUndelayed) {
+                process.nextTick(() => { var _a; return callbackUndelayed(events[0].path, (_a = events[0].time) !== null && _a !== void 0 ? _a : Date.now()); });
+            }
+            process.nextTick(() => {
+                var _a, _b, _c;
+                const removals = new Set();
+                const fileChanges = new Set();
+                const directoryChanges = new Set();
+                const missingChanges = new Set();
+                for (const event of events) {
+                    (_b = (_a = this.inputFileSystem).purge) === null || _b === void 0 ? void 0 : _b.call(_a, event.path);
+                    if (event.type === 'deleted') {
+                        timeInfo.delete(event.path);
+                        removals.add(event.path);
+                    }
+                    else {
+                        timeInfo.update(event.path, (_c = event.time) !== null && _c !== void 0 ? _c : Date.now());
+                        if (watchedFiles.has(event.path)) {
+                            fileChanges.add(event.path);
+                        }
+                        else if (watchedDirectories.has(event.path)) {
+                            directoryChanges.add(event.path);
+                        }
+                        else if (watchedMissing.has(event.path)) {
+                            missingChanges.add(event.path);
+                        }
+                    }
+                }
+                if (webpack_version_1.isWebpackFiveOrHigher()) {
+                    callback(undefined, new Map(timeInfo), new Map(timeInfo), new Set([...fileChanges, ...directoryChanges, ...missingChanges]), removals);
+                }
+                else {
+                    callback(undefined, fileChanges, directoryChanges, missingChanges, timeInfo.toTimestamps(), timeInfo.toTimestamps(), removals);
+                }
+            });
+        });
+        return {
+            close() {
+                watcher.close();
+            },
+            pause() { },
+            getFileTimestamps() {
+                return timeInfo.toTimestamps();
+            },
+            getContextTimestamps() {
+                return timeInfo.toTimestamps();
+            },
+            getFileTimeInfoEntries() {
+                return new Map(timeInfo);
+            },
+            getContextTimeInfoEntries() {
+                return new Map(timeInfo);
+            },
+        };
+    }
+}
+class BuilderWatchPlugin {
+    constructor(watcherFactory) {
+        this.watcherFactory = watcherFactory;
+    }
+    apply(compiler) {
+        compiler.hooks.environment.tap('BuilderWatchPlugin', () => {
+            compiler.watchFileSystem = new BuilderWatchFileSystem(this.watcherFactory, compiler.inputFileSystem);
+        });
+    }
+}
+exports.BuilderWatchPlugin = BuilderWatchPlugin;

package/src/webpack/plugins/karma.d.ts

@@ -1,8 +1 @@
-/**
- * @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
- */
 export {};

package/src/webpack/plugins/karma.js

@@ -1,13 +1,4 @@
 "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
- */
-// 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 glob = require("glob");
@@ -25,6 +16,7 @@ const index_1 = require("../../utils/index");
  * require('source-map-support')
  * require('karma-source-map-support')
  */
+const KARMA_APPLICATION_PATH = '_karma_webpack_';
 let blocked = [];
 let isBlocked = false;
 let webpackMiddleware;
@@ -105,7 +97,7 @@ const init = (config, emitter, customFileHandlers) => {
         // Hide webpack output because its noisy.
         logLevel: 'error',
         stats: false,
-        publicPath: '/_karma_webpack_/',
+        publicPath: `/${KARMA_APPLICATION_PATH}/`,
     };
     const compilationErrorCb = (error, errors) => {
         // Notify potential listeners of the compile error
@@ -142,8 +134,8 @@ const init = (config, emitter, customFileHandlers) => {
         });
     }
     // Files need to be served from a custom path for Karma.
-    webpackConfig.output.path = '/_karma_webpack_/';
-    webpackConfig.output.publicPath = '/_karma_webpack_/';
+    webpackConfig.output.path = `/${KARMA_APPLICATION_PATH}/`;
+    webpackConfig.output.publicPath = `/${KARMA_APPLICATION_PATH}/`;
     let compiler;
     try {
         compiler = webpack(webpackConfig);
@@ -190,18 +182,18 @@ const init = (config, emitter, customFileHandlers) => {
     webpackMiddleware = new webpackDevMiddleware(compiler, webpackMiddlewareConfig);
     // Forward requests to webpack server.
     customFileHandlers.push({
-        urlRegex: /^\/_karma_webpack_\/.*/,
+        urlRegex: new RegExp(`\\/${KARMA_APPLICATION_PATH}\\/.*`),
         handler: function handler(req, res) {
             webpackMiddleware(req, res, function () {
                 // Ensure script and style bundles are served.
                 // They are mentioned in the custom karma context page and we don't want them to 404.
                 const alwaysServe = [
-                    '/_karma_webpack_/runtime.js',
-                    '/_karma_webpack_/polyfills.js',
-                    '/_karma_webpack_/polyfills-es5.js',
-                    '/_karma_webpack_/scripts.js',
-                    '/_karma_webpack_/styles.js',
-                    '/_karma_webpack_/vendor.js',
+                    `/${KARMA_APPLICATION_PATH}/runtime.js`,
+                    `/${KARMA_APPLICATION_PATH}/polyfills.js`,
+                    `/${KARMA_APPLICATION_PATH}/polyfills-es5.js`,
+                    `/${KARMA_APPLICATION_PATH}/scripts.js`,
+                    `/${KARMA_APPLICATION_PATH}/styles.js`,
+                    `/${KARMA_APPLICATION_PATH}/vendor.js`,
                 ];
                 if (alwaysServe.indexOf(req.url) != -1) {
                     res.statusCode = 200;
@@ -280,11 +272,10 @@ const sourceMapReporter = function (baseReporterDecorator, config) {
 sourceMapReporter.$inject = ['baseReporterDecorator', 'config'];
 // When a request is not found in the karma server, try looking for it from the webpack server root.
 function fallbackMiddleware() {
-    return function (req, res, next) {
+    return function (request, response, next) {
         if (webpackMiddleware) {
-            const webpackUrl = '/_karma_webpack_' + req.url;
-            const webpackReq = { ...req, url: webpackUrl };
-            webpackMiddleware(webpackReq, res, next);
+            request.url = '/' + KARMA_APPLICATION_PATH + request.url;
+            webpackMiddleware(request, response, next);
         }
         else {
             next();