如何使用 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文件

源代码

目标

最后，我希望能够k8s_object为 Angular 应用程序添加一个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"
     ]
)

它应该在我运行时将 Angular 应用程序部署到 Kubernetes bazel run :kubernets_deployment.apply。就像其他已经完美运行的服务一样。部署过程包括：

• 创建源代码包
• 创建 Docker 镜像
• 将 Docker 镜像推送到注册表
• 将更改应用到 Kubernetes 集群

挑战

1. 将 Angular Bazel 依赖项添加到我现有的WORKSPACE文件中
2. 可以通过以下方式将我的本地包导入到我的 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. 该文件夹中有两个index.html文件example：一个用于 prod，一个用于 dev。

顺便说一句，这个示例已经包含 ngrx，所以它可能很适合您，只需仔细查看ng_moduleBUILD 文件中的规则及其依赖项即可。只需在其中添加您的部门即可（例如@npm//@ngrx/store，等等）。

至于Angular Universal，看起来Bazel现在还没有很好地支持它。这是要跟踪的问题：https ://github.com/bazelbuild/rules_nodejs/issues/1126

至于scss，如果您使用简单的css，那很酷，然后您可以将其插入到assets字段中ng_module，并且不需要从rules_sass（s​​ass_binary，sass_library）添加额外的编译步骤。从示例中复制规则时只需忽略它们即可。

在项目结构上，这是我从 Nx 迁移到 Bazel 的示例： https: //github.com/scalio/nx-bazel-starter。它有点过时了，所以最好以官方为准。但您可能会在那里发现一些有用的功能，即 Nx 中文件夹的结构。实际上这个想法与你的非常相似：他们只是将服务作为应用程序调用，将包作为库调用并共享 common package.json。