web-dev-qa-db-ja.com

AngularアプリケーションをBazelでMonorepoに統合する方法は？

私は過去1週間かけてTypeScriptモノレポを構築しました。これはBazelを使用して構築し、Kubernetesにデプロイできます。しかし、パズルの最後のピースはAngular applicationをワークフロー全体に統合することです。と苦労しています。

プロジェクト

 ├── WORKSPACE
 ├── BUILD.bazel
 ├── package.json
 ├── packages
 │   ├── package1
 │   ├── package2
 │   └── package3
 └── services
     ├── service1
     ├── service2
     ├── service3
+    └── angular-app
  • ルートのWORKSPACEファイル
  • ルートのBUILD.bazelファイル
  • ルートにはpackage.jsonが1つだけ
  • すべてのパッケージ/サービスはTypeScriptライブラリです
  • サービスはパッケージに依存
  • すべてのパッケージ/サービスには独自のBUILD.bazelファイルがあります

ソースコード

ゴール

最後に、Angularアプリのk8s_objectを次のようにルートBUILD.bazelファイルに追加できるようにしたいと思います。

 load("@io_bazel_rules_k8s//k8s:objects.bzl", "k8s_objects")
 k8s_objects(
     name = "kubernetes_deployment",
     objects = [
         "//services/service1",
         "//services/service2",
         "//services/service3",
+        "//services/angular-app"
     ]
)

bazel run :kubernets_deployment.applyを実行すると、AngularアプリがKubernetesにデプロイされます。すでに完全に機能している他のサービスと同じです。デプロイプロセスには次のものが含まれます。

  • ソースコードバンドルの作成
  • dockerイメージの作成
  • dockerイメージをレジストリにプッシュする
  • kubernetesクラスターへの変更の適用

挑戦

  1. 追加Angular Bazel依存関係を既存の WORKSPACE ファイルに追加する
  2. 私のローカル packages をmy Angular import { something } from '@project/package1';
  3. すべてのNPM依存関係は、Angularプロジェクト内のものではなく、ルート package.json に追加する必要があります
  4. 統合 NgRx （my Angularアプリは状態管理にNgRxを使用します）
  5. 統合 Angular Universal （サーバー側レンダリング用）
  6. 統合Angular PWA（プログレッシブウェブアプリ）
  7. ローカル開発サーバーをセットアップする

私が試したこと

rules_nodejs Angular例

私のプロジェクトに似ている何かの実用的な例を見つけて驚いた： https://github.com/bazelbuild/rules_nodejs/tree/master/examples/angular 。しかし、判明したように、それらのモノレポの構造は多少異なります。彼らはscssも使用します。これは私ではなく、NgRxまたはAngular Universalの統合もありません。そのため、テンプレートを使用しようとしましたが、できませんでしたそれを動作させます。

Angular CLIを使用したBazel

もちろん、私はBazelをAngularに追加するための文書化された方法も試しました： https://angular.io/guide/bazel 、これはクリーンなプロジェクトで機能するようです。 ng build --leaveBazelFilesOnDiskを使用すると、Bazelファイルにアクセスすることができます。しかし、NgRxとローカルパッケージが見つからないというエラーメッセージが表示されました。

更新

私はすべてをクリーンに設定する最初のステップを実行しましたangular project： https://github.com/flolu/cents-ideas/tree/4d444240cbbe2f8b015c4b7c85746c473bc6842b/services/client しかし、私は解決できないエラーを受け取ります：

ERROR: /home/flolu/Desktop/cents-ideas/services/client/src/app/BUILD.bazel:5:1: Compiling Angular templates (Ivy - prodmode) //src/app:app failed (Exit 1)
external/npm/node_modules/@angular/router/router.d.ts:2421:22 - error NG6002: Appears in the NgModule.imports of AppRoutingModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/router) which declares RouterModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

2421 export declare class RouterModule {
                          ~~~~~~~~~~~~
external/npm/node_modules/@angular/router/router.d.ts:2421:22 - error NG6003: Appears in the NgModule.exports of AppRoutingModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

This likely means that the library (@angular/router) which declares RouterModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

2421 export declare class RouterModule {
                          ~~~~~~~~~~~~
external/npm/node_modules/@angular/platform-browser/platform-browser.d.ts:44:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/platform-browser) which declares BrowserModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

44 export declare class BrowserModule {
                        ~~~~~~~~~~~~~
src/app/app-routing.module.ts:11:14 - error NG6002: Appears in the NgModule.imports of AppModule, but itself has errors

11 export class AppRoutingModule { }
angularngrxbazelangular-universalmonorepo
6
Florian

フロリアン、これまでのところ大きな進歩:)

angularの例でバゼル関連のファイルを注意深く調べて、必要なすべてのルール/関数をプロジェクトにコピーすることをお勧めします。ファイルは.bazelrc、WORKSPACE、 BUILD.bazel（すべてのサブフォルダー）、rules_docker.patch（WORKSPACEのhttp_archiveに適用されます）。

また、/srcフォルダー内のいくつかの非常に重要なファイル（それらはBUILDファイルで使用されます）：rollup.config.js、rxjs_shims.js、main.dev.ts、main.prod.ts。また、exampleフォルダには2つのindex.htmlファイルがあります。1つは製品用で、もう1つは開発用です。

ところで、この例にはすでにngrxが含まれているので、ぴったりかもしれません。BUILDファイルのng_moduleルールとその依存関係をよく見てください。 depをそこに追加するだけです（@npm//@ngrx/storeなど）。

Angular Universalについては、現在Bazelでは十分にサポートされていないようです。追跡する問題は次のとおりです。 https://github.com/bazelbuild/rules_nodejs/issues/1126

そして、scssについては、単純なcssを使用する場合はクールです。それをng_moduleのassetsフィールドに挿入するだけで、rules_sass（s​​ass_binary、sass_libraryから追加のコンパイル手順を追加する必要はありません。 ）。例からルールをコピーするときは無視してください。

プロジェクト構造での、NxからBazelへの移行の例を次に示します： https://github.com/scalio/nx-bazel-starter 。少し時代遅れですので、公式のものを優先する方が良いでしょう。ただし、Nxでのフォルダの構造など、いくつかの便利な機能が見つかる場合があります。実際、アイデアはあなたのものと非常によく似ています。サービスをアプリとして呼び出し、パッケージをライブラリとして呼び出し、共通のpackage.jsonを共有するだけです。

2
Ray