Build med ng-packagr
Producer output i Angular Package Format.
Build med ng-packagr er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.
Biblioteker kræver en særlig bygning
Du kan ikke publicere rå TypeScript-filer og skabeloner; forbrugerne forventer kompileret output i et standardiseret format. Angular-biblioteker bygges til Angular Package Format (APF) med ng-packagr, det værktøj CLI'en bruger internt.
Angular Package Format
APF er den officielle struktur for Angular-biblioteker, der kan distribueres: optimerede ES-moduler, typedefinitioner og metadata, der er organiseret, så enhver Angular-app pålideligt kan bruge biblioteket og udføre tree-shaking.
Bygning af et bibliotek
Kør ng build med biblioteksprojektet som mål. CLI'en kalder ng-packagr og skriver det pakkede output til dist/.
ng build ui-kit
# outputs dist/ui-kit in Angular Package FormatHvad ng-packagr producerer
Mappen dist indeholder kompilerede FESM-bundter (flade ES-moduler), .d.ts-typefiler og en genereret package.json med korrekte entry-felter for module og types.
dist/ui-kit/
fesm2022/ui-kit.mjs # flattened ES module
index.d.ts # type declarations
package.json # generated, points to the aboveKonfigurationen i ng-package.json
Hvert bibliotek har en ng-package.json, som fortæller ng-packagr, hvor outputtet skal placeres, og hvilken entry-fil der skal bruges. CLI'en læser den under bygningen.
// 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" }
}Produktionsbygning
Byg med produktionskonfigurationen for at aktivere fuld optimering. Outputtet er det, du publicerer, så pak altid den optimerede version.
ng build ui-kit --configuration productionDelvis kompilering
Biblioteker kompileres i delvis Ivy-tilstand, ikke fuldt ud. Det gør dem kompatible på tværs af Angular-versioner; den app, der bruger biblioteket, afslutter kompileringen (sammenkædningen) under sin egen bygning.
Peer-afhængigheder i outputtet
ng-packagr holder Angular og andre peer-afhængigheder eksterne i stedet for at samle dem i pakken. Den genererede package.json angiver dem som peerDependencies, så forbrugeren leverer én fælles kopi.
Ressourcer og typografier
Du kan inkludere typografier og statiske ressourcer i pakken. Angiv dem i ng-package.json, så ng-packagr kopierer og behandler dem i dist-outputtet til forbrugerne.
"assets": ["./styles/theme.css"]Kontrol af bygningen
Efter bygningen skal du undersøge dist/ui-kit: Bekræft FESM-bundtet, .d.ts-filerne og en package.json, hvis exports/module-felter peger på de byggede filer. Det er præcis det, npm modtager.
Watch-tilstand til udvikling
Byg automatisk igen, mens du redigerer, ved at tilføje --watch. Sammen med en demoapp giver det en hurtig feedbacksløjfe under udviklingen af biblioteket.
ng build ui-kit --watchHurtigt tjek
Hvilket format bygges Angular-biblioteker til?
Opsummering
Byg biblioteker med ng build <lib>, som kører ng-packagr og genererer Angular Package Format (FESM-bundter, .d.ts, genereret package.json) i dist/. Konfigurér outputtet via ng-package.json, byg i produktionstilstand, brug delvis kompilering for kompatibilitet på tværs af versioner, og hold peer-afhængigheder eksterne.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 38
- Lektioner
- 144
Ofte stillede spørgsmål
Er lektionen “Build med ng-packagr” gratis?
Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Build med ng-packagr”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Build med ng-packagr”?
Producer output i Angular Package Format. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Angular Academy?
Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Build med ng-packagr”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Angular Academy-lektion?
Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Oprettelse af et bibliotek med ng generate
- Offentlig API og entry points
- Build med ng-packagr
- Udgivelse til npm