如何将角应用程序与Bazel集成到Monorepo中？
在过去的几周里，我创建了一个类型记录单用表，它可以使用Bazel构建并部署到Kubernetes。但是这个难题的最后一个部分是将一个有角度的应用程序集成到整个工作流中，这一点我真的很纠结。
项目
├── WORKSPACE
├── BUILD.bazel
├── package.json
├── packages
│ ├── package1
│ ├── package2
│ └── package3
└── services
├── service1
├── service2
├── service3
+ └── angular-app- 根目录中的
WORKSPACE文件 - 根目录中的
BUILD.bazel文件 - 根中只有一个
package.json - 所有包/服务都是类型记录库。
- 服务依赖于包
- 每个包/服务都有自己的
BUILD.bazel文件。
目标
最后，我希望能够向根BUILD.bazel文件中添加一个用于角应用程序的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时，它应该将这个角应用程序部署到Kubernetes。就像其他已经完美运作的服务一样。部署过程包括：
- 创建源代码包
- 创建码头形象
- 将Docker图像推送为注册表
- 对Kubernetes簇的应用更改
挑战
- 向我现有的
WORKSPACE文件中添加角Bazel依赖项 - 通过套餐将本地
import { something } from '@project/package1';导入到角度源代码中成为可能 - 所有NPM依赖项都应该添加到根
package.json中，而不是在角项目中。 - 集成NgRx (我的角度应用程序使用NgRx进行状态管理)
- 集成角万向 (用于服务器端呈现)
- 集成角PWA (渐进web应用程序)
- 设置本地开发服务器
我试过的
rules_nodejs角算例
我惊讶地发现一个类似于我的项目的工作示例：节点/树/主/例/角。但事实证明，它们的单峰结构有点不同。他们也使用scss，我不是，也没有NgRx或角宇宙的集成。所以我试着用它作为模板，我就是不能让它工作。
有角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 { }回答 1
Stack Overflow用户
发布于 2020-02-21 13:57:53
到目前为止，取得了很大进展:)
我建议在这个角度的例子中仔细查看与bazel相关的文件，并将所有所需的规则/函数复制到您的项目中。这些文件是.bazelrc、WORKSPACE、BUILD.bazel (在每个子文件夹中)、rules_docker.patch (它应用于工作区中的http_archive )。
另外，/src文件夹中的几个非常重要的文件(它们在构建文件中使用)：rollup.config.js、rxjs_shims.js、main.dev.ts、main.prod.ts。在index.html文件夹中有两个example文件:一个用于prod，另一个用于dev。
顺便说一句，这个例子已经包含了ngrx，所以它可能是一个非常适合您的例子，只需仔细查看构建文件中的ng_module规则和它们的deps即可。只需在那里添加您的deps (类似于@npm//@ngrx/store等)。
至于角环球，看来它现在不是很好的支持巴泽尔。下面是要跟踪的问题：nodejs/issues/1126
至于scss，如果使用简单的css，就可以将它插入ng_module的assets字段，而不需要从rules_sass (sass_binary，sass_library)中添加额外的编译步骤。在从示例中复制规则时，只需忽略它们。
在项目结构上，下面是我从Nx迁移到Bazel：https://github.com/scalio/nx-bazel-starter的例子。这是有点过时，所以更好地定位在官方的一个。但是您可能会发现一些有用的特性，即文件夹是如何在Nx中构造的。实际上，这个想法与你的想法非常相似:他们只是把服务称为应用程序，包称为libs，并共享共同的package.json。
https://stackoverflow.com/questions/60308415
复制相似问题
腾讯云开发者
