Erstellen Sie ein Portal für Mikro-Frontends mithilfe AWS Amplify von Angular und Module Federation

Geben Sie im Angular CLI den folgenden Befehl ein:

ng new shell --routing

Geben Sie den folgenden Befehl ein, um zum Projektordner zu navigieren:

cd shell

Öffnen Sie die Datei environment.ts.

Zum mfe1URL: 'http://localhost:5000' Objekt hinzufügen: environment

export const environment = {
  production: false,
  mfe1URL: 'http://localhost:5000',
};

Speichern und schließen Sie die Datei environment.ts.

Öffnen Sie die Datei app-routing.module.ts.

Geben Sie im Angular den folgenden Befehl einCLI, um das Modul aus dem @angular -architects/module-federation Plugin zu importieren: loadRemoteModule

import { loadRemoteModule } from '@angular-architects/module-federation';

Stellen Sie die Standardroute wie folgt ein:

{
    path: '',
    pathMatch: 'full',
    redirectTo: 'mfe1'
  },

Stellen Sie die Route für das Micro-Frontend ein:

{
    path: 'mfe1',
    loadChildren: () => loadRemoteModule({
        type: 'module',
        remoteEntry: `${environment.mfe1URL}/remoteEntry.js`,
        exposedModule: './Module'
      })
      .then(m => m.Mfe1Module)
  },

Speichern und schließen Sie die Datei app-routing.module.ts.

Erstellen Sie in dem src Ordner eine neue Datei mit dem Namen decl.d.ts.

Öffnen Sie die Datei decl.d.ts.

Fügen Sie der Datei Folgendes hinzu:

declare module 'mfe1/Module';

Speichern und schließen Sie die Datei decl.d.ts.

Öffnen Sie die Datei main.ts.

Ersetzen Sie den Inhalt durch Folgendes:

import { loadRemoteEntry } from '@angular-architects/module-federation';
 
Promise.all([
    loadRemoteEntry(`${environment.mfe1URL}/remoteEntry.js`, 'mfe1'),
])
.catch(err => console.error('Error loading remote entries', err))
.then(() => import('./bootstrap'))
.catch(err => console.error(err));

Speichern und schließen Sie die Datei main.ts.

Öffnen Sie die Datei app.component.html.

Ersetzen Sie den Inhalt durch Folgendes:

<h1>Shell application is running!</h1>
<router-outlet></router-outlet>

Speichern und schließen Sie die Datei app.component.html.

Geben Sie im Angular CLI den folgenden Befehl ein:

ng new mfe1 --routing

Geben Sie den folgenden Befehl ein, um zum Projektordner zu navigieren:

cd mfe1

Öffnen Sie die Datei mfe-routing.module.ts.

Stellen Sie die Standardroute wie folgt ein:

{
    path: '',
    component: Mfe1Component
  },

Speichern und schließen Sie die Datei mfe-routing.module.ts.

Öffnen Sie die Datei app-routing.module.ts.

Stellen Sie die Standardroute wie folgt ein:

{
    path: '',
    pathMatch: 'full',
    redirectTo: 'mfe1'
  },

Fügen Sie die folgende mfe1 Route hinzu:

{
    path: 'mfe1',
    loadChildren: () => 
      import('./mfe1/mfe1.module').then((m) => m.Mfe1Module),
  },

Speichern und schließen Sie die Datei app-routing.module.ts.

Öffnen Sie die Datei webpack.config.js.

Bearbeiten Sie den For remotes Abschnitt so, dass er dem Folgenden entspricht:

// For remotes (please adjust)
    name: "mfe1",
    filename: "remoteEntry.js",
    exposes: {
        './Module': './src/app/mfe1/mfe1.module.ts',
    },

Fügen Sie im shared Abschnitt alle Abhängigkeiten hinzu, die die mfe1 Anwendung mit der Shell-Anwendung gemeinsam hat:

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()
    })

Speichern und schließen Sie die Datei webpack.config.js.

Öffnen Sie die Datei app.component.html.

Ersetzen Sie den Inhalt durch Folgendes:

<router-outlet></router-outlet>

Speichern und schließen Sie die Datei app.component.html.

Geben Sie den folgenden Befehl ein, um die mfe1 Anwendung zu starten:

npm start

Greifen Sie in einem Webbrowser zuhttp://localhost:5000.

Stellen Sie sicher, dass das Micro-Frontend eigenständig ausgeführt werden kann. Die mfe1 Anwendung sollte ordnungsgemäß und ohne Fehler gerendert werden.

Geben Sie den folgenden Befehl ein, um die Shell-Anwendung zu starten:

npm start

Greifen Sie in einem Webbrowser zuhttp://localhost:4200/mfe1.

Stellen Sie sicher, dass das mfe1 Micro-Frontend in die Shell-Anwendung eingebettet ist. Die Portalanwendung sollte ordnungsgemäß und ohne Fehler gerendert werden, und die mfe1 Anwendung sollte in sie eingebettet sein.

Öffnen Sie die Datei error-page.component.html.

Ersetzen Sie den Inhalt durch Folgendes:

<p>Sorry, this page is not available.</p>

Speichern und schließen Sie die Datei error-page.component.html.

Öffnen Sie die Datei error-page-routing.module.ts.

Stellen Sie die Standardroute wie folgt ein:

{
    path: '',
    component: ErrorPageComponent
  },

Speichern und schließen Sie die Datei error-page-routing.module.ts.

Öffnen Sie die Datei app-routing.module.ts.

Erstellen Sie die folgende Funktion:

function loadMFE(url: string) {
    return loadRemoteModule({
        type: 'module',
        remoteEntry: `${url}/remoteEntry.js`,
        exposedModule: './Module'
    })
    .then(m => m.Mfe1Module)
    .catch(
        () => import('./error-page/error-page.module').then(m => m.ErrorPageModule)
    );
}

Ändern Sie die mfe1 Route wie folgt:

{
    path: 'mfe1',
    loadChildren: () => loadMFE(environment.mfe1URL)
},

Speichern und schließen Sie die Datei app-routing.module.ts.

Falls es noch nicht läuft, geben Sie den folgenden Befehl ein, um die Shell-Anwendung zu starten:

npm start

Greifen Sie in einem Webbrowser zuhttp://localhost:4200/mfe1.

Stellen Sie sicher, dass die Fehlerseite gerendert wurde. Sie sollten den folgenden Text sehen:

Sorry, this page is not available.

Navigieren Sie im Amplify CLI zum Stammordner der Micro-Frontend-Anwendung.

Geben Sie den folgenden Befehl ein, um Amplify zu initialisieren:

amplify init

Wenn Sie aufgefordert werden, einen Namen für Ihr Amplify-Projekt einzugeben, drücken Sie die Eingabetaste. Dadurch wird der Name aus der Datei package.json wiederverwendet.

Wenn Sie aufgefordert werden, das Projekt mit der obigen Konfiguration zu initialisieren, geben Sie ein. Yes

Wenn Sie aufgefordert werden, eine Authentifizierungsmethode auszuwählen, wählen SieAWS Profile.

Wählen Sie das Profil aus, das Sie verwenden möchten.

Warten Sie, bis Amplify das Projekt initialisiert hat. Wenn dieser Vorgang abgeschlossen ist, erhalten Sie eine Bestätigungsnachricht im Terminal.

Geben Sie den folgenden Befehl ein, um dem Micro-Frontend eine Amplify-Hosting-Kategorie hinzuzufügen:

amplify add hosting

Wenn Sie aufgefordert werden, das Plugin-Modul auszuwählen, wählen Sie. Hosting with Amplify Console

Wenn Sie aufgefordert werden, einen Typ auszuwählen, wählen SieManual deployment.

Installieren Sie die NPM-Abhängigkeiten des Projekts, indem Sie den folgenden Befehl eingeben:

npm install

Veröffentlichen Sie die Anwendung auf der Amplify-Konsole, indem Sie den folgenden Befehl eingeben:

amplify publish -y

Wenn die Veröffentlichung abgeschlossen ist, gibt Amplify das URL des Mikro-Frontends zurück.

Kopiere das. URL Sie benötigen diesen Wert, um die Shell-Anwendung zu aktualisieren.

Öffnen Sie in dem src/app/environmentsOrdner die Datei environments.prod.ts.

Ersetzen Sie den mfe1URL Wert durch den Wert des bereitgestellten URL Mikro-Frontends:

export const environment = {  
   production: true, 
   mfe1URL: 'https://<env>.<Amplify-app-ID>.amplifyapp.com'
 };

Speichern und schließen Sie die Datei environments.prod.ts.

