NX Monorepo

NX est un système de build open-source qui orchestre les monorepos. Il ajoute du cache, des graphes de dépendances, des générateurs de code et des commandes affected par-dessus un workspace Angular (ou multi-framework).

Structure d’un monorepo

my-workspace/
├── apps/
│   ├── shop/           ← Application Angular
│   └── admin/          ← Autre application Angular
├── libs/
│   ├── ui/             ← Bibliothèque de composants partagés
│   ├── data-access/    ← Services et modèles partagés
│   └── utils/          ← Fonctions utilitaires pures
├── nx.json             ← Config globale NX
├── tsconfig.base.json  ← Aliases de chemins partagés
└── package.json

Créer un workspace

npx create-nx-workspace@latest my-workspace
# → Choisir : Angular / Integrated Monorepo

Commandes essentielles

# Démarrer une app
nx serve shop

# Builder une app
nx build shop --configuration=production

# Lancer les tests
nx test shop
nx test ui

# Générer une nouvelle app
nx g @nx/angular:app admin

# Générer une bibliothèque partagée
nx g @nx/angular:lib ui --directory=libs/ui

# Générer un composant dans une lib
nx g @nx/angular:component button --project=ui --export

Bibliothèques partagées et aliases de chemins

Quand vous générez une lib, NX enregistre automatiquement un alias de chemin dans tsconfig.base.json :

{
  "compilerOptions": {
    "paths": {
      "@my-workspace/ui": ["libs/ui/src/index.ts"],
      "@my-workspace/data-access": ["libs/data-access/src/index.ts"]
    }
  }
}

Consommez-la depuis n’importe quelle app :

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

Aucun npm publish nécessaire — les bibliothèques sont résolues localement.

Graphe de dépendances

nx graph

Ouvre une vue navigateur interactive montrant quelles apps dépendent de quelles libs. Les dépendances circulaires sont signalées automatiquement.

Règle : les apps dépendent des libs, jamais l’inverse. Les libs peuvent dépendre d’autres libs.

Commandes affected (optimisation CI)

NX analyse le graphe de dépendances pour savoir ce qu’un changement impacte :

# Ne builder que ce qui a changé + ses dépendants
nx affected --target=build

# Ne tester que ce qui a changé + ses dépendants
nx affected --target=test

# Exécuter en parallèle
nx affected --target=build --parallel=3

En CI, cela évite de reconstruire et retester tout le monorepo à chaque commit.

Conventions de nommage des bibliothèques

Type	Contenu	Exemple de nom
feature	Composants smart, pages, routing	feature-checkout
ui	Composants présentationnels	ui-button, ui-form
data-access	Services, store, appels HTTP	data-access-products
util	Fonctions pures, helpers	util-formatting

NX vs Workspace Angular natif

Fonctionnalité	Workspace Angular	NX
Multi-apps	Basique	Avancé
Cache de build	Aucun	Local + Cloud
Graphe de dépendances	Aucun	Visuel
Générateurs de code	Limité	Écosystème de plugins
Builds affectés	Aucun	nx affected