מי שהתקין את הגירסה החדשה של module federation , יש מספר הבדלים מהגירסה שהראתי כאן.
לא משמעותי, אבל נעבור עליהם בכל זאת.
הבדל ראשון:
גירסת האנגולר שעבדנו עליה במדריך הזה הייתה 13, בגירסה החדשה של מודול פדרשיין יש דרישה לגירסת אנגולר של לפחות 14.
ההבדל השני:
הפקודה להוספת module federation.
// OLD ng add @angular-architects/module-federation --project shell --port 5000 // NEW ng add @angular-architects/module-federation --project shell --port 5000 --type host // OLD ng add @angular-architects/module-federation --project mfe1 --port 3000 // NEW ng add @angular-architects/module-federation --project mfe1 --port 3000 --type remote
לא כזה שינוי 😎
הבדל שלישי:
קובץ ה- webpack.config.js שנראה שונה.
תצורה קודמת של SHELL:
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); const mf = require("@angular-architects/module-federation/webpack"); const path = require("path"); const share = mf.share; const sharedMappings = new mf.SharedMappings(); sharedMappings.register( path.join(__dirname, 'tsconfig.json'), [/* mapped paths to share */]); module.exports = { output: { uniqueName: "shell", publicPath: "auto" }, optimization: { runtimeChunk: false }, resolve: { alias: { ...sharedMappings.getAliases(), } }, experiments: { outputModule: true }, plugins: [ new ModuleFederationPlugin({ library: { type: "module" }, // For remotes (please adjust) // name: "shell", // filename: "remoteEntry.js", // exposes: { // './Component': './/src/app/app.component.ts', // }, // For hosts (please adjust) // remotes: { // "mfe1": "http://localhost:3000/remoteEntry.js", // }, shared: share({ "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, ...sharedMappings.getDescriptors() }) }), sharedMappings.getPlugin() ], };
תצורה קודמת של MFE1:
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); const mf = require("@angular-architects/module-federation/webpack"); const path = require("path"); const share = mf.share; const sharedMappings = new mf.SharedMappings(); sharedMappings.register( path.join(__dirname, 'tsconfig.json'), [/* mapped paths to share */]); module.exports = { output: { uniqueName: "mfe1", publicPath: "auto" }, optimization: { runtimeChunk: false }, resolve: { alias: { ...sharedMappings.getAliases(), } }, experiments: { outputModule: true }, plugins: [ new ModuleFederationPlugin({ library: { type: "module" }, // For remotes (please adjust) // name: "mfe1", // filename: "remoteEntry.js", // exposes: { // './Component': './/src/app/app.component.ts', // }, // For hosts (please adjust) // remotes: { // "mfe1": "http://localhost:3000/remoteEntry.js", // }, shared: share({ "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, ...sharedMappings.getDescriptors() }) }), sharedMappings.getPlugin() ], };
תצורה חדשה של SHELL:
const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack'); module.exports = withModuleFederationPlugin({ remotes: { "mfe1": "http://localhost:3000/remoteEntry.js", }, shared: { ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }), }, });
תצורה חדשה של MFE1:
const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack'); module.exports = withModuleFederationPlugin({ name: 'mfe1', exposes: { './Component': './src/app/app.component.ts', }, shared: { ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }), }, });
כפי שניתן לראות, הקבצים התקצרו בהרבה.😁
יש כבר דוגמה מוכנה בפרוייקט שצורך רכיבים ויש דוגמה מוכנה בפרויקט שמחצין רכיבים.
אין יותר את שם קובץ השיתוף (remoteEntry.js).
הגדרות השיתוף התקצרו ואופן השיתוף עובד כך שמבוצע בכל משיכה של MFE בדיקה של תלויות שהוא צריך לעומת מה שיש לו כבר, במידה שחסרים תלויות הוא מבצע את המשיכה לבד ורושם אותם בתלויות של הפרויקט.
עדיין ניתן לבצע שם שינויים למיקרה הצורך, אבל כברירת מחדל, אין צורך.
חוץ מהשינויים שראינו כאן, שאר העבודה נשארת אותו דבר. ⛳
זה החלק האחרון במדריך הבסיסי למיקרו-פרונטאנד, בהצלחה 🚀.