replace @angular-architects/module-federation-runtime with @module-fe…

…deration/utilities
mshima · Oct 24, 2023 · e6bf535 · e6bf535
1 parent da7bc6f
commit e6bf535
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 20 deletions.
diff --git a/generators/angular/resources/package.json b/generators/angular/resources/package.json
@@ -17,11 +17,11 @@
     "zone.js": "0.13.3"
   },
   "devDependencies": {
-    "@angular-architects/module-federation-runtime": "16.0.4",
     "@angular-builders/custom-webpack": "16.0.1",
     "@angular-builders/jest": "16.0.1",
     "@angular-eslint/eslint-plugin": "16.2.0",
     "@angular/cli": "16.2.7",
+    "@module-federation/utilities": "3.0.3-0",
     "@types/jest": "29.5.6",
     "@types/node": "18.18.6",
     "@typescript-eslint/eslint-plugin": "6.8.0",

diff --git a/generators/angular/templates/jest.conf.js.ejs b/generators/angular/templates/jest.conf.js.ejs
@@ -22,7 +22,7 @@ const { compilerOptions: { paths = {}, baseUrl = './' } } = require('./tsconfig.
 const environment = require('./webpack/environment');
 
 module.exports = {
-  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$|dayjs/esm<% if (applicationTypeGateway && microfrontend) { %>|@angular-architects/module-federation-runtime<% } %>)'],
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$|dayjs/esm)'],
   resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
   globals: {
     ...environment,

diff --git a/generators/angular/templates/package.json.ejs b/generators/angular/templates/package.json.ejs
@@ -66,7 +66,7 @@
   },
   "devDependencies": {
 <%_ if (microfrontend && applicationTypeGateway) { _%>
-    "@angular-architects/module-federation-runtime": "<%= nodeDependencies['@angular-architects/module-federation-runtime'] %>",
+    "@module-federation/utilities": "<%= nodeDependencies['@module-federation/utilities'] %>",
 <%_ } _%>
 <%_ if (communicationSpringWebsocket) { _%>
     "@types/sockjs-client": "1.5.1",

diff --git a/generators/angular/templates/src/main/webapp/app/core/microfrontend/index.ts.ejs b/generators/angular/templates/src/main/webapp/app/core/microfrontend/index.ts.ejs
@@ -16,28 +16,33 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import { Type } from '@angular/core';
-import { loadRemoteModule } from '@angular-architects/module-federation-runtime';
+import type { Type } from '@angular/core';
+import { importRemote } from '@module-federation/utilities';
 
-import NavbarItem from 'app/layouts/navbar/navbar-item.model';
+import type NavbarItem from 'app/layouts/navbar/navbar-item.model';
 
 export const loadNavbarItems = async (service: string): Promise<NavbarItem[]> =>
-  loadRemoteModule<{ EntityNavbarItems: NavbarItem[] }>({
-    type: 'module',
-    remoteEntry: `./services/${service}/remoteEntry.js`,
-    exposedModule: './entity-navbar-items',
+  importRemote<{ EntityNavbarItems: NavbarItem[] }>({
+    esm: true,
+    url: `./services/${service}`,
+    scope: service,
+    module: 'entity-navbar-items',
   }).then(({ EntityNavbarItems }) => EntityNavbarItems);
+<%_ if (enableTranslation) { _%>
 
 export const loadTranslationModule = async (service: string): Promise<Type<any>> =>
-  loadRemoteModule<{ LazyTranslationModule: Type<any> }>({
-    type: 'module',
-    remoteEntry: `./services/${service}/remoteEntry.js`,
-    exposedModule: './translation-module',
+  importRemote<{ LazyTranslationModule: Type<any> }>({
+    esm: true,
+    url: `./services/${service}`,
+    scope: service,
+    module: 'translation-module',
   }).then(({ LazyTranslationModule }) => LazyTranslationModule);
+<%_ } _%>
 
 export const loadEntityModule = async (service: string): Promise<Type<any>> =>
-  loadRemoteModule<{ EntityRoutingModule: Type<any> }>({
-    type: 'module',
-    remoteEntry: `./services/${service}/remoteEntry.js`,
-    exposedModule: './entity-routing',
+  importRemote<{ EntityRoutingModule: Type<any> }>({
+    esm: true,
+    url: `./services/${service}`,
+    scope: service,
+    module: 'entity-routing',
   }).then(({ EntityRoutingModule }) => EntityRoutingModule);
diff --git a/generators/angular/templates/tsconfig.json.ejs b/generators/angular/templates/tsconfig.json.ejs
@@ -36,6 +36,9 @@
     "useDefineForClassFields": false,
     "target": "es2022",
     "module": "es2020",
+<%_ if (microfrontend && applicationTypeGateway) { _%>
+    "skipLibCheck": true,
+<%_ } _%>
     "types": [],
     "lib": ["es2018", "es2020", "dom"]
   },

diff --git a/generators/angular/templates/webpack/webpack.microfrontend.js.ejs b/generators/angular/templates/webpack/webpack.microfrontend.js.ejs
@@ -25,6 +25,14 @@ module.exports = (config, options, targetOptions) => {
     experiments: {
       outputModule: true,
     },
+<%_ if (applicationTypeGateway) { _%>
+    resolve: {
+      fallback: {
+        // Workaround https://github.com/module-federation/universe/issues/1575
+        path: false,
+      },
+    },
+<%_ } _%>
     plugins: [
       new ModuleFederationPlugin({
         library: {

diff --git a/generators/app/__snapshots__/generator.spec.mts.snap b/generators/app/__snapshots__/generator.spec.mts.snap
@@ -461,7 +461,6 @@ exports[`generator - app with default config should match snapshot 1`] = `
     "rtl": false,
   },
   "nodeDependencies": {
-    "@angular-architects/module-federation-runtime": "ANGULAR_ARCHITECTS_MODULE_FEDERATION_RUNTIME_VERSION",
     "@angular-builders/custom-webpack": "ANGULAR_BUILDERS_CUSTOM_WEBPACK_VERSION",
     "@angular-builders/jest": "ANGULAR_BUILDERS_JEST_VERSION",
     "@angular-eslint/eslint-plugin": "ANGULAR_ESLINT_ESLINT_PLUGIN_VERSION",
@@ -471,6 +470,7 @@ exports[`generator - app with default config should match snapshot 1`] = `
     "@fortawesome/angular-fontawesome": "FORTAWESOME_ANGULAR_FONTAWESOME_VERSION",
     "@fortawesome/fontawesome-svg-core": "FORTAWESOME_FONTAWESOME_SVG_CORE_VERSION",
     "@fortawesome/free-solid-svg-icons": "FORTAWESOME_FREE_SOLID_SVG_ICONS_VERSION",
+    "@module-federation/utilities": "MODULE_FEDERATION_UTILITIES_VERSION",
     "@ng-bootstrap/ng-bootstrap": "NG_BOOTSTRAP_NG_BOOTSTRAP_VERSION",
     "@ngx-translate/core": "NGX_TRANSLATE_CORE_VERSION",
     "@ngx-translate/http-loader": "NGX_TRANSLATE_HTTP_LOADER_VERSION",
@@ -1029,7 +1029,6 @@ exports[`generator - app with gateway should match snapshot 1`] = `
     "rtl": false,
   },
   "nodeDependencies": {
-    "@angular-architects/module-federation-runtime": "ANGULAR_ARCHITECTS_MODULE_FEDERATION_RUNTIME_VERSION",
     "@angular-builders/custom-webpack": "ANGULAR_BUILDERS_CUSTOM_WEBPACK_VERSION",
     "@angular-builders/jest": "ANGULAR_BUILDERS_JEST_VERSION",
     "@angular-eslint/eslint-plugin": "ANGULAR_ESLINT_ESLINT_PLUGIN_VERSION",
@@ -1039,6 +1038,7 @@ exports[`generator - app with gateway should match snapshot 1`] = `
     "@fortawesome/angular-fontawesome": "FORTAWESOME_ANGULAR_FONTAWESOME_VERSION",
     "@fortawesome/fontawesome-svg-core": "FORTAWESOME_FONTAWESOME_SVG_CORE_VERSION",
     "@fortawesome/free-solid-svg-icons": "FORTAWESOME_FREE_SOLID_SVG_ICONS_VERSION",
+    "@module-federation/utilities": "MODULE_FEDERATION_UTILITIES_VERSION",
     "@ng-bootstrap/ng-bootstrap": "NG_BOOTSTRAP_NG_BOOTSTRAP_VERSION",
     "@ngx-translate/core": "NGX_TRANSLATE_CORE_VERSION",
     "@ngx-translate/http-loader": "NGX_TRANSLATE_HTTP_LOADER_VERSION",