@ngtools/webpack 13.0.0 → 13.0.4

package/README.md

@@ -1,6 +1,9 @@
 # Angular Compiler Webpack Plugin
 
 Webpack 5.x plugin for the Angular Ahead-of-Time compiler. The plugin also supports Angular JIT mode.
+When this plugin is used outside of the Angular CLI, the Ivy linker will also be needed to support
+the usage of Angular libraries. An example configuration of the Babel-based Ivy linker is provided
+in the linker section. For additional information regarding the linker, please see: https://v13.angular.io/guide/creating-libraries#consuming-partial-ivy-code-outside-the-angular-cli
 
 ## Usage
 
@@ -13,6 +16,7 @@ exports = {
   /* ... */
   module: {
     rules: [
+      /* ... */
       {
         test: /\.[jt]sx?$/,
         loader: '@ngtools/webpack',
@@ -23,6 +27,7 @@ exports = {
   plugins: [
     new AngularWebpackPlugin({
       tsconfig: 'path/to/tsconfig.json',
+      // ... other options as needed
     }),
   ],
 };
@@ -38,3 +43,38 @@ The loader works with webpack plugin to compile the application's TypeScript. It
 - `directTemplateLoading` [default: `true`] - Causes the plugin to load component templates (HTML) directly from the filesystem. This is more efficient if only using the `raw-loader` to load component templates. Do not enable this option if additional loaders are configured for component templates.
 - `fileReplacements` [default: none] - Allows replacing TypeScript files with other TypeScript files in the build. This option acts on fully resolved file paths.
 - `inlineStyleFileExtension` [default: none] - When set inline component styles will be processed by Webpack as files with the provided extension.
+
+## Ivy Linker
+
+The Ivy linker can be setup by using the Webpack `babel-loader` package.
+If not already installed, add the `babel-loader` package using your project's package manager.
+Then in your webpack config, add the `babel-loader` with the following configuration.
+If the `babel-loader` is already present in your configuration, the linker plugin can be added to
+the existing loader configuration as well.
+Enabling caching for the `babel-loader` is recommended to avoid reprocessing libraries on
+every build.
+For additional information regarding the `babel-loader` package, please see: https://github.com/babel/babel-loader/tree/main#readme
+
+```typescript
+import linkerPlugin from '@angular/compiler-cli/linker/babel';
+
+exports = {
+  /* ... */
+  module: {
+    rules: [
+      /* ... */
+      {
+        test: /\.[cm]?js$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: true,
+            compact: false,
+            plugins: [linkerPlugin],
+          },
+        },
+      },
+    ],
+  },
+};
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngtools/webpack",
-  "version": "13.0.0",
+  "version": "13.0.4",
   "description": "Webpack plugin that AoT compiles your Angular components and modules.",
   "main": "./src/index.js",
   "typings": "src/index.d.ts",
@@ -26,7 +26,7 @@
   "homepage": "https://github.com/angular/angular-cli",
   "dependencies": {},
   "peerDependencies": {
-    "@angular/compiler-cli": "^13.0.0 || ^13.0.0-next",
+    "@angular/compiler-cli": "^13.0.0",
     "typescript": "~4.4.3",
     "webpack": "^5.30.0"
   },

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

@@ -5,5 +5,8 @@
  * 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 (content: string): string;
+export default function (this: LoaderContext<{
+    esModule?: 'true' | 'false';
+}>, content: string): string;

package/src/loaders/direct-resource.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DirectAngularResourceLoaderPath = void 0;
 exports.DirectAngularResourceLoaderPath = __filename;
 function default_1(content) {
-    return `export default ${JSON.stringify(content)};`;
+    const { esModule } = this.getOptions();
+    return `${esModule === 'false' ? 'module.exports =' : 'export default'} ${JSON.stringify(content)};`;
 }
 exports.default = default_1;

package/src/transformers/replace_resources.js

@@ -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, inlineStyleFileExtension) {
+function visitComponentMetadata(nodeFactory, node, styleReplacements, directTemplateLoading, resourceImportDeclarations, moduleKind = ts.ModuleKind.ES2015, inlineStyleFileExtension) {
     if (!ts.isPropertyAssignment(node) || ts.isComputedPropertyName(node.name)) {
         return node;
     }
@@ -97,7 +97,8 @@ function visitComponentMetadata(nodeFactory, node, styleReplacements, directTemp
         case 'moduleId':
             return undefined;
         case 'templateUrl':
-            const url = getResourceUrl(node.initializer, directTemplateLoading ? `!${direct_resource_1.DirectAngularResourceLoaderPath}!` : '');
+            const loaderOptions = moduleKind < ts.ModuleKind.ES2015 ? '?esModule=false' : '';
+            const url = getResourceUrl(node.initializer, directTemplateLoading ? `!${direct_resource_1.DirectAngularResourceLoaderPath}${loaderOptions}!` : '');
             if (!url) {
                 return node;
             }
@@ -165,10 +166,10 @@ function isComponentDecorator(node, typeChecker) {
     }
     return false;
 }
-function createResourceImport(nodeFactory, url, resourceImportDeclarations, moduleKind = ts.ModuleKind.ES2015) {
+function createResourceImport(nodeFactory, url, resourceImportDeclarations, moduleKind) {
     const urlLiteral = nodeFactory.createStringLiteral(url);
     if (moduleKind < ts.ModuleKind.ES2015) {
-        return nodeFactory.createPropertyAccessExpression(nodeFactory.createCallExpression(nodeFactory.createIdentifier('require'), [], [urlLiteral]), 'default');
+        return nodeFactory.createCallExpression(nodeFactory.createIdentifier('require'), [], [urlLiteral]);
     }
     else {
         const importName = nodeFactory.createIdentifier(`__NG_CLI_RESOURCE__${resourceImportDeclarations.length}`);