From 0cfc6761e7702a53c01ee6584d5425cf4c38518d Mon Sep 17 00:00:00 2001 From: Manfred Steyer Date: Wed, 8 Sep 2021 17:59:03 +0200 Subject: [PATCH] feature: ng add uses nx builders for nx workspaces --- .vscode/settings.json | 19 +++++++++- libs/mf-runtime/package.json | 6 ++-- libs/mf-tools/package.json | 2 +- libs/mf/README.md | 6 ++++ libs/mf/package.json | 4 +-- libs/mf/src/schematics/mf/schema.d.ts | 1 + libs/mf/src/schematics/mf/schema.json | 4 +++ libs/mf/src/schematics/mf/schematic.ts | 50 +++++++++++++++++++++----- 8 files changed, 77 insertions(+), 15 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index eb56df2f..05512834 100644 --- a/.vscode/settings.json +++ b/.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" } \ No newline at end of file diff --git a/libs/mf-runtime/package.json b/libs/mf-runtime/package.json index 1266d150..65e561a0 100644 --- a/libs/mf-runtime/package.json +++ b/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" diff --git a/libs/mf-tools/package.json b/libs/mf-tools/package.json index 56f60bb6..bb720113 100644 --- a/libs/mf-tools/package.json +++ b/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", diff --git a/libs/mf/README.md b/libs/mf/README.md index 69e59ee5..bf771d28 100644 --- a/libs/mf/README.md +++ b/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 diff --git a/libs/mf/package.json b/libs/mf/package.json index 25a9fdd5..b66fb5f1 100644 --- a/libs/mf/package.json +++ b/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" diff --git a/libs/mf/src/schematics/mf/schema.d.ts b/libs/mf/src/schematics/mf/schema.d.ts index 2e88084c..91709f30 100644 --- a/libs/mf/src/schematics/mf/schema.d.ts +++ b/libs/mf/src/schematics/mf/schema.d.ts @@ -1,4 +1,5 @@ export interface MfSchematicSchema { project: string; port: string; + nxBuilders: boolean | undefined } diff --git a/libs/mf/src/schematics/mf/schema.json b/libs/mf/src/schematics/mf/schema.json index 97b1ef15..ce0e413b 100644 --- a/libs/mf/src/schematics/mf/schema.json +++ b/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": [ diff --git a/libs/mf/src/schematics/mf/schematic.ts b/libs/mf/src/schematics/mf/schematic.ts index ff63f50f..70996f6f 100644 --- a/libs/mf/src/schematics/mf/schematic.ts +++ b/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) {