@ngtools/webpack 12.0.0 → 12.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngtools/webpack",
-  "version": "12.0.0",
+  "version": "12.0.4",
   "description": "Webpack plugin that AoT compiles your Angular components and modules.",
   "main": "./src/index.js",
   "typings": "src/index.d.ts",
@@ -28,12 +28,12 @@
     "enhanced-resolve": "5.7.0"
   },
   "peerDependencies": {
-    "@angular/compiler-cli": "^12.0.0-next",
+    "@angular/compiler-cli": "^12.0.0",
     "typescript": "~4.2.3",
     "webpack": "^5.30.0"
   },
   "engines": {
-    "node": "^12.14.1 || ^14.0.0",
+    "node": "^12.14.1 || >=14.0.0",
     "npm": "^6.11.0 || ^7.5.6",
     "yarn": ">= 1.13.0"
   }

package/src/ivy/host.js

@@ -42,7 +42,7 @@ function augmentHostWithResources(host, resourceLoader, options = {}) {
             return null;
         }
         if (options.inlineStyleMimeType) {
-            const content = await resourceLoader.process(data, options.inlineStyleMimeType);
+            const content = await resourceLoader.process(data, options.inlineStyleMimeType, context.type, context.containingFile);
             return { content };
         }
         return null;

package/src/ivy/plugin.d.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { CompilerOptions } from '@angular/compiler-cli';
-import { Compiler } from 'webpack';
+import type { Compiler } from 'webpack';
 export interface AngularWebpackPluginOptions {
     tsconfig: string;
     compilerOptions?: CompilerOptions;

package/src/ivy/plugin.js

@@ -12,7 +12,6 @@ const compiler_cli_1 = require("@angular/compiler-cli");
 const program_1 = require("@angular/compiler-cli/src/ngtsc/program");
 const crypto_1 = require("crypto");
 const ts = require("typescript");
-const webpack_1 = require("webpack");
 const ngcc_processor_1 = require("../ngcc_processor");
 const paths_plugin_1 = require("../paths-plugin");
 const resource_loader_1 = require("../resource_loader");
@@ -64,9 +63,10 @@ class AngularWebpackPlugin {
         return this.pluginOptions;
     }
     apply(compiler) {
+        const { NormalModuleReplacementPlugin, util } = compiler.webpack;
         // Setup file replacements with webpack
         for (const [key, value] of Object.entries(this.pluginOptions.fileReplacements)) {
-            new webpack_1.NormalModuleReplacementPlugin(new RegExp('^' + key.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&') + '$'), value).apply(compiler);
+            new NormalModuleReplacementPlugin(new RegExp('^' + key.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&') + '$'), value).apply(compiler);
         }
         // Set resolver options
         const pathsPlugin = new paths_plugin_1.TypeScriptPathsPlugin();
@@ -84,7 +84,7 @@ class AngularWebpackPlugin {
                 (_b = resolveOptions.plugins) !== null && _b !== void 0 ? _b : (resolveOptions.plugins = []);
                 resolveOptions.plugins.push(pathsPlugin);
                 // https://github.com/webpack/webpack/issues/11635#issuecomment-707016779
-                return webpack_1.util.cleverMerge(resolveOptions, { mainFields: [...ivyMainFields, '...'] });
+                return util.cleverMerge(resolveOptions, { mainFields: [...ivyMainFields, '...'] });
             });
         });
         let ngccProcessor;
@@ -171,8 +171,9 @@ class AngularWebpackPlugin {
                 if (internalFiles === null || internalFiles === void 0 ? void 0 : internalFiles.has(sourceFile)) {
                     continue;
                 }
-                // Ensure all program files are considered part of the compilation and will be watched
-                compilation.fileDependencies.add(sourceFile.fileName);
+                // Ensure all program files are considered part of the compilation and will be watched.
+                // Webpack does not normalize paths. Therefore, we need to normalize the path with FS seperators.
+                compilation.fileDependencies.add(paths_1.externalizePath(sourceFile.fileName));
                 // Add all non-declaration files to the initial set of unused files. The set will be
                 // analyzed and pruned after all Webpack modules are finished building.
                 if (!sourceFile.isDeclarationFile) {
@@ -258,7 +259,7 @@ class AngularWebpackPlugin {
         this.requiredFilesToEmitCache.clear();
     }
     loadConfiguration(compilation) {
-        const { options: compilerOptions, rootNames, errors } = compiler_cli_1.readConfiguration(this.pluginOptions.tsconfig, this.pluginOptions.compilerOptions);
+        const { options: compilerOptions, rootNames, errors, } = compiler_cli_1.readConfiguration(this.pluginOptions.tsconfig, this.pluginOptions.compilerOptions);
         compilerOptions.enableIvy = true;
         compilerOptions.noEmitOnError = false;
         compilerOptions.suppressOutputPathCheck = true;
@@ -287,39 +288,46 @@ class AngularWebpackPlugin {
         // The wrapped host inside NgtscProgram adds additional files that will not have versions.
         const typeScriptProgram = angularProgram.getTsProgram();
         host_1.augmentProgramWithVersioning(typeScriptProgram);
-        const builder = ts.createEmitAndSemanticDiagnosticsBuilderProgram(typeScriptProgram, host, this.builder);
-        // Save for next rebuild
+        let builder;
         if (this.watchMode) {
-            this.builder = builder;
+            builder = this.builder = ts.createEmitAndSemanticDiagnosticsBuilderProgram(typeScriptProgram, host, this.builder);
             this.ngtscNextProgram = angularProgram;
         }
+        else {
+            // When not in watch mode, the startup cost of the incremental analysis can be avoided by
+            // using an abstract builder that only wraps a TypeScript program.
+            builder = ts.createAbstractBuilder(typeScriptProgram, host);
+        }
         // Update semantic diagnostics cache
         const affectedFiles = new Set();
-        // eslint-disable-next-line no-constant-condition
-        while (true) {
-            const result = builder.getSemanticDiagnosticsOfNextAffectedFile(undefined, (sourceFile) => {
-                // If the affected file is a TTC shim, add the shim's original source file.
-                // This ensures that changes that affect TTC are typechecked even when the changes
-                // are otherwise unrelated from a TS perspective and do not result in Ivy codegen changes.
-                // For example, changing @Input property types of a directive used in another component's
-                // template.
-                if (ignoreForDiagnostics.has(sourceFile) &&
-                    sourceFile.fileName.endsWith('.ngtypecheck.ts')) {
-                    // This file name conversion relies on internal compiler logic and should be converted
-                    // to an official method when available. 15 is length of `.ngtypecheck.ts`
-                    const originalFilename = sourceFile.fileName.slice(0, -15) + '.ts';
-                    const originalSourceFile = builder.getSourceFile(originalFilename);
-                    if (originalSourceFile) {
-                        affectedFiles.add(originalSourceFile);
+        // Analyze affected files when in watch mode for incremental type checking
+        if ('getSemanticDiagnosticsOfNextAffectedFile' in builder) {
+            // eslint-disable-next-line no-constant-condition
+            while (true) {
+                const result = builder.getSemanticDiagnosticsOfNextAffectedFile(undefined, (sourceFile) => {
+                    // If the affected file is a TTC shim, add the shim's original source file.
+                    // This ensures that changes that affect TTC are typechecked even when the changes
+                    // are otherwise unrelated from a TS perspective and do not result in Ivy codegen changes.
+                    // For example, changing @Input property types of a directive used in another component's
+                    // template.
+                    if (ignoreForDiagnostics.has(sourceFile) &&
+                        sourceFile.fileName.endsWith('.ngtypecheck.ts')) {
+                        // This file name conversion relies on internal compiler logic and should be converted
+                        // to an official method when available. 15 is length of `.ngtypecheck.ts`
+                        const originalFilename = sourceFile.fileName.slice(0, -15) + '.ts';
+                        const originalSourceFile = builder.getSourceFile(originalFilename);
+                        if (originalSourceFile) {
+                            affectedFiles.add(originalSourceFile);
+                        }
+                        return true;
                     }
-                    return true;
+                    return false;
+                });
+                if (!result) {
+                    break;
                 }
-                return false;
-            });
-            if (!result) {
-                break;
+                affectedFiles.add(result.affected);
             }
-            affectedFiles.add(result.affected);
         }
         // Collect non-semantic diagnostics
         const diagnostics = [
@@ -399,10 +407,14 @@ class AngularWebpackPlugin {
         };
     }
     updateJitProgram(compilerOptions, rootNames, host, diagnosticsReporter) {
-        const builder = ts.createEmitAndSemanticDiagnosticsBuilderProgram(rootNames, compilerOptions, host, this.builder);
-        // Save for next rebuild
+        let builder;
         if (this.watchMode) {
-            this.builder = builder;
+            builder = this.builder = ts.createEmitAndSemanticDiagnosticsBuilderProgram(rootNames, compilerOptions, host, this.builder);
+        }
+        else {
+            // When not in watch mode, the startup cost of the incremental analysis can be avoided by
+            // using an abstract builder that only wraps a TypeScript program.
+            builder = ts.createAbstractBuilder(rootNames, compilerOptions, host);
         }
         const diagnostics = [
             ...builder.getOptionsDiagnostics(),

package/src/resource_loader.d.ts

@@ -5,13 +5,13 @@
  * 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 { Compilation } from 'webpack';
+import type { Compilation } from 'webpack';
 export declare class WebpackResourceLoader {
     private _parentCompilation?;
     private _fileDependencies;
     private _reverseDependencies;
     private fileCache?;
-    private inlineCache?;
+    private assetCache?;
     private modifiedResources;
     private outputPathCounter;
     constructor(shouldCache: boolean);
@@ -24,5 +24,5 @@ export declare class WebpackResourceLoader {
     private _compile;
     private _evaluate;
     get(filePath: string): Promise<string>;
-    process(data: string, mimeType: string): Promise<string>;
+    process(data: string, mimeType: string, resourceType: 'template' | 'style', containingFile?: string): Promise<string>;
 }

package/src/resource_loader.js

@@ -11,7 +11,6 @@ exports.WebpackResourceLoader = void 0;
 const crypto_1 = require("crypto");
 const path = require("path");
 const vm = require("vm");
-const webpack_1 = require("webpack");
 const paths_1 = require("./ivy/paths");
 class WebpackResourceLoader {
     constructor(shouldCache) {
@@ -21,24 +20,37 @@ class WebpackResourceLoader {
         this.outputPathCounter = 1;
         if (shouldCache) {
             this.fileCache = new Map();
-            this.inlineCache = new Map();
+            this.assetCache = new Map();
         }
     }
     update(parentCompilation, changedFiles) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         this._parentCompilation = parentCompilation;
         // Update resource cache and modified resources
         this.modifiedResources.clear();
         if (changedFiles) {
             for (const changedFile of changedFiles) {
+                const changedFileNormalized = paths_1.normalizePath(changedFile);
+                (_a = this.assetCache) === null || _a === void 0 ? void 0 : _a.delete(changedFileNormalized);
                 for (const affectedResource of this.getAffectedResources(changedFile)) {
-                    (_a = this.fileCache) === null || _a === void 0 ? void 0 : _a.delete(paths_1.normalizePath(affectedResource));
+                    const affectedResourceNormalized = paths_1.normalizePath(affectedResource);
+                    (_b = this.fileCache) === null || _b === void 0 ? void 0 : _b.delete(affectedResourceNormalized);
                     this.modifiedResources.add(affectedResource);
+                    for (const effectedDependencies of this.getResourceDependencies(affectedResourceNormalized)) {
+                        (_c = this.assetCache) === null || _c === void 0 ? void 0 : _c.delete(paths_1.normalizePath(effectedDependencies));
+                    }
                 }
             }
         }
         else {
-            (_b = this.fileCache) === null || _b === void 0 ? void 0 : _b.clear();
+            (_d = this.fileCache) === null || _d === void 0 ? void 0 : _d.clear();
+            (_e = this.assetCache) === null || _e === void 0 ? void 0 : _e.clear();
+        }
+        // Re-emit all assets for un-effected files
+        if (this.assetCache) {
+            for (const [, { name, source, info }] of this.assetCache) {
+                this._parentCompilation.emitAsset(name, source, info);
+            }
         }
     }
     clearParentCompilation() {
@@ -56,12 +68,14 @@ class WebpackResourceLoader {
     setAffectedResources(file, resources) {
         this._reverseDependencies.set(file, new Set(resources));
     }
-    async _compile(filePath, data, mimeType) {
+    async _compile(filePath, data, mimeType, resourceType, containingFile) {
         if (!this._parentCompilation) {
             throw new Error('WebpackResourceLoader cannot be used without parentCompilation');
         }
         // Create a special URL for reading the resource from memory
-        const entry = data ? 'angular-resource://' : filePath;
+        const entry = data
+            ? `angular-resource:${resourceType},${crypto_1.createHash('md5').update(data).digest('hex')}`
+            : filePath;
         if (!entry) {
             throw new Error(`"filePath" or "data" must be specified.`);
         }
@@ -69,7 +83,8 @@ class WebpackResourceLoader {
         if (filePath === null || filePath === void 0 ? void 0 : filePath.match(/\.[jt]s$/)) {
             throw new Error(`Cannot use a JavaScript or TypeScript file (${filePath}) in a component's styleUrls or templateUrl.`);
         }
-        const outputFilePath = filePath || `angular-resource-output-${this.outputPathCounter++}.css`;
+        const outputFilePath = filePath ||
+            `${containingFile}-angular-inline--${this.outputPathCounter++}.${resourceType === 'template' ? 'html' : 'css'}`;
         const outputOptions = {
             filename: outputFilePath,
             library: {
@@ -77,12 +92,13 @@ class WebpackResourceLoader {
                 name: 'resource',
             },
         };
-        const context = this._parentCompilation.compiler.context;
+        const { context, webpack } = this._parentCompilation.compiler;
+        const { EntryPlugin, NormalModule, library, node, sources } = webpack;
         const childCompiler = this._parentCompilation.createChildCompiler('angular-compiler:resource', outputOptions, [
-            new webpack_1.node.NodeTemplatePlugin(outputOptions),
-            new webpack_1.node.NodeTargetPlugin(),
-            new webpack_1.EntryPlugin(context, entry, { name: 'resource' }),
-            new webpack_1.library.EnableLibraryPlugin('var'),
+            new node.NodeTemplatePlugin(outputOptions),
+            new node.NodeTargetPlugin(),
+            new EntryPlugin(context, entry, { name: 'resource' }),
+            new library.EnableLibraryPlugin('var'),
         ]);
         childCompiler.hooks.thisCompilation.tap('angular-compiler', (compilation, { normalModuleFactory }) => {
             // If no data is provided, the resource will be read from the filesystem
@@ -99,7 +115,7 @@ class WebpackResourceLoader {
                     }
                     return true;
                 });
-                webpack_1.NormalModule.getCompilationHooks(compilation)
+                NormalModule.getCompilationHooks(compilation)
                     .readResourceForScheme.for('angular-resource')
                     .tap('angular-compiler', () => data);
             }
@@ -111,7 +127,7 @@ class WebpackResourceLoader {
                 try {
                     const output = this._evaluate(outputFilePath, asset.source().toString());
                     if (typeof output === 'string') {
-                        compilation.assets[outputFilePath] = new webpack_1.sources.RawSource(output);
+                        compilation.assets[outputFilePath] = new sources.RawSource(output);
                     }
                 }
                 catch (error) {
@@ -123,7 +139,7 @@ class WebpackResourceLoader {
         let finalContent;
         let finalMap;
         childCompiler.hooks.compilation.tap('angular-compiler', (childCompilation) => {
-            childCompilation.hooks.processAssets.tap({ name: 'angular-compiler', stage: webpack_1.Compilation.PROCESS_ASSETS_STAGE_REPORT }, () => {
+            childCompilation.hooks.processAssets.tap({ name: 'angular-compiler', stage: webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT }, () => {
                 var _a, _b;
                 finalContent = (_a = childCompilation.assets[outputFilePath]) === null || _a === void 0 ? void 0 : _a.source().toString();
                 finalMap = (_b = childCompilation.assets[outputFilePath + '.map']) === null || _b === void 0 ? void 0 : _b.source().toString();
@@ -133,7 +149,7 @@ class WebpackResourceLoader {
         });
         return new Promise((resolve, reject) => {
             childCompiler.runAsChild((error, _, childCompilation) => {
-                var _a;
+                var _a, _b;
                 if (error) {
                     reject(error);
                     return;
@@ -148,12 +164,26 @@ class WebpackResourceLoader {
                 const parent = childCompiler.parentCompilation;
                 if (parent) {
                     parent.children = parent.children.filter((child) => child !== childCompilation);
-                    parent.fileDependencies.addAll(childCompilation.fileDependencies);
+                    for (const fileDependency of childCompilation.fileDependencies) {
+                        if (data && containingFile && fileDependency.endsWith(entry)) {
+                            // use containing file if the resource was inline
+                            parent.fileDependencies.add(containingFile);
+                        }
+                        else {
+                            parent.fileDependencies.add(fileDependency);
+                        }
+                    }
                     parent.contextDependencies.addAll(childCompilation.contextDependencies);
                     parent.missingDependencies.addAll(childCompilation.missingDependencies);
                     parent.buildDependencies.addAll(childCompilation.buildDependencies);
                     parent.warnings.push(...childCompilation.warnings);
                     parent.errors.push(...childCompilation.errors);
+                    for (const { info, name, source } of childCompilation.getAssets()) {
+                        if (info.sourceFilename === undefined) {
+                            throw new Error(`'${name}' asset info 'sourceFilename' is 'undefined'.`);
+                        }
+                        (_a = this.assetCache) === null || _a === void 0 ? void 0 : _a.set(info.sourceFilename, { info, name, source });
+                    }
                 }
                 // Save the dependencies for this resource.
                 if (filePath) {
@@ -177,7 +207,7 @@ class WebpackResourceLoader {
                 }
                 resolve({
                     content: finalContent !== null && finalContent !== void 0 ? finalContent : '',
-                    success: ((_a = childCompilation.errors) === null || _a === void 0 ? void 0 : _a.length) === 0,
+                    success: ((_b = childCompilation.errors) === null || _b === void 0 ? void 0 : _b.length) === 0,
                 });
             });
         });
@@ -215,19 +245,11 @@ class WebpackResourceLoader {
         }
         return compilationResult.content;
     }
-    async process(data, mimeType) {
-        var _a;
+    async process(data, mimeType, resourceType, containingFile) {
         if (data.trim().length === 0) {
             return '';
         }
-        const cacheKey = crypto_1.createHash('md5').update(data).digest('hex');
-        let compilationResult = (_a = this.inlineCache) === null || _a === void 0 ? void 0 : _a.get(cacheKey);
-        if (compilationResult === undefined) {
-            compilationResult = await this._compile(undefined, data, mimeType);
-            if (this.inlineCache && compilationResult.success) {
-                this.inlineCache.set(cacheKey, compilationResult);
-            }
-        }
+        const compilationResult = await this._compile(undefined, data, mimeType, resourceType, containingFile);
         return compilationResult.content;
     }
 }

package/src/webpack-diagnostics.d.ts

@@ -5,6 +5,6 @@
  * 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 { Compilation } from 'webpack';
+import type { Compilation } from 'webpack';
 export declare function addWarning(compilation: Compilation, message: string): void;
 export declare function addError(compilation: Compilation, message: string): void;

package/src/webpack-diagnostics.js

@@ -8,12 +8,11 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addError = exports.addWarning = void 0;
-const webpack_1 = require("webpack");
 function addWarning(compilation, message) {
-    compilation.warnings.push(new webpack_1.WebpackError(message));
+    compilation.warnings.push(new compilation.compiler.webpack.WebpackError(message));
 }
 exports.addWarning = addWarning;
 function addError(compilation, message) {
-    compilation.errors.push(new webpack_1.WebpackError(message));
+    compilation.errors.push(new compilation.compiler.webpack.WebpackError(message));
 }
 exports.addError = addError;