diff --git a/generators/angular/resources/package.json b/generators/angular/resources/package.json index 5a03a08305f9..86bb9172f026 100644 --- 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 index 949a1c3b01fb..45d60a4079ed 100644 --- 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 index c178132e0771..e843cc58048e 100644 --- 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 index 17589affe066..748a7059478c 100644 --- 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 => - 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> => - loadRemoteModule<{ LazyTranslationModule: Type }>({ - type: 'module', - remoteEntry: `./services/${service}/remoteEntry.js`, - exposedModule: './translation-module', + importRemote<{ LazyTranslationModule: Type }>({ + esm: true, + url: `./services/${service}`, + scope: service, + module: 'translation-module', }).then(({ LazyTranslationModule }) => LazyTranslationModule); +<%_ } _%> export const loadEntityModule = async (service: string): Promise> => - loadRemoteModule<{ EntityRoutingModule: Type }>({ - type: 'module', - remoteEntry: `./services/${service}/remoteEntry.js`, - exposedModule: './entity-routing', + importRemote<{ EntityRoutingModule: Type }>({ + 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 index f4240c61dd46..7138f42050f3 100644 --- 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 index 917e371235eb..fb05a9febad5 100644 --- 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 index a9a3f7b0a963..6d9891d54d17 100644 --- 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",