Как интегрировать приложение Angular в Monorepo с Bazel? - PullRequest
6 голосов
/ 19 февраля 2020

Последние недели я потратил на создание моно-репо Typescript, который можно построить и развернуть в Kubernetes с помощью Bazel. Но последний кусочек головоломки - интеграция Angular приложения во весь рабочий процесс, с которым я действительно борюсь.

Проект

 ├── WORKSPACE
 ├── BUILD.bazel
 ├── package.json
 ├── packages
 │   ├── package1
 │   ├── package2
 │   └── package3
 └── services
     ├── service1
     ├── service2
     ├── service3
+    └── angular-app
  • WORKSPACE файл в root
  • BUILD.bazel файл в root
  • только один package.json в root
  • все пакеты / сервисы являются библиотеками Typescript
  • сервисы зависят от пакетов
  • каждый пакет / сервис имеет свой BUILD.bazel файл

Исходный код

Цель

В конце я хочу добавить k8s_object для приложения Angular в файл root 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 Зависимости Базеля к моим существующим WORKSPACE файлам
  2. Создать можно импортировать мои локальные пакеты в мой Angular исходный код через import { something } from '@project/package1';
  3. Все NPM зависимости должны быть добавлены к root package.json вместо одного в Angular проекте
  4. Интеграция NgRx (мое приложение Angular использует NgRx для управления состоянием)
  5. Интеграция Angular Универсальный (для рендеринга на стороне сервера)
  6. Интеграция Angular PWA (прогрессивное веб-приложение)
  7. Настройка локального сервера разработки

Что Я пытался

rules_ nodejs Angular Пример

Я был удивлен, обнаружив рабочий пример чего-то, что схоже с моим проектом кт: https://github.com/bazelbuild/rules_nodejs/tree/master/examples/angular. Но, как оказалось, структура их монорепо несколько иная. Они также используют scss, которым я не являюсь, и нет интеграций для NgRx или Angular Universal. Поэтому я попытался использовать его как шаблон, но просто не смог заставить его работать.

Bazel с Angular CLI

Конечно, я также попробовал документированный способ добавления Базель к Angular: https://angular.io/guide/bazel, который, кажется, работает для чистого проекта. С ng build --leaveBazelFilesOnDisk возможно получить доступ к файлам Bazel. Но я получил ошибки, сообщающие, что NgRx и мои локальные пакеты не могут быть найдены.


Обновление

Я прошел первые шаги по настройке всего на чистом angular проект: 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 Ответ

2 голосов
/ 21 февраля 2020

Флориан, большой прогресс на данный момент:)

Я предлагаю просто внимательно посмотреть на файлы, связанные с bazel в этом angular примере, и скопировать все необходимые правила / функции в ваш проект. Файлы: .bazelrc, WORKSPACE, BUILD.bazel (в каждой подпапке), rules_docker.patch (применяется к http_archive в WORKSPACE).

Также, несколько очень важных файлов в папке /src ( они используются в файле BUILD): rollup.config.js, rxjs_shims.js, main.dev.ts, main.prod.ts. И в папке example есть два index.html файла: один для prod и один для dev.

Кстати, этот пример уже содержит ngrx, так что он может подойти вам, просто посмотрите внимательно на ng_module правила в файлах BUILD и их deps. Просто добавьте туда свои deps (что-то вроде @npm//@ngrx/store, et c).

Что касается Angular Universal, похоже, Bazel не очень хорошо поддерживает его сейчас. Вот проблема для отслеживания: https://github.com/bazelbuild/rules_nodejs/issues/1126

А что касается s css, это круто, если вы используете простой css, тогда вы можете просто вставить его в assets поле ng_module и вам не нужно добавлять дополнительные шаги компиляции из rules_sass (sass_binary, sass_library). Просто игнорируйте их при копировании правил из примера.

В структуре проекта приведен мой пример перехода с Nx на Bazel: https://github.com/scalio/nx-bazel-starter. Это немного устарело, поэтому лучше ориентироваться на официальную. Но вы можете найти некоторые полезные функции там, например, как папки структурированы в Nx. На самом деле идея очень похожа на вашу: они просто называют сервисы приложениями, пакеты - библиотеками и совместно используют общие package.json.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...