@ngtools/webpack 13.1.0-next.3 → 13.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngtools/webpack",
-  "version": "13.1.0-next.3",
+  "version": "13.1.2",
   "description": "Webpack plugin that AoT compiles your Angular components and modules.",
   "main": "./src/index.js",
   "typings": "src/index.d.ts",
@@ -27,7 +27,7 @@
   "dependencies": {},
   "peerDependencies": {
     "@angular/compiler-cli": "^13.0.0 || ^13.1.0-next",
-    "typescript": "~4.4.3",
+    "typescript": ">=4.4.3 <4.6",
     "webpack": "^5.30.0"
   },
   "engines": {

package/src/ivy/diagnostics.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
  */
-import type { Diagnostics } from '@angular/compiler-cli';
+import { Diagnostic } from 'typescript';
 import type { Compilation } from 'webpack';
-export declare type DiagnosticsReporter = (diagnostics: Diagnostics) => void;
-export declare function createDiagnosticsReporter(compilation: Compilation, formatter: (diagnostic: Diagnostics[number]) => string): DiagnosticsReporter;
+export declare type DiagnosticsReporter = (diagnostics: readonly Diagnostic[]) => void;
+export declare function createDiagnosticsReporter(compilation: Compilation, formatter: (diagnostic: Diagnostic) => string): DiagnosticsReporter;
 export declare function addWarning(compilation: Compilation, message: string): void;
 export declare function addError(compilation: Compilation, message: string): void;

package/src/ivy/loader.js

@@ -72,7 +72,9 @@ function angularWebpackLoader(content, map) {
         callback(undefined, resultContent, resultMap);
     })
         .catch((err) => {
-        callback(err);
+        // The below is needed to hide stacktraces from users.
+        const message = err instanceof Error ? err.message : err;
+        callback(new Error(message));
     });
 }
 exports.angularWebpackLoader = angularWebpackLoader;

package/src/ivy/plugin.d.ts

