是否热衷于将带角度的应用程序集成到带有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. 设置本地开发服务器

我尝试过的

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和本地软件包。

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

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

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

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