@ngtools/webpack 13.0.0 → 13.1.0-next.1

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.1.0-next.1",
   "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 || ^13.1.0-next",
     "typescript": "~4.4.3",
     "webpack": "^5.30.0"
   },

package/src/ivy/loader.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = exports.angularWebpackLoader = void 0;
 const path = __importStar(require("path"));
 const symbol_1 = require("./symbol");
+const JS_FILE_REGEXP = /\.[cm]?js$/;
 function angularWebpackLoader(content, map) {
     const callback = this.async();
     if (!callback) {
@@ -36,7 +37,7 @@ function angularWebpackLoader(content, map) {
     }
     const fileEmitter = this[symbol_1.AngularPluginSymbol];
     if (!fileEmitter || typeof fileEmitter !== 'object') {
-        if (this.resourcePath.endsWith('.js')) {
+        if (JS_FILE_REGEXP.test(this.resourcePath)) {
             // Passthrough for JS files when no plugin is used
             this.callback(undefined, content, map);
             return;
@@ -48,7 +49,7 @@ function angularWebpackLoader(content, map) {
         .emit(this.resourcePath)
         .then((result) => {
         if (!result) {
-            if (this.resourcePath.endsWith('.js')) {
+            if (JS_FILE_REGEXP.test(this.resourcePath)) {
                 // Return original content for JS files if not compiled by TypeScript ("allowJs")
                 this.callback(undefined, content, map);
             }