Использование монорепозитория с инструментами вроде Nx или Lerna в Angular-проектах позволяет управлять большим количеством приложений и библиотек в одном репозитории, улучшая повторное использование кода, стандарты, масштабируемость и производительность CI/CD. Nx и Lerna преследуют схожие цели, но различаются в реализации и уровне поддержки Angular.

1. Что такое монорепозиторий

Монорепозиторий — это структура, где несколько приложений и библиотек живут в одном репозитории с общими зависимостями, конфигурациями и инструментами сборки.

2. Почему Nx лучше подходит для Angular

Nx — это инструмент от команды Nrwl, созданный бывшими разработчиками Angular, и тесно интегрирован с Angular CLI. Он предоставляет:

• Поддержку Angular "из коробки";

• Генераторы (схематики), поддерживающие Angular, NestJS, React и др.;

• Интеграцию с Jest, Cypress, ESLint, Prettier;

• Кеширование сборок и анализ зависимостей;

• Рефакторинг и линтинг на уровне графа зависимостей.

3. Установка Nx и создание Angular-монорепозитория

npx create-nx-workspace@latest

Вопросы CLI:

• Workspace name: my-workspace

• What to create: apps and libs

• Default app: my-app

• Framework: Angular

После генерации структура будет следующей:

my-workspace/
├── apps/
│ ├── my-app/
│ └── admin-app/
├── libs/
│ ├── ui/
│ ├── auth/
│ └── shared/
├── nx.json
├── angular.json
├── workspace.json (или project.json)
├── tsconfig.base.json
├── package.json

• apps/ — отдельные приложения (SPA, SSR, PWA);

• libs/ — переиспользуемые библиотеки (компоненты, сервисы, модели);

• nx.json, angular.json — глобальная конфигурация;

• workspace.json — настройка проектов и их таргетов.

4. Создание библиотек и приложений

nx g @nrwl/angular:app admin-panel
nx g @nrwl/angular:lib auth
nx g @nrwl/angular:lib ui --directory=components

Nx регистрирует каждый проект как отдельную сущность, с изолированным tsconfig, eslint, jest и другими настройками.

5. Импорт библиотек через алиасы

Каждая библиотека получает свой alias:

import { LoginComponent } from '@my-workspace/auth';
import { ButtonComponent } from '@my-workspace/ui/components';

Все алиасы настраиваются в tsconfig.base.json.

6. Ограничение зависимостей между модулями

Файл nx.json и tslint.json (или eslint) позволяет запрещать/разрешать импорт библиотек между доменами:

"dependencyConstraints": \[
{
"sourceTag": "scope:auth",
"onlyDependOnLibsWithTags": \["scope:shared", "scope:core"\]
}
\]

Это помогает изолировать домены и соблюдать архитектуру.

7. Инструменты и команды Nx

• nx build <project> — сборка проекта.

• nx serve <project> — запуск dev-сервера.

• nx test <project> — юнит-тесты (Jest).

• nx e2e <project> — e2e тесты (Cypress).

• nx lint <project> — линтинг.

Дополнительно:

• nx graph — визуализация графа зависимостей;

• nx affected:apps — показать приложения, затронутые изменениями;

• nx format:write — автоформатирование;

• nx run-many — запустить команды сразу на нескольких проектах.

8. Кеширование и ускорение CI

Nx использует Distributed Task Execution (DTE) и кеширует результаты сборки/тестов. Это сокращает время CI на десятки минут.

nx affected:build --base=main

Nx кеширует каждый шаг и повторно использует результаты при тех же входных данных.

9. Поддержка NestJS, React и других фреймворков

Nx может использоваться не только для Angular, но и для:

• Backend (NestJS, Express);

• Mobile (Ionic, React Native);

• Web (React, Next.js, Vue);

• PWA/SSR.

Это позволяет объединить фронтенд и бэкенд в одном репозитории с единым CI/CD и зависимостями.

10. Отличие Nx от Lerna

Lerna хорошо справляется с управлением npm-пакетами и публикацией в NPM, особенно в сочетании с Yarn Workspaces. Однако для Angular предпочтительнее использовать Nx из-за его полной поддержки CLI, Angular архитектуры и оптимизации сборки.

11. Публикация библиотек

Nx позволяет использовать библиотеки как локальные, так и публикуемые:

• Через ng-packagr можно подготовить Angular library (buildable).

• Можно использовать npm publish для публикации dist/libs/my-lib.

Для этого создаются библиотеки с опцией --buildable:

nx g @nrwl/angular:lib my-lib --buildable

12. Настройка CI/CD

В CI скриптах используются affected-команды:

nx affected:lint --base=origin/main
nx affected:test --base=origin/main
nx affected:build --base=origin/main

Только те приложения и библиотеки, которые были изменены, будут пересобраны и протестированы.

13. Интеграция с Storybook

Nx поддерживает генерацию и автоматическую настройку Storybook:

nx g @nrwl/angular:storybook-configuration ui

Можно запускать nx storybook ui и документировать компоненты в рамках библиотеки.

14. Конфигурация на проект

Каждое приложение и библиотека имеют свой project.json, что позволяет:

• изолировать настройки;

• настраивать разные таргеты (build, serve, test, lint);

• назначать executor (например, @nrwl/angular:webpack-browser или custom-scripts).

Использование Nx позволяет выстроить масштабируемую, модульную, типизированную и производительную архитектуру Angular-приложения, оптимизируя DevOps, производительность и стандарты разработки.