Angular Academy · Lesson

Building with ng-packagr

Produce the Angular Package Format output.

Building with ng-packagr is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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 Format

What 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 above

The 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 production

Partial 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 --watch

Quick 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.

Frequently asked questions

Is the “Building with ng-packagr” lesson free?

Yes — the full text of “Building with ng-packagr” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

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

← Back to Angular Academy