@@ -26,6 +26,7 @@ export declare class AngularWebpackPlugin {
     private ngtscNextProgram?;
     private builder?;
     private sourceFileCache?;
+    private webpackCache?;
     private readonly fileDependencies;
     private readonly requiredFilesToEmit;
     private readonly requiredFilesToEmitCache;
@@ -42,4 +43,6 @@ export declare class AngularWebpackPlugin {
     private updateJitProgram;
     private createFileEmitter;
     private initializeCompilerCli;
+    private addFileEmitHistory;
+    private getFileEmitHistory;
 }

package/src/ivy/plugin.js

@@ -65,9 +65,6 @@ function initializeNgccProcessor(compiler, tsconfig, compilerNgccModule) {
     const processor = new ngcc_processor_1.NgccProcessor(compilerNgccModule, mainFields, warnings, errors, compiler.context, tsconfig, inputFileSystem, resolver);
     return { processor, errors, warnings };
 }
-function hashContent(content) {
-    return (0, crypto_1.createHash)('md5').update(content).digest();
-}
 const PLUGIN_NAME = 'angular-compiler';
 const compilationFileEmitters = new WeakMap();
 class AngularWebpackPlugin {
@@ -97,6 +94,7 @@ class AngularWebpackPlugin {
     get options() {
         return this.pluginOptions;
     }
+    // eslint-disable-next-line max-lines-per-function
     apply(compiler) {
         const { NormalModuleReplacementPlugin, util } = compiler.webpack;
         // Setup file replacements with webpack
@@ -131,6 +129,10 @@ class AngularWebpackPlugin {
             // Register plugin to ensure deterministic emit order in multi-plugin usage
             const emitRegistration = this.registerWithCompilation(compilation);
             this.watchMode = compiler.watchMode;
+            // Initialize webpack cache
+            if (!this.webpackCache && compilation.options.cache) {
+                this.webpackCache = compilation.getCache(PLUGIN_NAME);
+            }
             // Initialize the resource loader if not already setup
             if (!resourceLoader) {
                 resourceLoader = new resource_loader_1.WebpackResourceLoader(this.watchMode);
@@ -270,7 +272,7 @@ class AngularWebpackPlugin {
         }
         const filesToRebuild = new Set();
         for (const requiredFile of this.requiredFilesToEmit) {
-            const history = this.fileEmitHistory.get(requiredFile);
+            const history = await this.getFileEmitHistory(requiredFile);
             if (history) {
                 const emitResult = await fileEmitter(requiredFile);
                 if ((emitResult === null || emitResult === void 0 ? void 0 : emitResult.content) === undefined ||
@@ -398,8 +400,10 @@ class AngularWebpackPlugin {
         };
         // Required to support asynchronous resource loading
         // Must be done before creating transformers or getting template diagnostics
-        const pendingAnalysis = angularCompiler.analyzeAsync().then(() => {
-            var _a, _b;
+        const pendingAnalysis = angularCompiler
+            .analyzeAsync()
+            .then(() => {
+            var _a;
             this.requiredFilesToEmit.clear();
             for (const sourceFile of builder.getSourceFiles()) {
                 if (sourceFile.isDeclarationFile) {
@@ -424,29 +428,30 @@ class AngularWebpackPlugin {
                     }
                 }
             }
-            // Temporary workaround during transition to ESM-only @angular/compiler-cli
-            // TODO_ESM: This workaround should be removed prior to the final release of v13
-            //       and replaced with only `this.compilerCli.OptimizeFor`.
-            const OptimizeFor = 
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (_a = this.compilerCli.OptimizeFor) !== null && _a !== void 0 ? _a : require('@angular/compiler-cli/src/ngtsc/typecheck/api').OptimizeFor;
             // Collect new Angular diagnostics for files affected by changes
+            const OptimizeFor = this.compilerCli.OptimizeFor;
             const optimizeDiagnosticsFor = affectedFiles.size <= DIAGNOSTICS_AFFECTED_THRESHOLD
                 ? OptimizeFor.SingleFile
                 : OptimizeFor.WholeProgram;
             for (const affectedFile of affectedFiles) {
                 const angularDiagnostics = angularCompiler.getDiagnosticsForFile(affectedFile, optimizeDiagnosticsFor);
                 diagnosticsReporter(angularDiagnostics);
-                (_b = this.sourceFileCache) === null || _b === void 0 ? void 0 : _b.updateAngularDiagnostics(affectedFile, angularDiagnostics);
+                (_a = this.sourceFileCache) === null || _a === void 0 ? void 0 : _a.updateAngularDiagnostics(affectedFile, angularDiagnostics);
             }
-            return this.createFileEmitter(builder, (0, transformation_1.mergeTransformers)(angularCompiler.prepareEmit().transformers, transformers), getDependencies, (sourceFile) => {
-                this.requiredFilesToEmit.delete((0, paths_1.normalizePath)(sourceFile.fileName));
-                angularCompiler.incrementalDriver.recordSuccessfulEmit(sourceFile);
-            });
-        });
+            return {
+                emitter: this.createFileEmitter(builder, (0, transformation_1.mergeTransformers)(angularCompiler.prepareEmit().transformers, transformers), getDependencies, (sourceFile) => {
+                    this.requiredFilesToEmit.delete((0, paths_1.normalizePath)(sourceFile.fileName));
+                    angularCompiler.incrementalDriver.recordSuccessfulEmit(sourceFile);
+                }),
+            };
+        })
+            .catch((err) => ({ errorMessage: err instanceof Error ? err.message : `${err}` }));
         const analyzingFileEmitter = async (file) => {
-            const innerFileEmitter = await pendingAnalysis;
-            return innerFileEmitter(file);
+            const analysis = await pendingAnalysis;
+            if ('errorMessage' in analysis) {
+                throw new Error(analysis.errorMessage);
+            }
+            return analysis.emitter(file);
         };
         return {
             fileEmitter: analyzingFileEmitter,
@@ -500,12 +505,8 @@ class AngularWebpackPlugin {
                 }
             }, undefined, undefined, transformers);
             onAfterEmit === null || onAfterEmit === void 0 ? void 0 : onAfterEmit(sourceFile);
-            let hash;
-            if (content !== undefined && this.watchMode) {
-                // Capture emit history info for Angular rebuild analysis
-                hash = hashContent(content);
-                this.fileEmitHistory.set(filePath, { length: content.length, hash });
-            }
+            // Capture emit history info for Angular rebuild analysis
+            const hash = content ? (await this.addFileEmitHistory(filePath, content)).hash : undefined;
             const dependencies = [
                 ...(this.fileDependencies.get(filePath) || []),
                 ...getExtraDependencies(sourceFile),
@@ -524,24 +525,31 @@ class AngularWebpackPlugin {
         // this, a Function constructor is used to prevent TypeScript from changing the dynamic import.
         // Once TypeScript provides support for keeping the dynamic import this workaround can
         // be dropped.
-        const compilerCliModule = await new Function(`return import('@angular/compiler-cli');`)();
-        let compilerNgccModule;
-        try {
-            compilerNgccModule = await new Function(`return import('@angular/compiler-cli/ngcc');`)();
+        this.compilerCliModule = await new Function(`return import('@angular/compiler-cli');`)();
+        this.compilerNgccModule = await new Function(`return import('@angular/compiler-cli/ngcc');`)();
+    }
+    async addFileEmitHistory(filePath, content) {
+        const historyData = {
+            length: content.length,
+            hash: (0, crypto_1.createHash)('md5').update(content).digest(),
+        };
+        if (this.webpackCache) {
+            const history = await this.getFileEmitHistory(filePath);
+            if (!history || Buffer.compare(history.hash, historyData.hash) !== 0) {
+                // Hash doesn't match or item doesn't exist.
+                await this.webpackCache.storePromise(filePath, null, historyData);
+            }
         }
-        catch {
-            // If the `exports` field entry is not present then try the file directly.
-            // TODO_ESM: This try/catch can be removed once the `exports` field is present in `@angular/compiler-cli`
-            compilerNgccModule = await new Function(`return import('@angular/compiler-cli/ngcc/index.js');`)();
+        else if (this.watchMode) {
+            // The in memory file emit history is only required during watch mode.
+            this.fileEmitHistory.set(filePath, historyData);
         }
-        // If it is not ESM then the functions needed will be stored in the `default` property.
-        // TODO_ESM: This conditional can be removed when `@angular/compiler-cli` is ESM only.
-        this.compilerCliModule = compilerCliModule.readConfiguration
-            ? compilerCliModule
-            : compilerCliModule.default;
-        this.compilerNgccModule = compilerNgccModule.process
-            ? compilerNgccModule
-            : compilerNgccModule.default;
+        return historyData;
+    }
+    async getFileEmitHistory(filePath) {
+        return this.webpackCache
+            ? this.webpackCache.getPromise(filePath, null)
+            : this.fileEmitHistory.get(filePath);
     }
 }
 exports.AngularWebpackPlugin = AngularWebpackPlugin;

package/src/ivy/transformation.d.ts

@@ -11,7 +11,6 @@ export declare function createAotTransformers(builder: ts.BuilderProgram, option
     emitNgModuleScope?: boolean;
 }): ts.CustomTransformers;
 export declare function createJitTransformers(builder: ts.BuilderProgram, compilerCli: typeof import('@angular/compiler-cli'), options: {
-    directTemplateLoading?: boolean;
     inlineStyleFileExtension?: string;
 }): ts.CustomTransformers;
 export declare function mergeTransformers(first: ts.CustomTransformers, second: ts.CustomTransformers): ts.CustomTransformers;

package/src/ivy/transformation.js

@@ -50,7 +50,7 @@ function createJitTransformers(builder, compilerCli, options) {
     const getTypeChecker = () => builder.getProgram().getTypeChecker();
     return {
         before: [
-            (0, replace_resources_1.replaceResources)(() => true, getTypeChecker, options.directTemplateLoading, options.inlineStyleFileExtension),
+            (0, replace_resources_1.replaceResources)(() => true, getTypeChecker, options.inlineStyleFileExtension),
             compilerCli.constructorParametersDownlevelTransform(builder.getProgram()),
         ],
     };

package/src/ngcc_processor.js

@@ -55,7 +55,6 @@ class NgccProcessor {
     }
     /** Process the entire node modules tree. */
     process() {
-        var _a;
         // Under Bazel when running in sandbox mode parts of the filesystem is read-only.
         if (process.env.BAZEL_TARGET) {
             return;
@@ -115,19 +114,13 @@ class NgccProcessor {
         }
         const timeLabel = 'NgccProcessor.process';
         (0, benchmark_1.time)(timeLabel);
-        // Temporary workaround during transition to ESM-only @angular/compiler-cli
-        // TODO_ESM: This workaround should be removed prior to the final release of v13
-        //       and replaced with only `this.compilerNgcc.ngccMainFilePath`.
-        const ngccExecutablePath = 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (_a = this.compilerNgcc.ngccMainFilePath) !== null && _a !== void 0 ? _a : require.resolve('@angular/compiler-cli/ngcc/main-ngcc.js');
         // We spawn instead of using the API because:
         // - NGCC Async uses clustering which is problematic when used via the API which means
         // that we cannot setup multiple cluster masters with different options.
         // - We will not be able to have concurrent builds otherwise Ex: App-Shell,
         // as NGCC will create a lock file for both builds and it will cause builds to fails.
         const { status, error } = (0, child_process_1.spawnSync)(process.execPath, [
-            ngccExecutablePath,
+            this.compilerNgcc.ngccMainFilePath,
             '--source' /** basePath */,
             this._nodeModulesDirectory,
             '--properties' /** propertiesToConsider */,

package/src/resource_loader.js

@@ -32,6 +32,7 @@ const path = __importStar(require("path"));
 const vm = __importStar(require("vm"));
 const paths_1 = require("./ivy/paths");
 const inline_resource_1 = require("./loaders/inline-resource");
+const replace_resources_1 = require("./transformers/replace_resources");
 class WebpackResourceLoader {
     constructor(shouldCache) {
         this._fileDependencies = new Map();
@@ -93,15 +94,23 @@ class WebpackResourceLoader {
         if (!this._parentCompilation) {
             throw new Error('WebpackResourceLoader cannot be used without parentCompilation');
         }
-        // Create a special URL for reading the resource from memory
-        const entry = filePath ||
-            (resourceType
-                ? `${containingFile}-${this.outputPathCounter}.${fileExtension}!=!${this.inlineDataLoaderPath}!${containingFile}`
-                : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    `angular-resource:${resourceType},${(0, crypto_1.createHash)('md5').update(data).digest('hex')}`);
-        if (!entry) {
-            throw new Error(`"filePath" or "data" must be specified.`);
-        }
+        const getEntry = () => {
+            if (filePath) {
+                return `${filePath}?${replace_resources_1.NG_COMPONENT_RESOURCE_QUERY}`;
+            }
+            else if (resourceType) {
+                return (
+                // app.component.ts-2.css?ngResource!=!@ngtools/webpack/src/loaders/inline-resource.js!app.component.ts
+                `${containingFile}-${this.outputPathCounter}.${fileExtension}` +
+                    `?${replace_resources_1.NG_COMPONENT_RESOURCE_QUERY}!=!${this.inlineDataLoaderPath}!${containingFile}`);
+            }
+            else if (data) {
+                // Create a special URL for reading the resource from memory
+                return `angular-resource:${resourceType},${(0, crypto_1.createHash)('md5').update(data).digest('hex')}`;
+            }
+            throw new Error(`"filePath", "resourceType" or "data" must be specified.`);
+        };
+        const entry = getEntry();
         // Simple sanity check.
         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.`);
@@ -162,8 +171,11 @@ class WebpackResourceLoader {
             childCompilation.hooks.processAssets.tap({ name: 'angular-compiler', stage: webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT }, () => {
                 var _a;
                 finalContent = (_a = childCompilation.assets[outputFilePath]) === null || _a === void 0 ? void 0 : _a.source().toString();
-                delete childCompilation.assets[outputFilePath];
-                delete childCompilation.assets[outputFilePath + '.map'];
+                for (const { files } of childCompilation.chunks) {
+                    for (const file of files) {
+                        childCompilation.deleteAsset(file);
+                    }
+                }
             });
         });
         return new Promise((resolve, reject) => {

package/src/transformers/replace_resources.d.ts

@@ -6,5 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import * as ts from 'typescript';
-export declare function replaceResources(shouldTransform: (fileName: string) => boolean, getTypeChecker: () => ts.TypeChecker, directTemplateLoading?: boolean, inlineStyleFileExtension?: string): ts.TransformerFactory<ts.SourceFile>;
-export declare function getResourceUrl(node: ts.Node, loader?: string): string | null;
+export declare const NG_COMPONENT_RESOURCE_QUERY = "ngResource";
+export declare function replaceResources(shouldTransform: (fileName: string) => boolean, getTypeChecker: () => ts.TypeChecker, inlineStyleFileExtension?: string): ts.TransformerFactory<ts.SourceFile>;
+export declare function getResourceUrl(node: ts.Node): string | null;

package/src/transformers/replace_resources.js

@@ -26,11 +26,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getResourceUrl = exports.replaceResources = void 0;
+exports.getResourceUrl = exports.replaceResources = exports.NG_COMPONENT_RESOURCE_QUERY = void 0;
 const ts = __importStar(require("typescript"));
-const direct_resource_1 = require("../loaders/direct-resource");
 const inline_resource_1 = require("../loaders/inline-resource");
-function replaceResources(shouldTransform, getTypeChecker, directTemplateLoading = false, inlineStyleFileExtension) {
+exports.NG_COMPONENT_RESOURCE_QUERY = 'ngResource';
+function replaceResources(shouldTransform, getTypeChecker, inlineStyleFileExtension) {
     return (context) => {
         const typeChecker = getTypeChecker();
         const resourceImportDeclarations = [];
@@ -39,7 +39,7 @@ function replaceResources(shouldTransform, getTypeChecker, directTemplateLoading
         const visitNode = (node) => {
             if (ts.isClassDeclaration(node)) {
                 const decorators = ts.visitNodes(node.decorators, (node) => ts.isDecorator(node)
-                    ? visitDecorator(nodeFactory, node, typeChecker, directTemplateLoading, resourceImportDeclarations, moduleKind, inlineStyleFileExtension)
+                    ? visitDecorator(nodeFactory, node, typeChecker, resourceImportDeclarations, moduleKind, inlineStyleFileExtension)
                     : node);
                 return nodeFactory.updateClassDeclaration(node, decorators, node.modifiers, node.name, node.typeParameters, node.heritageClauses, node.members);
             }
@@ -62,7 +62,7 @@ function replaceResources(shouldTransform, getTypeChecker, directTemplateLoading
     };
 }
 exports.replaceResources = replaceResources;
-function visitDecorator(nodeFactory, node, typeChecker, directTemplateLoading, resourceImportDeclarations, moduleKind, inlineStyleFileExtension) {
+function visitDecorator(nodeFactory, node, typeChecker, resourceImportDeclarations, moduleKind, inlineStyleFileExtension) {
     if (!isComponentDecorator(node, typeChecker)) {
         return node;
     }
@@ -79,7 +79,7 @@ function visitDecorator(nodeFactory, node, typeChecker, directTemplateLoading, r
     const styleReplacements = [];
     // visit all properties
     let properties = ts.visitNodes(objectExpression.properties, (node) => ts.isObjectLiteralElementLike(node)
-        ? visitComponentMetadata(nodeFactory, node, styleReplacements, directTemplateLoading, resourceImportDeclarations, moduleKind, inlineStyleFileExtension)
+        ? visitComponentMetadata(nodeFactory, node, styleReplacements, resourceImportDeclarations, moduleKind, inlineStyleFileExtension)
         : node);
     // replace properties with updated properties
     if (styleReplacements.length > 0) {
@@ -88,7 +88,7 @@ function visitDecorator(nodeFactory, node, typeChecker, directTemplateLoading, r
     }
     return nodeFactory.updateDecorator(node, nodeFactory.updateCallExpression(decoratorFactory, decoratorFactory.expression, decoratorFactory.typeArguments, [nodeFactory.updateObjectLiteralExpression(objectExpression, properties)]));
 }
-function visitComponentMetadata(nodeFactory, node, styleReplacements, directTemplateLoading, resourceImportDeclarations, moduleKind = ts.ModuleKind.ES2015, inlineStyleFileExtension) {
+function visitComponentMetadata(nodeFactory, node, styleReplacements, resourceImportDeclarations, moduleKind = ts.ModuleKind.ES2015, inlineStyleFileExtension) {
     if (!ts.isPropertyAssignment(node) || ts.isComputedPropertyName(node.name)) {
         return node;
     }
@@ -97,8 +97,7 @@ function visitComponentMetadata(nodeFactory, node, styleReplacements, directTemp
         case 'moduleId':
             return undefined;
         case 'templateUrl':
-            const loaderOptions = moduleKind < ts.ModuleKind.ES2015 ? '?esModule=false' : '';
-            const url = getResourceUrl(node.initializer, directTemplateLoading ? `!${direct_resource_1.DirectAngularResourceLoaderPath}${loaderOptions}!` : '');
+            const url = getResourceUrl(node.initializer);
             if (!url) {
                 return node;
             }
@@ -122,7 +121,10 @@ function visitComponentMetadata(nodeFactory, node, styleReplacements, directTemp
                     if (inlineStyleFileExtension) {
                         const data = Buffer.from(node.text).toString('base64');
                         const containingFile = node.getSourceFile().fileName;
-                        url = `${containingFile}.${inlineStyleFileExtension}!=!${inline_resource_1.InlineAngularResourceLoaderPath}?data=${encodeURIComponent(data)}!${containingFile}`;
+                        // app.component.ts.css?ngResource!=!@ngtools/webpack/src/loaders/inline-resource.js?data=...!app.component.ts
+                        url =
+                            `${containingFile}.${inlineStyleFileExtension}?${exports.NG_COMPONENT_RESOURCE_QUERY}` +
+                                `!=!${inline_resource_1.InlineAngularResourceLoaderPath}?data=${encodeURIComponent(data)}!${containingFile}`;
                     }
                     else {
                         return nodeFactory.createStringLiteral(node.text);
@@ -148,12 +150,12 @@ function visitComponentMetadata(nodeFactory, node, styleReplacements, directTemp
             return node;
     }
 }
-function getResourceUrl(node, loader = '') {
+function getResourceUrl(node) {
     // only analyze strings
     if (!ts.isStringLiteral(node) && !ts.isNoSubstitutionTemplateLiteral(node)) {
         return null;
     }
-    return `${loader}${/^\.?\.\//.test(node.text) ? '' : './'}${node.text}`;
+    return `${/^\.?\.\//.test(node.text) ? '' : './'}${node.text}?${exports.NG_COMPONENT_RESOURCE_QUERY}`;
 }
 exports.getResourceUrl = getResourceUrl;
 function isComponentDecorator(node, typeChecker) {

package/src/loaders/direct-resource.d.ts

@@ -1,12 +0,0 @@
-/**
- * @license
- * Copyright Google LLC 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 { LoaderContext } from 'webpack';
-export declare const DirectAngularResourceLoaderPath: string;
-export default function (this: LoaderContext<{
-    esModule?: 'true' | 'false';
-}>, content: string): string;

package/src/loaders/direct-resource.js

@@ -1,16 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright Google LLC 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 });
-exports.DirectAngularResourceLoaderPath = void 0;
-exports.DirectAngularResourceLoaderPath = __filename;
-function default_1(content) {
-    const { esModule } = this.getOptions();
-    return `${esModule === 'false' ? 'module.exports =' : 'export default'} ${JSON.stringify(content)};`;
-}
-exports.default = default_1;