13

Angular 11 と Webpack 5 を使用して新しいプロジェクトに取り組んでいます。Angular CLI を使用する Manfred Steyer のモジュール フェデレーション プラグイン サンプルリポジトリに基づいて作業しています。2 つのアプリ間で共有ローカル Angular ライブラリからシングルトン サービスを共有する方法がわかりません。

私のセットアップを説明するために最善を尽くします..これがどれくらい長くなるかについて本当に申し訳ありません.

簡素化されたファイル構造

root
  package.json
  projects/
    shell/
      src/app/
        app.module.ts
        app.component.ts
      webpack.config.ts <-- partial config
    mfe1/
      src/app/
        app.module.ts
        app.component.ts
      webpack.config.ts <-- partial config
    shared/
      src/lib/
        global.service.ts
      package.json <-- package.json for lib

角度

両方の app.component.ts ファイルは同一です

import {GlobalService} from 'shared';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(shared: SharedService) {}
}

global.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GlobalService {

  constructor() {
    console.log('constructed SharedService');
  }
}

ウェブパック

shell/webpack.config.ts

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  output: {
    publicPath: "http://localhost:5000/",
    uniqueName: "shell"
  },
  optimization: {
    // Only needed to bypass a temporary bug
    runtimeChunk: false
  },
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        'mfe1': "mfe1@http://localhost:3000/remoteEntry.js"
      },
      shared: ["@angular/core", "@angular/common", "@angular/router"]
    })
  ],
};

mfe1/webpack.config.ts

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  output: {
    publicPath: "http://localhost:3000/",
    uniqueName: "mfe1"
  },
  optimization: {
    // Only needed to bypass a temporary bug
    runtimeChunk: false
  },
  plugins: [
    new ModuleFederationPlugin({

      // For remotes (please adjust)
      name: "mfe1",
      library: {type: "var", name: "mfe1"},
      filename: "remoteEntry.js",
      exposes: {
        './Module': './projects/mfe1/src/app/app.module.ts',
      },
      shared: ["@angular/core", "@angular/common", "@angular/router"]
    })
  ],
};

共有ライブラリ package.json

{
  "name": "shared",
  "version": "0.0.1",
  "main": "src/public-api.ts",
  "peerDependencies": {
    "@angular/common": "^11.0.0-next.5",
    "@angular/core": "^11.0.0-next.5"
  },
  "dependencies": {
    "tslib": "^2.0.0"
  }
}

この構成はコンパイルおよび実行されますがmfe1、新しいGlobalService. アプリの読み込み時に「構築された SharedService」が記録され、リモート モジュールが読み込まれるとすぐに記録されます。ScriptedAlchemy による別の例に従おうとしましたが、それを機能させる方法がわかりません。コンパイルして実行し、2 つのインスタンスを作成するか、構成をどのように台無しにするかに応じて、不足しているモジュールを引用してコンパイルに失敗します。

sharedScriptedAlchemy の例では、ファイル内のライブラリ配列で共有ライブラリを参照する必要があるように見えwebpack.config.tsます。これは完全に理にかなっていますが、機能させることができません

shell/webpack.config.ts and mfe1/webpack.config.ts
  ...
  shared: ["@angular/core", "@angular/common", "@angular/router", "shared"]

この方法でローカル ライブラリを参照すると、必然的にビルド中にエラーが発生します。

Error: Module not found: Error: Can't resolve 'shared' in '/Path/to/module-federation-plugin-example/projects/shell/src/app'

私が投稿した例は単純化されています。あまりそうでないことを願っていますが、ここに問題を示すレポへのリンクがあります

4

1 に答える 1