feat(angular): add backwards compatibility to webpack-server (#14163)

nrwl · Jan 6, 2023 · 4a8f95e · 4a8f95e
1 parent 15174c0
commit 4a8f95e
Showing 1 changed file with 50 additions and 47 deletions.
diff --git a/packages/angular/src/builders/webpack-server/webpack-server.impl.ts b/packages/angular/src/builders/webpack-server/webpack-server.impl.ts
@@ -1,20 +1,15 @@
-import { BuilderContext, createBuilder } from '@angular-devkit/architect';
-import { JsonObject } from '@angular-devkit/core';
 import { joinPathFragments } from '@nrwl/devkit';
 import { existsSync } from 'fs';
-import { Observable } from 'rxjs';
+import { from, Observable } from 'rxjs';
 import { mergeCustomWebpackConfig } from '../utilities/webpack';
-import {
-  executeServerBuilder,
-  ServerBuilderOutput,
-} from '@angular-devkit/build-angular';
 import { Schema } from './schema';
 import { createTmpTsConfigForBuildableLibs } from '../utilities/buildable-libs';
+import { switchMap } from 'rxjs/operators';
 
 function buildServerApp(
   options: Schema,
-  context: BuilderContext
-): Observable<ServerBuilderOutput> {
+  context: import('@angular-devkit/architect').BuilderContext
+): Observable<import('@angular-devkit/build-angular').ServerBuilderOutput> {
   const { buildLibsFromSource, customWebpackConfig, ...delegateOptions } =
     options;
   // If there is a path to custom webpack config
@@ -38,55 +33,63 @@ function buildServerApp(
     }
   }
 
-  return executeServerBuilder(delegateOptions, context);
+  return from(import('@angular-devkit/build-angular')).pipe(
+    switchMap(({ executeServerBuilder }) =>
+      executeServerBuilder(delegateOptions, context)
+    )
+  );
 }
 
 function buildServerAppWithCustomWebpackConfiguration(
   options: Schema,
-  context: BuilderContext,
+  context: import('@angular-devkit/architect').BuilderContext,
   pathToWebpackConfig: string
 ) {
-  return executeServerBuilder(options, context as any, {
-    webpackConfiguration: async (baseWebpackConfig) => {
-      // Angular 15 auto includes code from @angular/platform-server
-      // This includes the code outside the shared scope created by ModuleFederation
-      // This code will be included in the generated code from our generators,
-      // maintaining it within the shared scope.
-      // Therefore, if the build is an MF Server build, remove the auto-includes from
-      // the base webpack config from Angular
-      let mergedConfig = await mergeCustomWebpackConfig(
-        baseWebpackConfig,
-        pathToWebpackConfig,
-        options,
-        context.target
-      );
+  return from(import('@angular-devkit/build-angular')).pipe(
+    switchMap(({ executeServerBuilder }) =>
+      executeServerBuilder(options, context as any, {
+        webpackConfiguration: async (baseWebpackConfig) => {
+          // Angular 15 auto includes code from @angular/platform-server
+          // This includes the code outside the shared scope created by ModuleFederation
+          // This code will be included in the generated code from our generators,
+          // maintaining it within the shared scope.
+          // Therefore, if the build is an MF Server build, remove the auto-includes from
+          // the base webpack config from Angular
+          let mergedConfig = await mergeCustomWebpackConfig(
+            baseWebpackConfig,
+            pathToWebpackConfig,
+            options,
+            context.target
+          );
 
-      if (
-        mergedConfig.plugins
-          .map((p) => p.constructor.name)
-          .includes('UniversalFederationPlugin')
-      ) {
-        mergedConfig.entry.main = mergedConfig.entry.main.filter(
-          (m) => !m.startsWith('@angular/platform-server/init')
-        );
-        mergedConfig.module.rules = mergedConfig.module.rules.filter((m) =>
-          !m.loader
-            ? true
-            : !m.loader.endsWith(
-                '@angular-devkit/build-angular/src/builders/server/platform-server-exports-loader.js'
-              )
-        );
-      }
+          if (
+            mergedConfig.plugins
+              .map((p) => p.constructor.name)
+              .includes('UniversalFederationPlugin')
+          ) {
+            mergedConfig.entry.main = mergedConfig.entry.main.filter(
+              (m) => !m.startsWith('@angular/platform-server/init')
+            );
+            mergedConfig.module.rules = mergedConfig.module.rules.filter((m) =>
+              !m.loader
+                ? true
+                : !m.loader.endsWith(
+                    '@angular-devkit/build-angular/src/builders/server/platform-server-exports-loader.js'
+                  )
+            );
+          }
 
-      return mergedConfig;
-    },
-  });
+          return mergedConfig;
+        },
+      })
+    )
+  );
 }
 
 export function executeWebpackServerBuilder(
   options: Schema,
-  context: BuilderContext
-): Observable<ServerBuilderOutput> {
+  context: import('@angular-devkit/architect').BuilderContext
+): Observable<import('@angular-devkit/build-angular').ServerBuilderOutput> {
   options.buildLibsFromSource ??= true;
 
   if (!options.buildLibsFromSource) {
@@ -100,6 +103,6 @@ export function executeWebpackServerBuilder(
   return buildServerApp(options, context);
 }
 
-export default createBuilder<JsonObject & Schema>(
+export default require('@angular-devkit/architect').createBuilder(
   executeWebpackServerBuilder
 ) as any;