Navigieren Sie in Amplify CLI zum Stammordner der Shell-Anwendung.

Geben Sie den folgenden Befehl ein, um Amplify zu initialisieren:

amplify init

Wenn Sie aufgefordert werden, einen Namen für Ihr Amplify-Projekt einzugeben, drücken Sie die Eingabetaste. Dadurch wird der Name aus der Datei package.json wiederverwendet.

Wenn Sie aufgefordert werden, das Projekt mit der obigen Konfiguration zu initialisieren, geben Sie ein. Yes

Wenn Sie aufgefordert werden, eine Authentifizierungsmethode auszuwählen, wählen SieAWS Profile.

Wählen Sie das Profil aus, das Sie verwenden möchten.

Warten Sie, bis Amplify das Projekt initialisiert hat. Wenn dieser Vorgang abgeschlossen ist, erhalten Sie eine Bestätigungsnachricht im Terminal.

Fügen Sie der Shell-Anwendung eine Amplify-Hosting-Kategorie hinzu:

amplify add hosting

Wenn Sie aufgefordert werden, das Plugin-Modul auszuwählen, wählen SieHosting with Amplify Console.

Wenn Sie aufgefordert werden, einen Typ auszuwählen, wählen SieManual deployment.

Installieren Sie die NPM-Abhängigkeiten des Projekts, indem Sie den folgenden Befehl eingeben:

npm install

Veröffentlichen Sie die Shell-Anwendung auf der Amplify-Konsole, indem Sie den folgenden Befehl eingeben:

amplify publish -y

Wenn die Veröffentlichung abgeschlossen ist, gibt Amplify die URL der bereitgestellten Shell-Anwendung zurück.

Notieren Sie sich das URL für die Shell-Anwendung.

Navigieren Sie im Amplify CLI zum Stammordner des Micro-Frontends.

Geben Sie den folgenden Befehl ein:

amplify configure hosting

Wenn Sie aufgefordert werden, benutzerdefinierte Einstellungen zu konfigurieren, geben Sie ein. Y

Melden Sie sich bei der AWS Management Console an und öffnen Sie dann die Amplify-Konsole.

Wählen Sie das Micro-Frontend.

Wählen Sie im Navigationsbereich Hosting und dann Benutzerdefinierte Kopfzeilen aus.

Wählen Sie Edit (Bearbeiten) aus.

Geben Sie im Fenster Benutzerdefinierte Header bearbeiten Folgendes ein:

customHeaders:
  - pattern: '*.js'
    headers:
      - key: Access-Control-Allow-Origin
        value: '*'
      - key: Access-Control-Allow-Methods
        value: 'GET, OPTIONS'
      - key: Access-Control-Allow-Headers
        value: '*'

Wählen Sie Save (Speichern) aus.

Stellen Sie das Mikro-Frontend erneut bereit, um die neuen benutzerdefinierten Header anzuwenden.

Navigieren Sie in Amplify CLI zum Stammordner der Shell-Anwendung.

Geben Sie den folgenden Befehl ein:

amplify configure hosting

Wenn Sie aufgefordert werden, benutzerdefinierte Einstellungen zu konfigurieren, geben Sie einY.

Öffnen Sie die Amplify-Konsole.

Wählen Sie die Shell-Anwendung.

Wählen Sie im Navigationsbereich Hosting und dann Rewrites and redirects aus.

Wählen Sie auf der Seite Umschreibungen und Weiterleitungen die Option Weiterleitungen verwalten aus.

Wählen Sie Texteditor öffnen.

Geben Sie im JSON Editor die folgende Weiterleitung ein:

[
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    }
]

Wählen Sie Save (Speichern) aus.

Geben Sie in einem Webbrowser die URL der bereitgestellten Shell-Anwendung ein.

Stellen Sie sicher, dass die Shell-Anwendung und das Micro-Frontend ordnungsgemäß geladen werden.

Melden Sie sich bei der AWS Management Console an und öffnen Sie dann die Amplify-Konsole.

Wählen Sie das Micro-Frontend.

Wählen Sie im Navigationsbereich App-Einstellungen und dann Allgemeine Einstellungen aus.

Wählen Sie App löschen.

Geben Sie im Bestätigungsfenster die Eingabe ein delete und wählen Sie dann App löschen.

Wiederholen Sie diese Schritte, um die Shell-Anwendung zu löschen.