0Pricing
Angular Academy · Lektion

Mit ng-packagr bauen

Ausgaben im Angular Package Format erzeugen

Mit ng-packagr bauen ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Libraries benötigen einen speziellen Build

Sie können nicht einfach TypeScript und Templates im Rohformat veröffentlichen, da Nutzer kompilierte, standardisierte Ausgaben erwarten. Angular-Libraries werden mit ng-packagr, dem von der CLI intern verwendeten Tool, in das Angular Package Format (APF) gebaut.

Das Angular Package Format

APF ist die offizielle Struktur für verteilbare Angular-Libraries: optimierte ES-Module, Typdefinitionen und Metadaten, die so angeordnet sind, dass jede Angular-App die Library zuverlässig verwenden und per Tree-Shaking optimieren kann.

Eine Library bauen

Führen Sie ng build mit der Library als Zielprojekt aus. Die CLI ruft ng-packagr auf und schreibt die paketierte Ausgabe nach dist/.

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

Was ng-packagr erzeugt

Der Ordner dist enthält kompilierte FESM-Bundles (Flattened ES Modules), .d.ts-Typdateien und eine generierte package.json mit korrekten Eintragsfeldern für module und types.

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

Die Konfiguration ng-package.json

Jede Library besitzt eine ng-package.json, die ng-packagr das Ausgabeziel und die Einstiegsdatei mitteilt. Die CLI liest sie während des Builds.

// 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" }
}

Production-Build

Bauen Sie mit der Production-Konfiguration, um die vollständige Optimierung zu aktivieren. Die Ausgabe wird veröffentlicht. Paketieren Sie daher immer die optimierte Version.

ng build ui-kit --configuration production

Partielle Kompilierung

Libraries werden im partiellen Ivy-Modus kompiliert, nicht vollständig. Dadurch bleiben sie über verschiedene Angular-Versionen hinweg kompatibel. Die verwendende App schließt die Kompilierung (das Linking) während ihres eigenen Builds ab.

Peer-Abhängigkeiten in der Ausgabe

ng-packagr behandelt Angular und andere Peer-Abhängigkeiten als externe Abhängigkeiten, statt sie zu bündeln. Die generierte package.json führt sie als peerDependencies auf, sodass die verwendende Anwendung eine gemeinsame Kopie bereitstellt.

Assets und Styles

Sie können Styles und statische Assets in das Paket aufnehmen. Deklarieren Sie sie in ng-package.json, damit ng-packagr sie in die dist-Ausgabe kopiert und für Nutzer verarbeitet.

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

Den Build überprüfen

Überprüfen Sie nach dem Build dist/ui-kit: Stellen Sie sicher, dass das FESM-Bundle, die .d.ts-Dateien und eine package.json vorhanden sind, deren Felder exports/module auf die gebauten Dateien verweisen. Genau diese Dateien erhält npm.

Watch-Modus für die Entwicklung

Bauen Sie beim Bearbeiten automatisch neu, indem Sie --watch hinzufügen. Zusammen mit einer Demo-App erhalten Sie dadurch während der Library-Entwicklung eine schnelle Feedbackschleife.

ng build ui-kit --watch

Kurze Überprüfung

In welches Format werden Angular-Libraries gebaut?

Zusammenfassung

Bauen Sie Libraries mit ng build <lib>. Dabei wird ng-packagr ausgeführt und das Angular Package Format (FESM-Bundles, .d.ts, generierte package.json) nach dist/ ausgegeben. Konfigurieren Sie die Ausgabe über ng-package.json, bauen Sie in der Production-Konfiguration, nutzen Sie die partielle Kompilierung für versionsübergreifende Kompatibilität und halten Sie Peer-Abhängigkeiten extern.

Häufig gestellte Fragen

Ist die Lektion „Mit ng-packagr bauen“ kostenlos?

Ja — der vollständige Text von „Mit ng-packagr bauen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Mit ng-packagr bauen“?

Ausgaben im Angular Package Format erzeugen Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Mit ng-packagr bauen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Eine Bibliothek mit ng generate erstellen
  2. Öffentliche API und Einstiegspunkte
  3. Mit ng-packagr bauen
  4. Auf npm veröffentlichen
← Zurück zu Angular Academy