Real-world examples of Angular CLI debugging examples for 2025

Fast-start examples of Angular CLI debugging examples in real projects

Before talking about theory, let’s start with real examples of Angular CLI debugging examples that mirror what happens in production teams.

Imagine these situations:

• The app compiles locally but fails in CI with a cryptic TypeScript error.
• ng serve suddenly takes minutes to rebuild after a small change.
• A production build works, but users see a blank screen and the console shows only minified stack traces.
• Unit tests pass on your machine but fail randomly on the shared pipeline.

Each of these is an example of Angular CLI debugging in action. The Angular CLI already ships with tools to surface more detail; the trick is knowing which knobs to turn and how to read the output.

Example of debugging a failing ng build with --verbose

One of the best examples of Angular CLI debugging examples is the classic "It builds on my machine" problem.

You run:

ng build

Locally, it works. In CI, it fails with a vague error like:

ERROR in src/app/app.component.ts:45:12 - error TS2322: Type 'null' is not assignable to type 'User'.

That’s helpful, but not quite enough. To get a richer picture, you can rerun with verbose logging:

ng build --verbose

Now you see:

• Exact TypeScript version and tsconfig path being used.
• The specific builder (@angular-devkit/build-angular:browser) and its options.
• The exact file graph being processed when the error occurs.

In one real example, the verbose log showed that CI was using a different tsconfig.app.json than expected due to a misconfigured angular.json path. Locally, developers had a global TypeScript install masking the issue.

Debugging pattern:

• Always re-run failed ng build commands with --verbose.
• Compare local vs CI logs to spot different config files, different Angular versions, or different build targets.

This is one of the simplest examples of Angular CLI debugging examples that immediately surfaces environment drift.

Examples include debugging slow ng serve with build stats and budgets

Another example of Angular CLI debugging examples in practice: the dev server suddenly becomes painfully slow. Rebuilds used to take 3 seconds; now they take 25.

The Angular CLI can emit detailed build stats that help you see what changed.

Run:

ng build --stats-json

This generates a stats.json file in the output folder. You can then load this into tools like Webpack Bundle Analyzer or Source Map Explorer to see exactly which modules exploded in size.

In a real example, a team discovered that a single import * as moment from 'moment' pulled in the entire library instead of a smaller alternative. Bundle size tripled, and incremental builds slowed to a crawl.

Combine this with Angular’s budgets feature in angular.json:

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "2mb",
    "maximumError": "5mb"
  }
]

Budgets turn performance issues into explicit build-time warnings and errors, which is another subtle but powerful example of Angular CLI debugging examples baked into the config system.

Example of debugging runtime errors using source maps

A classic production headache: the app loads a white screen, and the browser console shows something like:

main.27f8d3c7a3f2b.js:1 ERROR TypeError: Cannot read properties of undefined (reading 'length')

By default, production builds are minified, so stack traces point to unreadable code. One of the best examples of Angular CLI debugging examples is toggling source maps in production for targeted debugging.

In angular.json:

"configurations": {
  "production": {
    "buildOptimizer": true,
    "optimization": true,
    "sourceMap": {
      "scripts": true,
      "styles": false,
      "vendor": true
    }
  }
}

Then build:

ng build --configuration production

Now, when the error occurs in production (or in a staging environment that mirrors it), the browser devtools can map that minified stack trace back to your original TypeScript file and line number.

In a recent real-world example, this revealed that a shared utility function was returning undefined when a feature flag was disabled. Without source maps, it looked like a random failure in main.js. With source maps, it pointed directly to feature-flags.service.ts line 87.

This is a textbook example of Angular CLI debugging examples using build configuration to make runtime errors actionable.

Real examples of Angular CLI debugging examples for environment-specific bugs

Environment bugs are the ones that only appear:

• In production, but never in local dev.
• Only when a particular API base URL is used.
• Only under certain feature flags.

Angular’s environment system plus the CLI’s --configuration flag give another set of examples of Angular CLI debugging examples that are easy to overlook.

Consider this command:

ng serve --configuration=staging

Combined with fileReplacements in angular.json, this lets you run the app locally while hitting staging APIs and configs.

"configurations": {
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ]
  }
}

In one real example, a team saw 401 errors only in production. By serving locally with the staging configuration and opening the Network tab in the browser, they noticed that a header was missing only for that environment. The bug was in environment.staging.ts, not in the authentication service.

That pattern—use --configuration plus browser devtools to mirror production behavior locally—is one of the most practical examples of Angular CLI debugging examples for environment issues.

Example of debugging flaky tests with ng test --watch=false --browsers=ChromeHeadless

Tests that pass locally but fail in CI are a constant source of frustration.

You might see logs like:

HeadlessChrome 119.0.0 (Linux x86_64) AppComponent should create FAILED
Error: Timeout - Async callback was not invoked within 5000ms

Instead of relying on the default ng test behavior, you can run targeted commands that mirror CI more closely:

ng test --watch=false --browsers=ChromeHeadless --code-coverage

This is a practical example of Angular CLI debugging examples for tests, because it:

• Uses the same headless browser CI typically uses.
• Disables watch mode so the run matches pipeline behavior.
• Produces coverage reports that help you spot untested branches and race conditions.

