Angular Academy · Leçon

Construire avec ng-packagr

Produisez la sortie au format de paquet Angular

Construire avec ng-packagr est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Les bibliothèques nécessitent une compilation spéciale

Vous ne pouvez pas publier du TypeScript et des modèles bruts : les utilisateurs attendent une sortie compilée et standardisée. Les bibliothèques Angular sont compilées au format Angular Package Format (APF) avec ng-packagr, l’outil utilisé en interne par la CLI.

Le format Angular Package Format

APF est la structure officielle des bibliothèques Angular distribuables : des modules ES optimisés, des définitions de types et des métadonnées organisées de sorte que toute application Angular puisse utiliser la bibliothèque et en supprimer efficacement le code inutilisé.

Compiler une bibliothèque

Exécutez ng build en ciblant le projet de bibliothèque. La CLI appelle ng-packagr et écrit la sortie empaquetée dans dist/.

ng build ui-kit
# outputs dist/ui-kit in Angular Package Format

Ce que produit ng-packagr

Le dossier dist contient des paquets FESM (modules ES aplatis) compilés, des fichiers de types .d.ts et un package.json généré avec les champs d’entrée module et types corrects.

dist/ui-kit/
  fesm2022/ui-kit.mjs   # flattened ES module
  index.d.ts            # type declarations
  package.json          # generated, points to the above

La configuration ng-package.json

Chaque bibliothèque possède un fichier ng-package.json qui indique à ng-packagr la destination de sortie et le fichier d’entrée. La CLI le lit pendant la compilation.

// projects/ui-kit/ng-package.json
{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ui-kit",
  "lib": { "entryFile": "src/public-api.ts" }
}

Compilation de production

Compilez avec la configuration de production pour activer l’optimisation complète. La sortie est celle que vous publiez : empaquetez donc toujours la version optimisée.

ng build ui-kit --configuration production

Compilation partielle

Les bibliothèques sont compilées en mode Ivy partiel, et non entièrement. Elles restent ainsi compatibles avec différentes versions d’Angular : l’application utilisatrice termine la compilation (la liaison) pendant sa propre compilation.

Dépendances entre pairs dans la sortie

ng-packagr conserve Angular et les autres dépendances entre pairs à l’extérieur au lieu de les intégrer au paquet. Le package.json généré les répertorie comme peerDependencies, afin que l’utilisateur fournisse une copie partagée unique.

Ressources et styles

Vous pouvez inclure des styles et des ressources statiques dans le paquet. Déclarez-les dans ng-package.json afin que ng-packagr les copie et les traite dans la sortie dist destinée aux utilisateurs.

"assets": ["./styles/theme.css"]

Vérifier la compilation

Après la compilation, inspectez dist/ui-kit : vérifiez le paquet FESM, les fichiers .d.ts et un package.json dont les champs exports/module pointent vers les fichiers compilés. C’est exactement ce que npm recevra.

Mode surveillance pour le développement

Recompilez automatiquement pendant vos modifications en ajoutant --watch. Associé à une application de démonstration, ce mode fournit une boucle de retour rapide pendant le développement de la bibliothèque.

ng build ui-kit --watch

Vérification rapide

Dans quel format les bibliothèques Angular sont-elles compilées ?

Récapitulatif

Compilez les bibliothèques avec ng build <lib>, qui exécute ng-packagr pour produire l’Angular Package Format (paquets FESM, .d.ts, package.json généré) dans dist/. Configurez la sortie via ng-package.json, compilez en production, utilisez la compilation partielle pour assurer la compatibilité entre les versions et laissez les dépendances entre pairs à l’extérieur.

Questions Fréquemment Posées

La leçon « Construire avec ng-packagr » est-elle gratuite ?

Oui — le texte complet de « Construire avec ng-packagr » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Construire avec ng-packagr » ?

Produisez la sortie au format de paquet Angular Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Construire avec ng-packagr » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy