@ngtools/webpack 11.2.1 → 11.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngtools/webpack",
-  "version": "11.2.1",
+  "version": "11.2.5",
   "description": "Webpack plugin that AoT compiles your Angular components and modules.",
   "main": "./src/index.js",
   "typings": "src/index.d.ts",
@@ -25,7 +25,7 @@
   },
   "homepage": "https://github.com/angular/angular-cli",
   "dependencies": {
-    "@angular-devkit/core": "11.2.1",
+    "@angular-devkit/core": "11.2.5",
     "enhanced-resolve": "5.7.0",
     "webpack-sources": "2.2.0"
   },
@@ -36,7 +36,7 @@
   },
   "engines": {
     "node": ">= 10.13.0",
-    "npm": "^6.11.0",
+    "npm": "^6.11.0 || ^7.5.6",
     "yarn": ">= 1.13.0"
   }
 }

package/src/ivy/host.d.ts

@@ -4,6 +4,21 @@ import { WebpackResourceLoader } from '../resource_loader';
 export declare function augmentHostWithResources(host: ts.CompilerHost, resourceLoader: WebpackResourceLoader, options?: {
     directTemplateLoading?: boolean;
 }): void;
+/**
+ * Augments a TypeScript Compiler Host's resolveModuleNames function to collect dependencies
+ * of the containing file passed to the resolveModuleNames function. This process assumes
+ * that consumers of the Compiler Host will only call resolveModuleNames with modules that are
+ * actually present in a containing file.
+ * This process is a workaround for gathering a TypeScript SourceFile's dependencies as there
+ * is no currently exposed public method to do so. A BuilderProgram does have a `getAllDependencies`
+ * function. However, that function returns all transitive dependencies as well which can cause
+ * excessive Webpack rebuilds.
+ *
+ * @param host The CompilerHost to augment.
+ * @param dependencies A Map which will be used to store file dependencies.
+ * @param moduleResolutionCache An optional resolution cache to use when the host resolves a module.
+ */
+export declare function augmentHostWithDependencyCollection(host: ts.CompilerHost, dependencies: Map<string, Set<string>>, moduleResolutionCache?: ts.ModuleResolutionCache): void;
 export declare function augmentHostWithNgcc(host: ts.CompilerHost, ngcc: NgccProcessor, moduleResolutionCache?: ts.ModuleResolutionCache): void;
 export declare function augmentHostWithReplacements(host: ts.CompilerHost, replacements: Record<string, string>, moduleResolutionCache?: ts.ModuleResolutionCache): void;
 export declare function augmentHostWithSubstitutions(host: ts.CompilerHost, substitutions: Record<string, string>): void;

package/src/ivy/host.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.augmentHostWithCaching = exports.augmentProgramWithVersioning = exports.augmentHostWithVersioning = exports.augmentHostWithSubstitutions = exports.augmentHostWithReplacements = exports.augmentHostWithNgcc = exports.augmentHostWithResources = void 0;
+exports.augmentHostWithCaching = exports.augmentProgramWithVersioning = exports.augmentHostWithVersioning = exports.augmentHostWithSubstitutions = exports.augmentHostWithReplacements = exports.augmentHostWithNgcc = exports.augmentHostWithDependencyCollection = exports.augmentHostWithResources = void 0;
 const crypto_1 = require("crypto");
 const path = require("path");
 const ts = require("typescript");
@@ -49,6 +49,60 @@ function augmentResolveModuleNames(host, resolvedModuleModifier, moduleResolutio
         };
     }
 }
