Build Tools & Bundlers

ng generate library adds a library project under projects/ with its own ng-packagr build target, ng-package.json, package.json and public-api.ts, and maps the library name to dist/<name> in tsconfig paths. Apps import the built output, so build the library first.

ng generate component user-card runs the @schematics/angular:component schematic, which creates a user-card/ folder with user-card.ts, .html, .css and .spec.ts for a standalone UserCard class; --dry-run (-d) lists those files without writing them.

Create a proxy file such as src/proxy.conf.json mapping /api/** to the backend's target URL, set proxyConfig on the serve target, and restart ng serve. Only the dev server reads it, so production needs its own reverse proxy or CORS.

ng update resolves compatible target versions for the named packages and their package groups, checks peer dependencies, requires a clean git tree, rewrites package.json, installs, then runs each updated package's migration schematics to change your code and configuration.

In a new Angular CLI project, the build target's defaultConfiguration is production, which adds budgets and outputHashing: 'all', while serve defaults to development, whose buildTarget turns optimization off and source maps on.

Run npm create vue@latest, answer the prompts, then install dependencies and start the dev server. The @latest tag matters because without it npm may reuse a cached, outdated create-vue.

optimization minifies, tree-shakes and inlines critical CSS and fonts; sourceMap emits maps; outputHashing hashes file names; namedChunks names lazy chunks. Production keeps optimization on, maps off and hashing all; development turns optimization off and maps on.

Partial compilation emits Angular code not tied to one Angular runtime version, and the consuming app's build finishes it. A development build uses full compilation, which only works with the exact Angular version it was built against.

ng add picks a version compatible with the workspace's installed packages, installs it, then runs the package's own ng-add schematic to wire it in: providers, config, styles, angular.json targets. npm install only downloads the package.

Migrations and deprecation windows assume one major at a time, so ng update refuses bigger jumps for @angular/* packages. Run ng update @angular/core@^21 @angular/cli@^21, build, test and commit, then repeat for ^22.

Add a staging entry under the Angular CLI build target's configurations whose fileReplacements swaps src/environments/environment.ts for environment.staging.ts at compile time, give serve a matching buildTarget, and build with ng build -c staging.

host sets the interface the dev server listens on (default localhost), port its port (default 4200), and ssl switches to HTTPS. To reach it from a phone, listen on 0.0.0.0 and open the machine's address; add allowedHosts for custom hostnames.

ng serve hot-replaces global styles and component templates and styles; TypeScript changes reload the page. HMR is off with --no-hmr, without live reload, in JIT builds, or when outputHashing is all or bundles.

Set the production sourceMap to { "scripts": true, "hidden": true }. The builder writes .map files without the sourceMappingURL comment. CI uploads them to the error-reporting service and deletes them before deploying.

public-api.ts is the library's entry file: ng-package.json names it in lib.entryFile, and ng-packagr packages what it exports into the published entry point. Anything not exported there cannot be imported by consumers by package name.

Add "@schematics/angular:component": { "style": "scss", "skipTests": true } under a schematics block in angular.json. Project-level entries override workspace-level ones, which override global ones, and a flag typed on the command line overrides them all.

A schematic's Tree is an in-memory view of the workspace: the files on disk as a base plus a staging area of recorded changes. Nothing reaches disk until the whole schematic succeeds, so an error discards everything.

outputMode 'server' emits a browser folder plus a server folder with server.mjs that you run under Node; it needs the server and ssr.entry options. outputMode 'static' emits only browser files, prerendered where possible, for any static host.

Use it when versions were bumped outside ng update (a package manager, a bot, a shared catalog), so migrations never ran. It installs nothing and runs migrations above --from up to --to, which defaults to the installed version.

Angular CLI budgets in angular.json have a type (initial, bundle, all, allScript, any, anyScript, anyComponentStyle) and thresholds. Crossing maximumWarning logs a warning; crossing maximumError fails the build. Percentages are relative to a baseline.

An Angular CLI command such as ng build picks the only project with that target, or the project containing the current directory; otherwise it errors. Name the project explicitly, as in ng build admin or ng run admin:build:production.

ESLint adds a flat eslint.config with the Vue and TypeScript presets, plus Oxlint with an .oxlintrc.json; the lint script runs both. Oxlint is always included and eslint-plugin-oxlint turns off ESLint rules it covers. Prettier adds its own config and a format script.

TypeScript adds tsconfig files, env.d.ts and a type-checking build script; Router adds vue-router with src/router and two views; Pinia adds pinia and a counter store; Vitest adds vitest.config, a jsdom test setup and an example spec.

Run ng update @angular/cli --name use-application-builder: it switches to the application builder, renames main to browser and drops webpack-only options. Then fix the new dist/<project>/browser output path, non-ESM imports and any custom webpack setup.

Check that the release is a production, partial build published from dist, that it was not built with a newer Angular than the app, that @angular packages stay peerDependencies so apps get one copy, and whether an export was removed.

Write a schematics collection with a feature schematic whose rule renders url('./files') templates with applyTemplates, moves them into place and mergeWiths them into the tree; build it, list it in cli.schematicCollections, test it with SchematicTestRunner.

Build with baseHref /shop/ so index.html gets <base href="/shop/"> and scripts and routes resolve under it, and configure the server to return /shop/index.html for unknown paths. deployUrl only prefixes asset URLs, for CDN-style setups.

Name a library release that accepts Angular 22 in the same ng update; without one, wait, replace or patch the library. --force only skips the CLI's check, so use it only after proving the library works on 22.

An Angular CLI configuration named with -c replaces defaultConfiguration instead of stacking on it, so staging gets only the base options and its own overrides. Repeat production's settings in staging, or build with -c production,staging.