A real example: a test that used fakeAsync and tick() worked fine in a full Chrome browser but failed in headless mode. Running the same command locally reproduced the failure, and the fix was to switch to waitForAsync and rely on Angular’s whenStable() instead.

Use this pattern whenever tests only fail in the pipeline: copy the CLI flags from CI into your local run.

Examples include debugging dependency and version conflicts with ng version and npx runs

Version drift is a subtle source of bugs. Angular 17 introduced some changes to the CLI and build system that can behave differently from older global installs.

A helpful example of Angular CLI debugging examples is comparing global vs local versions:

ng version
npx ng version

In one case, developers had Angular CLI 15 globally, but the project used Angular 17. Running ng build used the global CLI, leading to odd warnings and misaligned builder options. Running npx ng build forced the project’s local CLI version, and the warnings disappeared.

The fix was to either:

• Upgrade the global CLI to match the project, or
• Always use npx ng in scripts and docs.

This is a simple but powerful example of Angular CLI debugging examples where just checking versions can explain weird behavior.

For staying current on Angular’s release changes and migration paths, it’s worth bookmarking the official Angular docs at https://angular.io/guide/releases and the update guide at https://update.angular.io.

Example of debugging configuration mistakes in angular.json

Sometimes the CLI is “broken” because angular.json quietly drifted into a bad state.

A common scenario:

• ng serve works.
• ng build --configuration production fails with Configuration 'production' is not set in the workspace.

This is an example of Angular CLI debugging examples where you inspect the workspace configuration itself.

Steps that often help:

• Run ng config to inspect values.
• Compare angular.json to a fresh project created with ng new for the same Angular version.
• Look for missing configurations blocks or mis-typed configuration names.

In one real example, a team renamed production to prod in angular.json but forgot to update CI scripts. The fix was either to restore production as an alias or change the build command to ng build --configuration prod.

When debugging configuration, treat angular.json as executable code: small typos can break builds in very specific environments.

Modern 2024–2025 trends that affect Angular CLI debugging

Angular in 2024–2025 looks different from the Angular of 2019. A few trends affect how you think about examples of Angular CLI debugging examples today:

• Standalone components by default: New apps no longer rely on NgModules by default. Many debugging examples now involve misconfigured bootstrap logic rather than module declarations.
• ESBuild and Vite-style tooling: The Angular team has been moving toward faster, more modern bundlers. Build errors and performance issues may show up in different formats than the classic Webpack logs, but the same CLI flags (--verbose, --configuration, --stats-json) still matter.
• Stricter TypeScript: With newer TypeScript versions, more projects are enabling strict mode. That means more compile-time errors but fewer runtime surprises. Debugging now often shifts left into the TypeScript layer, where CLI output is your first line of defense.
• Server-side rendering and hydration: With Angular Universal and hydration, you’ll see more issues where the app works in CSR mode but fails during SSR. Running ng run project-name:server with verbose logging becomes another example of Angular CLI debugging examples that matter for SEO-focused apps.

For a broader view of how modern JavaScript tooling is evolving, the MDN Web Docs project (hosted by Mozilla, a .org) provides a good neutral reference on build tooling, performance, and debugging techniques.

FAQ: Short, practical examples of Angular CLI debugging examples

Q: Can you give a quick example of using Angular CLI to debug a 404 for lazy-loaded routes?
Yes. Run the app with:

ng serve --configuration=production

Then open the Network tab in the browser devtools and look for failed *.js chunk requests. If the URLs look wrong, inspect your router configuration and the baseHref or deployUrl in angular.json. This is a practical example of Angular CLI debugging examples where build configuration and router setup intersect.

Q: What are some common examples of Angular CLI debugging examples for performance issues?
Typical patterns include running ng build --stats-json and analyzing bundle size, enabling budgets in angular.json, and testing a production-like build locally with ng serve --configuration production. These examples include both CLI flags and config tweaks that surface slow modules and oversized dependencies.

Q: Is there an example of using Angular CLI logs to debug service worker or PWA issues?
Yes. When using @angular/pwa, build with:

ng build --configuration production --verbose

The verbose output shows service worker generation steps and any errors in the asset manifest. Then serve the dist folder with a static server (for example, npx http-server dist/app-name) and use the Application tab in devtools to inspect the service worker. The CLI log plus browser tools give a clear example of Angular CLI debugging examples for offline behavior.

Q: How do I debug ng serve hanging or not starting?
Run ng serve --verbose and look at the last logged step. If it hangs on Browser application bundle generation, inspect recent changes to your main entry files and large imports. Sometimes a circular dependency or a very large dynamic import is the culprit. This is another real example of Angular CLI debugging examples where detailed logging points to the step that regressed.

Final thoughts

Angular’s CLI is not just a command runner; it’s a debugging toolkit hiding in plain sight. The best examples of Angular CLI debugging examples all share the same pattern:

• Turn on more visibility (--verbose, --stats-json, --source-map).
• Make environments more comparable (--configuration, fileReplacements).
• Align local and CI behavior (same CLI version, same test flags, same browser).

Once you start treating the CLI as a diagnostic instrument instead of just a build button, many of the “mysterious” Angular bugs become routine to track down.