web-dev-qa-db-ja.com

angular 6-プロジェクト間で共通のコードを共有するベストプラクティス

プロジェクト間でコードを共有するには？

私は2つのアプリを使用して作成しています：

ng generate application app1

ng generate application app2

が欲しいです projects/app1/src/app.module.tsからモジュールをインポートするにはprojects/app2/src/shared/common.module.ts

Commonまたはsomethingという3番目のプロジェクトを作成せずにこれを行うためのベストプラクティスは何ですか？ projects/commonを作成するか、ここにcommonというフォルダーとプレートTypeScriptファイルを用意してインポートします。

angular6angular-cli-v6
8
bhantol

ライブラリプロジェクトを使用してください！

ng generate library common

これにより、メインにパスエイリアスが自動的に追加されますtsconfig.json

  "common": [
    "dist/prod/common"
  ],
  "common/*": [
    "dist/prod/common/*"
  ]

これにより、commonライブラリプロジェクトで定義されたモジュールおよびエクスポートされたコンポーネント、サービス、パイプを参照できます。

たとえば、app.module.tsのいずれか：

import { SharedModule } from 'common';

@NgModule({
  imports: [
    SharedModule,
    ...
  ],
  declarations: [...],
  exports: [...]
  bootstrap: [AppComponent]
})
export class AppModule { }

消費するアプリのng serve中のホットリロードをサポートする別の方法（開発用など）は、次のようにプロジェクトレベルの共通public_apiからインポートすることです。

import { SharedModule } from 'projects/common/src/public_api';

@NgModule({
  imports: [
    SharedModule,
    ...
  ],
  ...
})
export class AppModule { }

それを試してみてください、私はそれを多用しました、そしてそれは驚異的に働きます！このドキュメントを読むことを強くお勧めします。

14
Fernando Espinosa

Appsの大多数が共通のコードを共有している場合は、動的ルーティングと遅延読み込みモジュールを使用した別のアプローチを提案します。同じコードベース内で、すべてのアプリ固有のコードを新しいモジュールに追加できます。次に、環境ファイルにフラグを追加して、新しい環境ファイルを作成します。これにより、収容設定--cを使用して、アプリを別のバンドルに組み込むことができます。詳細については、こちらをご覧ください 記事

1
peanut