4

3 つの @angular プロジェクトがすべて v6.1.9 を使用している場合: host、alpha、およびbeta

alphabeta@angular/elements などを使用して、それぞれ Web コンポーネントを作成および定義します。

constructor(private injector: Injector) {}

ngDoBootstrap() {
  const config: NgElementConfig = { injector: this.injector };
  const component= createCustomElement(component, config);
  customElements.define("alpha-component", component); // beta-component respectively
}

alphaおよびbetaを使用してビルドされng build --prod --output-hashing none、ビルド後のスクリプトが実行されて、結果のファイルが次の順序で連結されますscripts.js, styles.js, runtime.js, main.js。

polyfills.js はmain.ts、ライブラリのロード時に使用されるポリフィルが既に定義されているかどうかをチェックするため、スキップされます (たとえば、zones.js を再定義しようとするのを避けるため)。

結果のバンドルはalpha-component.bundle.jsとbeta-component.bundle.jsです。

hostタグ付きの<head>で上記のバンドルを参照します。index.html<script defer>

バンドルがalphathenの順序で参照されている場合、 2 回ブートストラップしようとしているbetaことがわかります。逆の順序で、ブートストラップを 2 回試みているalphaことがわかります。beta

最初に参照されたバンドルは 2 回ブートストラップを試行するため、バンドルの Web コンポーネントを 2 回定義しようとするため、エラーが発生し、2 番目に参照されたバンドルの Web コンポーネントは登録されません。

目標は、@angular を使用して多くの Web コンポーネントを作成し、それらを他の @angular またはinsert framework hereテクノロジー内で使用できるようにすることです。

4

3 に答える 3

1

角度カスタム ビルダーを使用して、角度ビルダーのカスタム webpack 構成を使用して、ビルドされた角度バンドルを一意の名前空間でエクスポートしました。

  1. @angular-builders/custom-webpackパッケージをインストールします

  2. カスタム webpack 構成ファイルを作成します。例えば。extra-webpack.config.js。

    module.exports = {
output: {
    chunkLoadingGlobal: 'webpackChunkModuleName',
    library: 'ModuleName'
}

アプリケーション名またはチャンクロードグローバル & ライブラリの一意の名前を指定します。

注: これらのプロパティは、angular 12+ で使用される webpack 5 によるものです。古いバージョンの webpack については、webpack のドキュメントを参照してください。

  1. @angular-devkit/build-angular の代わりに@angular-builders /custom-webpackをビルダーとして使用し、 angular.jsonにcustomWebpackConfigオブジェクトを追加します。
"builder": "@angular-builders/custom-webpack:browser",
    .....
    "customWebpackConfig": {
       "path": "extra-webpack.config.js",
        "mergeStrategies": {
           "externals": "prepend"
         }
     }
  1. ng build を実行すると、アプリケーションはカスタム webpack 構成のカスタム ビルダーを使用してビルドされます。Web コンポーネントおよび複数の Web コンポーネントとしてエクスポートされた他のアプリケーションの同様の構成は、エラーや名前空間の衝突/汚染なしで、同じコンテナー アプリケーションで使用できます。
于 2021-06-01T12:46:41.360 に答える
0

私はManfred Steyerのアドバイスを使用していますが、うまくいくので、ここでより詳細な実例を示して彼の答えを作成します (私のケースに基づいて - Angular 8、私は MacOs で行います):

alphaWebコンポーネント（別の角度プロジェクト<alpha>）で、次のコマンドを実行します

npm install ngx-build-plus -S
ng update ngx-build-plus --force
ng add ngx-build-plus
ng g ngx-build-plus:wc-polyfill
ng g ngx-build-plus:externals

webpack.externals.js（これにより、メインプロジェクトディレクトリにファイルが作成されます）、package.jsonキーでキーscriptsを追加/編集します：

"build:alpha:externals": "ng build --output-hashing none --extra-webpack-config webpack.externals.js --prod --single-bundle true --project alpha && cat dist/alpha/polyfill-webcomp-es5.js dist/alpha/polyfills-es5.js dist/alpha/scripts.js dist/alpha/main-es5.js > dist/alpha.js"

そして今、私は次の方法でWebコンポーネントを構築します:

npm run build:alpha:externals

これにより、ファイルが作成されます- （ベータプロジェクトで）dist/alpha.jsビルドするのと同じ方法で-両方をbyに追加できますbeta.jshostindex.html

<head>
...
  <script src="./assets/web-components/alpha.js" type="text/javascript"></script>
  <script src="./assets/web-components/beta.js" type="text/javascript"></script>
...
</head>

両方が同時に機能する必要があります

于 2020-12-08T20:38:48.287 に答える