@ngtools/webpack 11.2.4 → 11.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngtools/webpack",
-  "version": "11.2.4",
+  "version": "11.2.8",
   "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.4",
+    "@angular-devkit/core": "11.2.8",
     "enhanced-resolve": "5.7.0",
     "webpack-sources": "2.2.0"
   },

package/src/ivy/host.d.ts

@@ -1,9 +1,24 @@
 import * as ts from 'typescript';
 import { NgccProcessor } from '../ngcc_processor';
-import { WebpackResourceLoader } from '../resource_loader';
-export declare function augmentHostWithResources(host: ts.CompilerHost, resourceLoader: WebpackResourceLoader, options?: {
+import { ResourceLoader } from '../resource_loader';
+export declare function augmentHostWithResources(host: ts.CompilerHost, resourceLoader: ResourceLoader, 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();
@@ -89,7 +91,9 @@ class AngularWebpackPlugin {
             });
         });
         let ngccProcessor;
-        const resourceLoader = new resource_loader_1.WebpackResourceLoader();
+        const resourceLoader = this.pluginOptions.jitMode
+            ? new resource_loader_1.NoopResourceLoader()
+            : new resource_loader_1.WebpackResourceLoader();
         let previousUnused;
         compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (thisCompilation) => {
             var _a;
@@ -120,6 +124,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,19 +140,21 @@ 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
             resourceLoader.update(compilation, changedFiles);
             host_1.augmentHostWithResources(host, resourceLoader, {
-                directTemplateLoading: this.pluginOptions.directTemplateLoading,
+                directTemplateLoading: !this.pluginOptions.jitMode && this.pluginOptions.directTemplateLoading,
             });
             // Setup source file adjustment options
             host_1.augmentHostWithReplacements(host, this.pluginOptions.fileReplacements, moduleResolutionCache);
             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 +175,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 +194,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;
@@ -342,7 +363,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,30 +378,48 @@ 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) => {
@@ -410,7 +449,7 @@ class AngularWebpackPlugin {
                 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 };

package/src/resource_loader.d.ts

@@ -1,3 +1,17 @@
+export interface ResourceLoader {
+    get(file: string): Promise<string>;
+    getModifiedResourceFiles(): Set<string>;
+    getResourceDependencies(file: string): Iterable<string>;
+    setAffectedResources(file: string, resources: Iterable<string>): void;
+    update(parentCompilation: import('webpack').compilation.Compilation, changedFiles?: Iterable<string>): void;
+}
+export declare class NoopResourceLoader implements ResourceLoader {
+    get(): Promise<string>;
+    getModifiedResourceFiles(): Set<string>;
+    getResourceDependencies(): Iterable<string>;
+    setAffectedResources(): void;
+    update(): void;
+}
 export declare class WebpackResourceLoader {
     private _parentCompilation;
     private _fileDependencies;

package/src/resource_loader.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebpackResourceLoader = void 0;
+exports.WebpackResourceLoader = exports.NoopResourceLoader = void 0;
 /**
  * @license
  * Copyright Google Inc. All Rights Reserved.
@@ -19,6 +19,20 @@ const NodeTemplatePlugin = require('webpack/lib/node/NodeTemplatePlugin');
 const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
 const LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin');
 const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
+class NoopResourceLoader {
+    async get() {
+        return '';
+    }
+    getModifiedResourceFiles() {
+        return new Set();
+    }
+    getResourceDependencies() {
+        return [];
+    }
+    setAffectedResources() { }
+    update() { }
+}
+exports.NoopResourceLoader = NoopResourceLoader;
 class WebpackResourceLoader {
     constructor() {
         this._fileDependencies = new Map();