feature: ng add uses nx builders for nx workspaces

Author: manfredsteyer

.vscode/settings.json

@@ -6,5 +6,22 @@
         "markdown",
         "latex",
         "plaintext"
-    ]
+    ],
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#1f6fd0",
+        "activityBar.activeBorder": "#ee90bb",
+        "activityBar.background": "#1f6fd0",
+        "activityBar.foreground": "#e7e7e7",
+        "activityBar.inactiveForeground": "#e7e7e799",
+        "activityBarBadge.background": "#ee90bb",
+        "activityBarBadge.foreground": "#15202b",
+        "statusBar.background": "#1857a4",
+        "statusBar.foreground": "#e7e7e7",
+        "statusBarItem.hoverBackground": "#1f6fd0",
+        "titleBar.activeBackground": "#1857a4",
+        "titleBar.activeForeground": "#e7e7e7",
+        "titleBar.inactiveBackground": "#1857a499",
+        "titleBar.inactiveForeground": "#e7e7e799"
+    },
+    "peacock.color": "#1857a4"
 }

libs/mf-runtime/package.json

@@ -2,10 +2,10 @@
   "name": "@angular-architects/module-federation-runtime",
 
   "license": "MIT",
-  "version": "12.4.0",
+  "version": "12.5.0",
   "peerDependencies": {
-    "@angular/common": ">=12.4.0",
-    "@angular/core": ">=12.4.0"
+    "@angular/common": ">=12.0.0",
+    "@angular/core": ">=12.0.0"
   },
   "dependencies": {
     "tslib": "^2.0.0"

libs/mf-tools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-architects/module-federation-tools",
-  "version": "12.4.0",
+  "version": "12.5.0",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": ">=11.0.0",

libs/mf/README.md

@@ -278,6 +278,10 @@ The options passed to shareAll are applied to all dependencies found in your ``p
 
 This might come in handy in an mono repo scenario and when doing some experiments/ trouble shooting.
 
+### Nx Integration
+
+If the plugin detects that you are using Nx (it basically looks for a ``nx.json``), it uses the builders provided by Nx.
+
 ### Angular Universal (Server Side Rendering)
 
 Since Version 12.4.0 of this plugin, we support the new _jsdom_-based Angular Universal API for Server Side Rendering (SSR). Please note that SSR *only* makes sense in specific scenarios, e. g. for customer-facing apps that need SEO.  
@@ -354,6 +358,8 @@ Please find an [example](https://github.com/manfredsteyer/module-federation-plug
 
 To try it out, you can checkout the ``main`` branch of our [example](https://github.com/manfredsteyer/module-federation-plugin-example). After installing the dependencies (``npm i``), you can repeat the steps for adding Angular Universal to an existing Module Federation project described above twice: Once for the _project shell and the port 5000_ and one more time for the _project mfe1 and port 3000_.
 
+Please find a [brain dump](https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/tutorial/braindump-ssr.md) for this [here](https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/tutorial/braindump-ssr.md).
+
 ### Pitfalls when sharing libraries of a Monorepo
 
 #### Warning: No required version specified

libs/mf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-architects/module-federation",
-  "version": "12.4.0",
+  "version": "12.5.0",
   "license": "MIT",
   "repository": {
     "type": "GitHub",
@@ -18,7 +18,7 @@
   "builders": "./builders.json",
   "dependencies": {
     "ngx-build-plus": "^12.2.0",
-    "@angular-architects/module-federation-runtime": "^12.4.0",
+    "@angular-architects/module-federation-runtime": "^12.5.0",
     "word-wrap": "^1.2.3",
     "callsite": "^1.0.0",
     "node-fetch": "^2.6.1"

libs/mf/src/schematics/mf/schema.d.ts

@@ -1,4 +1,5 @@
 export interface MfSchematicSchema {
   project: string;
   port: string;
+  nxBuilders: boolean | undefined
 }

libs/mf/src/schematics/mf/schema.json

@@ -21,6 +21,10 @@
         "$source": "argv",
         "index": 1
       }
+    },
+    "nxBuilders": {
+      "type": "boolean",
+      "description": "Use builders provided by Nx instead of ngx-build-plus? Defaults to true for Nx workspaces and false for CLI workspaces.",
     }
   },
   "required": [

libs/mf/src/schematics/mf/schematic.ts

@@ -133,6 +133,14 @@ function updatePackageJson(tree: Tree): void {
   tree.overwrite('package.json', JSON.stringify(packageJson, null, 2));
 }
 
+function getWebpackConfigValue(nx: boolean, path: string) {
+  if (!nx) {
+    return path;
+  }
+
+  return { path };
+}
+
 export default function config (options: MfSchematicSchema): Rule {
 
   return async function (tree) {
@@ -183,6 +191,18 @@ export default function config (options: MfSchematicSchema): Rule {
     tree.create(configPath, webpackConfig);
     tree.create(configProdPath, prodConfig);
 
+    if (typeof options.nxBuilders === 'undefined') {
+      options.nxBuilders = tree.exists('nx.json');
+    }
+
+    if (options.nxBuilders) {
+      console.log('Using Nx builders!');
+    }
+
+    const webpackProperty = options.nxBuilders ? 'customWebpackConfig' : 'extraWebpackConfig';
+    const buildBuilder = options.nxBuilders ? '@nrwl/angular:webpack-browser' : 'ngx-build-plus:browser';
+    const serveBuilder = options.nxBuilders ? '@nrwl/angular:webpack-server' : 'ngx-build-plus:dev-server';
+
     if (!projectConfig?.architect?.build ||
       !projectConfig?.architect?.serve) {
         throw new Error(`The project doen't have a build or serve target in angular.json!`);
@@ -196,18 +216,31 @@ export default function config (options: MfSchematicSchema): Rule {
       projectConfig.architect.serve.options = {};
     }
 
-    projectConfig.architect.build.options.extraWebpackConfig = configPath;
+    projectConfig.architect.build.builder = buildBuilder;
+    projectConfig.architect.build.options[webpackProperty] = getWebpackConfigValue(options.nxBuilders, configPath);
     projectConfig.architect.build.options.commonChunk = false;
-    projectConfig.architect.build.configurations.production.extraWebpackConfig = configProdPath;
-    projectConfig.architect.serve.options.extraWebpackConfig = configPath;
-    projectConfig.architect.serve.options.port = port;
-    projectConfig.architect.serve.configurations.production.extraWebpackConfig = configProdPath;
+    projectConfig.architect.build.configurations.production[webpackProperty] = getWebpackConfigValue(options.nxBuilders, configProdPath);
 
-    if (projectConfig?.architect?.test?.options) {
-      projectConfig.architect.test.options.extraWebpackConfig = configPath;
+    projectConfig.architect.serve.builder = serveBuilder;
+    projectConfig.architect.serve.options.port = port;
+
+    // Only needed for ngx-build-plus
+    if (!options.nxBuilders) {
+      projectConfig.architect.serve.options[webpackProperty] = getWebpackConfigValue(options.nxBuilders, configPath);
+      projectConfig.architect.serve.configurations.production[webpackProperty] = getWebpackConfigValue(options.nxBuilders, configProdPath);
     }
+
+    // We don't change the config for testing anymore to prevent
+    // issues with eager bundles and webpack
+    // Consequence: 
+    //    Remotes: No issue
+    //    Hosts: Should be tested using an E2E test
+    // if (projectConfig?.architect?.test?.options) {
+    //   projectConfig.architect.test.options.extraWebpackConfig = configPath;
+    // }
 
     if (projectConfig?.architect?.['extract-i18n']?.options) {
+      projectConfig.architect['extract-i18n'].builder = 'ngx-build-plus:extract-i18n';
       projectConfig.architect['extract-i18n'].options.extraWebpackConfig = configPath;
     }
 
@@ -220,12 +253,13 @@ export default function config (options: MfSchematicSchema): Rule {
     return chain([
       makeMainAsync(main),
       adjustSSR(projectSourceRoot, ssrMappings),
-      externalSchematic('ngx-build-plus', 'ng-add', { project: options.project }),
+      // externalSchematic('ngx-build-plus', 'ng-add', { project: options.project }),
     ]);
 
   }
 }
 
+
 function generateRemoteConfig(workspace: any, projectName: string) {
   let remotes = '';
   for (const p in workspace.projects) {