Angular Microfrontend Module Federation Tutorial - Part 6

מי שהתקין את הגירסה החדשה של 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 בדיקה של תלויות שהוא צריך לעומת מה שיש לו כבר, במידה שחסרים תלויות הוא מבצע את המשיכה לבד ורושם אותם בתלויות של הפרויקט.

עדיין ניתן לבצע שם שינויים למיקרה הצורך, אבל כברירת מחדל, אין צורך.

חוץ מהשינויים שראינו כאן, שאר העבודה נשארת אותו דבר. ⛳

זה החלק האחרון במדריך הבסיסי למיקרו-פרונטאנד, בהצלחה 🚀.

Angular Microfrontend Module Federation Tutorial – Part 6

הבדל ראשון:

ההבדל השני:

הבדל שלישי:

תצורה קודמת של SHELL:

תצורה קודמת של MFE1:

תצורה חדשה של SHELL:

תצורה חדשה של MFE1:

השארת תגובה

שדה טקסט עשיר עם תמונות

איך למשוך דינמית favicon של אתרים אחרים ב-JS

צור קשר

הבדל ראשון:

ההבדל השני:

הבדל שלישי:

תצורה קודמת של SHELL:

תצורה קודמת של MFE1:

תצורה חדשה של SHELL:

תצורה חדשה של MFE1:

פוסטים קשורים:

השארת תגובה

סינון על פי קטגוריות

צור קשר