如何使用 Bazel 將 Angular 應用程序集成到 Monorepo 中？

Question

過去幾周我一直在構建一個 Typescript monorepo，它可以使用 Bazel 構建並部署到 Kubernetes。 但最后一塊拼圖是將 Angular 應用程序集成到整個工作流程中，我真的很糾結。

該項目

 ├── WORKSPACE
 ├── BUILD.bazel
 ├── package.json
 ├── packages
 │   ├── package1
 │   ├── package2
 │   └── package3
 └── services
     ├── service1
     ├── service2
     ├── service3
+    └── angular-app

• 根目錄下的WORKSPACE文件
• 根目錄下的BUILD.bazel文件
• 根目錄中只有一個package.json
• 所有包/服務都是 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 應用程序部署到bazel run :kubernets_deployment.apply 。 就像其他已經完美運行的服務一樣。 部署過程包括：

• 創建源代碼包
• 創建 Docker 鏡像
• 將 Docker 鏡像推送到注冊表
• 將更改應用到 Kubernetes 集群

挑戰

1. 將 Angular Bazel 依賴項添加到我現有的WORKSPACE文件中
2. 通過import { something } from '@project/package1';可以將我的本地包導入到我的 Angular 源代碼中import { something } from '@project/package1';
3. 所有 NPM 依賴項都應該添加到根package.json而不是 Angular 項目中的那個
4. 集成NgRx （我的 Angular 應用使用 NgRx 進行狀態管理）
5. 集成Angular Universal （用於服務器端渲染）
6. 集成 Angular PWA（漸進式 Web 應用程序）
7. 設置本地開發服務器

我試過的

rules_nodejs 角度示例

我很驚訝地發現了一個類似於我的項目的工作示例： https : //github.com/bazelbuild/rules_nodejs/tree/master/examples/angular 。 但事實證明，他們的 monorepo 的結構有些不同。 他們還使用scss ，我不是，也沒有 NgRx 或 Angular Universal 的集成。 所以我試圖將它用作模板，但我無法使其工作。

帶有 Angular CLI 的 Bazel

當然，我也嘗試過將 Bazel 添加到 Angular 的記錄方式： https : //angular.io/guide/bazel ，這似乎適用於一個干凈的項目。 使用ng build --leaveBazelFilesOnDisk可以訪問 Bazel 文件。 但是我收到錯誤消息，告訴我找不到 NgRx 和我的本地包。

---

更新

我已經完成了在一個干凈的角度項目上設置所有內容的第一步： 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 { }

Answer 1

弗洛里安，到目前為止取得了很大進展:)

我建議在該角度示例中仔細查看與 bazel 相關的文件，並將所有需要的規則/函數復制到您的項目中。 這些文件是.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文件夾中有兩個index.html文件：一個用於 prod，一個用於 dev。

順便說一句，這個例子已經包含了 ngrx，所以它可能很適合你，只要仔細看看 BUILD 文件中的ng_module規則和它們的 deps。 只需在那里添加您的 deps（例如@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 。