Skip to content

Instantly share code, notes, and snippets.

@ram0973
Last active June 10, 2025 07:54
Show Gist options
  • Select an option

  • Save ram0973/e9b6dad2bcae954e9fcbf050c72dd603 to your computer and use it in GitHub Desktop.

Select an option

Save ram0973/e9b6dad2bcae954e9fcbf050c72dd603 to your computer and use it in GitHub Desktop.
Пустое монорепо NX + Angular

Да, в монорепозитории Nx можно добавить Angular-проект даже после создания пустой монорепы. Вот как это сделать правильно:

  1. Добавление Angular в существующую Nx-монорепу
# Установите Angular плагин для Nx (если ещё не установлен)
npm install -D @nx/angular

Создайте новый Angular-проект

nx g @nx/angular:app my-angular-app Или с явным указанием CLI:

nx g @nx/angular:application my-angular-app
  1. Если монорепа изначально пустая Убедитесь, что у вас есть базовый nx.json. Если нет — инициализируйте Nx:
npx nx@latest init
  1. Ключевые файлы после добавления Angular Структура монорепозитория будет выглядеть так:
my-monorepo/
├── apps/
│   └── my-angular-app/  # Новый Angular-проект
│       ├── src/
│       ├── project.json
│       └── tsconfig.json
├── libs/                # Общие библиотеки (опционально)
├── nx.json              # Конфигурация Nx
├── package.json
└── tsconfig.base.json   # Базовые настройки TypeScript
  1. Настройка зависимостей Nx автоматически:

Добавит @angular/core в package.json

Создаст необходимые конфигурационные файлы

Интегрирует Angular с кешем Nx

  1. Запуск Angular-приложения
nx serve my-angular-app
Или для production-сборки:
nx build my-angular-app
  1. Дополнительные возможности Добавление общих библиотек:
nx g @nx/angular:lib shared-ui

Генерация компонентов:

nx g @nx/angular:component ui/button --project=shared-ui
  1. Важные нюансы Версионность: Убедитесь, что версии @nx/angular и @angular/* совместимы:
npx nx report

Модульность: Nx автоматически настраивает:

Module Federation (если нужно)

SSR (Angular Universal)

Тестирование (Jest/Cypress)

Миграция существующего Angular-проекта: Если нужно перенести готовый проект:

bash
nx g @nx/angular:convert-standalone-to-integrated my-existing-angular-project

Пример nx.json после добавления Angular:

{
  "tasksRunnerOptions": {
    "default": {
      "runner": "@nx/cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"]
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "^production"]
    }
  },
  "affected": {
    "defaultBase": "main"
  }
}

Итог: Да, Nx позволяет гибко добавлять Angular-проекты в существующую монорепу. Это одна из ключевых возможностей системы. После добавления вы получаете:

Интеграцию с общим кешем сборок

Совместное использование библиотек

Единую систему управления зависимостями

Для сложных сценариев можно даже добавить несколько Angular-приложений с разными версиями Angular (через package.json в папке проекта).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment