如何将Angular应用程序集成到带有Bazel的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
• 所有软件包/服务都是打字稿库
• 服务取决于软件包
• 每个包/服务都有自己的BUILD.bazel文件

Source code

目标

最后，我希望能够将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集群

挑战

将Angular Bazel依赖项添加到我现有的WORKSPACE文件中>
1. 可以通过WORKSPACE将本地packages导入到Angular源代码中>
2. 所有NPM依赖项都应添加到根目录import { something } from '@project/package1';，而不是Angular项目中的依赖项>]
3. 集成package.json（我的Angular应用使用NgRx进行状态管理）
4. 集成package.json（用于服务器端渲染）
5. 集成Angular PWA（渐进式Web应用）
6. 设置本地开发服务器

我尝试过的

rules_nodejs角度示例

我很惊讶地发现一个类似于我的项目的有效示例：NgRx。但事实证明，它们的monorepo的结构有些不同。他们还使用Angular Universal，我不是，并且没有NgRx或Angular Universal的集成。因此，我试着使用它作为模板，但我无法使其正常工作。

带有Angular CLI的面板

当然，我也尝试了将Bazel添加到Angular中的方法：https://github.com/bazelbuild/rules_nodejs/tree/master/examples/angular，这似乎适用于干净的项目。使用scss，可以访问Bazel文件。但是我收到错误消息，告诉我找不到NgRx和本地软件包。

---

更新

我已经完成了在干净的角度项目中进行所有设置的第一步：https://angular.io/guide/bazel但出现错误，我无法解决：

ng build --leaveBazelFilesOnDisk

我花了最后几周的时间来构建Typescript monorepo，可以使用Bazel构建它并将其部署到Kubernetes。但是最后一个难题是将Angular应用程序集成到...

弗洛里安，到目前为止取得了很大进展：）

我建议在该角度示例中仔细研究与bazel相关的文件，并将所有需要的规则/函数复制到您的项目中。文件是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 { }

，.bazelrc（在每个子文件夹中），WORKSPACE（在WORKSPACE中的http_archive上应用）。

[另外，BUILD.bazel文件夹中有几个非常重要的文件（它们在BUILD文件中使用）：rules_docker.patch，/src，rollup.config.js，rxjs_shims.js。 main.dev.ts文件夹中有两个main.prod.ts文件：一个用于prod，一个用于dev。

顺便说一句，此示例已经包含ngrx，因此它可能非常适合您，只需仔细查看BUILD文件及其dep中的index.html规则即可。只需在此处添加您的部门（例如example等）。

关于Angular Universal，Bazel现在似乎不太支持它。这是要跟踪的问题：ng_module

对于scss，如果您使用简单的CSS，那很酷，那么您可以将其插入@npm//@ngrx/store的https://github.com/bazelbuild/rules_nodejs/issues/1126字段中，而无需从rules_sass（s​​ass_binary，sass_library）添加其他编译步骤。从示例复制规则时，只需忽略它们。

关于项目结构，这是我从Nx迁移到Bazel的示例：assets。这有点过时了，所以最好选择官方的。但是您可能会在其中找到一些有用的功能，即Nx中文件夹的结构。实际上，这个想法与您的想法非常相似：他们只是将服务称为应用程序，将软件包称为库，并共享通用的ng_module。

Answer 1

弗洛里安，到目前为止取得了很大进展：）