+/**
+ * Augments a TypeScript Compiler Host's resolveModuleNames function to collect dependencies
+ * of the containing file passed to the resolveModuleNames function. This process assumes
+ * that consumers of the Compiler Host will only call resolveModuleNames with modules that are
+ * actually present in a containing file.
+ * This process is a workaround for gathering a TypeScript SourceFile's dependencies as there
+ * is no currently exposed public method to do so. A BuilderProgram does have a `getAllDependencies`
+ * function. However, that function returns all transitive dependencies as well which can cause
+ * excessive Webpack rebuilds.
+ *
+ * @param host The CompilerHost to augment.
+ * @param dependencies A Map which will be used to store file dependencies.
+ * @param moduleResolutionCache An optional resolution cache to use when the host resolves a module.
+ */
+function augmentHostWithDependencyCollection(host, dependencies, moduleResolutionCache) {
+    if (host.resolveModuleNames) {
+        const baseResolveModuleNames = host.resolveModuleNames;
+        host.resolveModuleNames = function (moduleNames, containingFile, ...parameters) {
+            const results = baseResolveModuleNames.call(host, moduleNames, containingFile, ...parameters);
+            const containingFilePath = paths_1.normalizePath(containingFile);
+            for (const result of results) {
+                if (result) {
+                    const containingFileDependencies = dependencies.get(containingFilePath);
+                    if (containingFileDependencies) {
+                        containingFileDependencies.add(result.resolvedFileName);
+                    }
+                    else {
+                        dependencies.set(containingFilePath, new Set([result.resolvedFileName]));
+                    }
+                }
+            }
+            return results;
+        };
+    }
+    else {
+        host.resolveModuleNames = function (moduleNames, containingFile, _reusedNames, redirectedReference, options) {
+            return moduleNames.map((name) => {
+                const result = ts.resolveModuleName(name, containingFile, options, host, moduleResolutionCache, redirectedReference).resolvedModule;
+                if (result) {
+                    const containingFilePath = paths_1.normalizePath(containingFile);
+                    const containingFileDependencies = dependencies.get(containingFilePath);
+                    if (containingFileDependencies) {
+                        containingFileDependencies.add(result.resolvedFileName);
+                    }
+                    else {
+                        dependencies.set(containingFilePath, new Set([result.resolvedFileName]));
+                    }
+                }
+                return result;
+            });
+        };
+    }
+}
+exports.augmentHostWithDependencyCollection = augmentHostWithDependencyCollection;
 function augmentHostWithNgcc(host, ngcc, moduleResolutionCache) {
     augmentResolveModuleNames(host, (resolvedModule, moduleName) => {
         if (resolvedModule && ngcc) {

package/src/ivy/plugin.d.ts

@@ -26,6 +26,7 @@ export declare class AngularWebpackPlugin {
     private sourceFileCache?;
     private buildTimestamp;
     private readonly lazyRouteMap;
+    private readonly fileDependencies;
     private readonly requiredFilesToEmit;
     private readonly requiredFilesToEmitCache;
     private readonly fileEmitHistory;
@@ -34,6 +35,7 @@ export declare class AngularWebpackPlugin {
     apply(compiler: Compiler & {
         watchMode?: boolean;
     }): void;
+    private markResourceUsed;
     private rebuildRequiredFiles;
     private loadConfiguration;
     private updateAotProgram;

package/src/ivy/plugin.js

@@ -14,6 +14,7 @@ const crypto_1 = require("crypto");
 const path = require("path");
 const ts = require("typescript");
 const webpack_1 = require("webpack");
+const lazy_routes_1 = require("../lazy_routes");
 const ngcc_processor_1 = require("../ngcc_processor");
 const paths_plugin_1 = require("../paths-plugin");
 const resource_loader_1 = require("../resource_loader");
@@ -42,6 +43,7 @@ const PLUGIN_NAME = 'angular-compiler';
 class AngularWebpackPlugin {
     constructor(options = {}) {
         this.lazyRouteMap = {};
+        this.fileDependencies = new Map();
         this.requiredFilesToEmit = new Set();
         this.requiredFilesToEmitCache = new Map();
         this.fileEmitHistory = new Map();
@@ -120,6 +122,10 @@ class AngularWebpackPlugin {
             if (cache) {
                 // Invalidate existing cache based on compiler file timestamps
                 changedFiles = cache.invalidate(compiler.fileTimestamps, this.buildTimestamp);
+                // Invalidate file dependencies of changed files
+                for (const changedFile of changedFiles) {
+                    this.fileDependencies.delete(paths_1.normalizePath(changedFile));
+                }
             }
             else {
                 // Initialize a new cache
@@ -132,6 +138,8 @@ class AngularWebpackPlugin {
             this.buildTimestamp = Date.now();
             host_1.augmentHostWithCaching(host, cache);
             const moduleResolutionCache = ts.createModuleResolutionCache(host.getCurrentDirectory(), host.getCanonicalFileName.bind(host), compilerOptions);
+            // Setup source file dependency collection
+            host_1.augmentHostWithDependencyCollection(host, this.fileDependencies, moduleResolutionCache);
             // Setup on demand ngcc
             host_1.augmentHostWithNgcc(host, ngccProcessor, moduleResolutionCache);
             // Setup resource loading
@@ -144,7 +152,7 @@ class AngularWebpackPlugin {
             host_1.augmentHostWithSubstitutions(host, this.pluginOptions.substitutions);
             // Create the file emitter used by the webpack loader
             const { fileEmitter, builder, internalFiles } = this.pluginOptions.jitMode
-                ? this.updateJitProgram(compilerOptions, rootNames, host, diagnosticsReporter)
+                ? this.updateJitProgram(compilerOptions, rootNames, host, diagnosticsReporter, changedFiles)
                 : this.updateAotProgram(compilerOptions, rootNames, host, diagnosticsReporter, resourceLoader);
             const allProgramFiles = builder
                 .getSourceFiles()
@@ -165,13 +173,11 @@ class AngularWebpackPlugin {
                 }
                 const currentUnused = new Set(allProgramFiles
                     .filter((sourceFile) => !sourceFile.isDeclarationFile)
-                    .map((sourceFile) => sourceFile.fileName));
+                    .map((sourceFile) => paths_1.normalizePath(sourceFile.fileName)));
                 modules.forEach(({ resource }) => {
-                    const sourceFile = resource && builder.getSourceFile(resource);
-                    if (!sourceFile) {
-                        return;
+                    if (resource) {
+                        this.markResourceUsed(paths_1.normalizePath(resource), currentUnused);
                     }
-                    builder.getAllDependencies(sourceFile).forEach((dep) => currentUnused.delete(dep));
                 });
                 for (const unused of currentUnused) {
                     if (previousUnused && previousUnused.has(unused)) {
@@ -186,6 +192,19 @@ class AngularWebpackPlugin {
             compilation[symbol_1.AngularPluginSymbol] = fileEmitter;
         });
     }
+    markResourceUsed(normalizedResourcePath, currentUnused) {
+        if (!currentUnused.has(normalizedResourcePath)) {
+            return;
+        }
+        currentUnused.delete(normalizedResourcePath);
+        const dependencies = this.fileDependencies.get(normalizedResourcePath);
+        if (!dependencies) {
+            return;
+        }
+        for (const dependency of dependencies) {
+            this.markResourceUsed(paths_1.normalizePath(dependency), currentUnused);
+        }
+    }
     async rebuildRequiredFiles(modules, compilation, fileEmitter) {
         if (this.requiredFilesToEmit.size === 0) {
             return;
@@ -319,7 +338,7 @@ class AngularWebpackPlugin {
                 if (!sourceFile.isDeclarationFile &&
                     !ignoreForEmit.has(sourceFile) &&
                     !angularCompiler.incrementalDriver.safeToSkipEmit(sourceFile)) {
-                    this.requiredFilesToEmit.add(sourceFile.fileName);
+                    this.requiredFilesToEmit.add(paths_1.normalizePath(sourceFile.fileName));
                 }
             }
             // NOTE: This can be removed once support for the deprecated lazy route string format is removed
@@ -328,7 +347,7 @@ class AngularWebpackPlugin {
                 this.lazyRouteMap[routeKey] = lazyRoute.referencedModule.filePath;
             }
             return this.createFileEmitter(builder, transformation_1.mergeTransformers(angularCompiler.prepareEmit().transformers, transformers), getDependencies, (sourceFile) => {
-                this.requiredFilesToEmit.delete(sourceFile.fileName);
+                this.requiredFilesToEmit.delete(paths_1.normalizePath(sourceFile.fileName));
                 angularCompiler.incrementalDriver.recordSuccessfulEmit(sourceFile);
             });
         });
@@ -342,7 +361,7 @@ class AngularWebpackPlugin {
             internalFiles: ignoreForEmit,
         };
     }
-    updateJitProgram(compilerOptions, rootNames, host, diagnosticsReporter) {
+    updateJitProgram(compilerOptions, rootNames, host, diagnosticsReporter, changedFiles) {
         const builder = ts.createEmitAndSemanticDiagnosticsBuilderProgram(rootNames, compilerOptions, host, this.builder);
         // Save for next rebuild
         if (this.watchMode) {
@@ -357,37 +376,56 @@ class AngularWebpackPlugin {
         ];
         diagnosticsReporter(diagnostics);
         const transformers = transformation_1.createJitTransformers(builder, this.pluginOptions);
-        // Required to support asynchronous resource loading
-        // Must be done before listing lazy routes
-        // NOTE: This can be removed once support for the deprecated lazy route string format is removed
-        const angularProgram = new program_1.NgtscProgram(rootNames, compilerOptions, host, this.ngtscNextProgram);
-        const angularCompiler = angularProgram.compiler;
-        const pendingAnalysis = angularCompiler.analyzeAsync().then(() => {
-            for (const lazyRoute of angularCompiler.listLazyRoutes()) {
-                const [routeKey] = lazyRoute.route.split('#');
-                this.lazyRouteMap[routeKey] = lazyRoute.referencedModule.filePath;
+        // Only do a full, expensive Angular compiler string lazy route analysis on the first build
+        // `changedFiles` will be undefined on a first build
+        if (!changedFiles) {
+            // Required to support asynchronous resource loading
+            // Must be done before listing lazy routes
+            // NOTE: This can be removed once support for the deprecated lazy route string format is removed
+            const angularProgram = new program_1.NgtscProgram(rootNames, compilerOptions, host);
+            const angularCompiler = angularProgram.compiler;
+            const pendingAnalysis = angularCompiler.analyzeAsync().then(() => {
+                for (const lazyRoute of angularCompiler.listLazyRoutes()) {
+                    const [routeKey] = lazyRoute.route.split('#');
+                    this.lazyRouteMap[routeKey] = lazyRoute.referencedModule.filePath;
+                }
+                return this.createFileEmitter(builder, transformers, () => []);
+            });
+            const analyzingFileEmitter = async (file) => {
+                const innerFileEmitter = await pendingAnalysis;
+                return innerFileEmitter(file);
+            };
+            return {
+                fileEmitter: analyzingFileEmitter,
+                builder,
+                internalFiles: undefined,
+            };
+        }
+        else {
+            // Update lazy route map for changed files using fast but less accurate method
+            for (const changedFile of changedFiles) {
+                if (!builder.getSourceFile(changedFile)) {
+                    continue;
+                }
+                const routes = lazy_routes_1.findLazyRoutes(changedFile, host, builder.getProgram());
+                for (const [routeKey, filePath] of Object.entries(routes)) {
+                    this.lazyRouteMap[routeKey] = filePath;
+                }
             }
-            return this.createFileEmitter(builder, transformers, () => []);
-        });
-        const analyzingFileEmitter = async (file) => {
-            const innerFileEmitter = await pendingAnalysis;
-            return innerFileEmitter(file);
-        };
-        if (this.watchMode) {
-            this.ngtscNextProgram = angularProgram;
+            return {
+                fileEmitter: this.createFileEmitter(builder, transformers, () => []),
+                builder,
+                internalFiles: undefined,
+            };
         }
-        return {
-            fileEmitter: analyzingFileEmitter,
-            builder,
-            internalFiles: undefined,
-        };
     }
     createFileEmitter(program, transformers = {}, getExtraDependencies, onAfterEmit) {
         return async (file) => {
-            if (this.requiredFilesToEmitCache.has(file)) {
-                return this.requiredFilesToEmitCache.get(file);
+            const filePath = paths_1.normalizePath(file);
+            if (this.requiredFilesToEmitCache.has(filePath)) {
+                return this.requiredFilesToEmitCache.get(filePath);
             }
-            const sourceFile = program.getSourceFile(file);
+            const sourceFile = program.getSourceFile(filePath);
             if (!sourceFile) {
                 return undefined;
             }
@@ -406,10 +444,10 @@ class AngularWebpackPlugin {
             if (content !== undefined && this.watchMode) {
                 // Capture emit history info for Angular rebuild analysis
                 hash = hashContent(content);
-                this.fileEmitHistory.set(file, { length: content.length, hash });
+                this.fileEmitHistory.set(filePath, { length: content.length, hash });
             }
             const dependencies = [
-                ...program.getAllDependencies(sourceFile),
+                ...(this.fileDependencies.get(filePath) || []),
                 ...getExtraDependencies(sourceFile),
             ].map(paths_1.externalizePath);
             return { content, map, dependencies, hash };