Building with ng-packagr
Produce the Angular Package Format output.
Building with ng-packagr is a free Angular Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.
Libraries Need a Special Build
You cannot publish raw TypeScript and templates; consumers expect compiled, standardized output. Angular libraries build to the Angular Package Format (APF) using ng-packagr, the tool the CLI uses under the hood.
The Angular Package Format
APF is the official structure for distributable Angular libraries: optimized ES modules, type definitions, and metadata laid out so any Angular app can consume and tree-shake the library reliably.
Building a Library
Run ng build targeting the library project. The CLI invokes ng-packagr and writes the packaged output to dist/.
ng build ui-kit
# outputs dist/ui-kit in Angular Package FormatWhat ng-packagr Produces
The dist folder contains compiled FESM (flattened ES module) bundles, .d.ts type files, and a generated package.json with correct module and types entry fields.
dist/ui-kit/
fesm2022/ui-kit.mjs # flattened ES module
index.d.ts # type declarations
package.json # generated, points to the aboveThe ng-package.json Config
Each library has an ng-package.json telling ng-packagr the output destination and the entry file. The CLI reads it during the build.
// 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
Build in production configuration to enable full optimization. The output is what you publish, so always package the optimized version.
ng build ui-kit --configuration productionPartial Compilation
Libraries are compiled in partial Ivy mode, not fully compiled. This makes them compatible across Angular versions, the consuming app finishes compilation (linking) during its own build.
Peer Dependencies in Output
ng-packagr keeps Angular and other peer dependencies external rather than bundling them. The generated package.json lists them as peerDependencies, so the consumer provides one shared copy.
Assets and Styles
You can include styles and static assets in the package. Declare them in ng-package.json so ng-packagr copies and processes them into the dist output for consumers.
"assets": ["./styles/theme.css"]Verifying the Build
After building, inspect dist/ui-kit: confirm the FESM bundle, the .d.ts files, and a package.json whose exports/module fields point at the built files. This is exactly what npm will receive.
Watch Mode for Development
Rebuild automatically as you edit by adding --watch. Combined with a demo app, this gives a fast feedback loop while developing the library.
ng build ui-kit --watchQuick Check
What format do Angular libraries build to?
Recap
Build libraries with ng build <lib>, which runs ng-packagr to emit the Angular Package Format (FESM bundles, .d.ts, generated package.json) into dist/. Configure output via ng-package.json, build in production, rely on partial compilation for cross-version compatibility, and keep peers external.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 38
- Lessons
- 144
Frequently Asked Questions
Is the “Building with ng-packagr” lesson free?
Yes — any 3 lessons of the Angular Academy learning path, including “Building with ng-packagr”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.
What will I learn in “Building with ng-packagr”?
Produce the Angular Package Format output. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
How long does the “Building with ng-packagr” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Creating a Library with ng generate
- Public API and Entry Points
- Building with ng-packagr
- Publishing to npm