Upload source maps for Angular

Install posthog-cli:

npm install -g @posthog/cli

curl --proto '=https' --tlsv1.2 -LsSf https://download.posthog.com/cli | sh
posthog-cli-update

Install the PostHog esbuild plugin and the community Angular custom-esbuild builder:

npm install --save-dev @posthog/esbuild-plugin @angular-builders/custom-esbuild

Use the @angular-builders/custom-esbuild major version that matches your Angular major version. For example, use version 20 for Angular 20.

To authenticate the CLI, call the login command. This opens your browser where you select your organization, project, and API scopes to grant:

posthog-cli login

If you are using the CLI in a CI/CD environment such as GitHub Actions, you can set environment variables to authenticate:

You can also use the --host option instead of the POSTHOG_CLI_HOST environment variable to target a different PostHog instance or region. For EU users:

posthog-cli --host https://eu.posthog.com [CMD]

Create a workspace-local plugin file:

import posthogEsbuildPlugin from '@posthog/esbuild-plugin'

export default posthogEsbuildPlugin()

Update your production build target in angular.json:

Show full example
            "plugins": ["./tools/posthog-esbuild-plugin.ts"],
            "outputHashing": "all",
            "sourceMap": {
              "scripts": true,
              "styles": false,
              "hidden": true,
              "vendor": true
            }
          }
        }
      }
    }
Show full example

Keep outputHashing enabled. The plugin uses each content-hashed JavaScript filename as its symbol-set ID.

ng build --configuration production

The plugin adds its runtime registration before esbuild computes output hashes. Angular then creates index.html and ngsw.json from the final JavaScript.

Check a generated JavaScript file in dist/<your-app-name>/browser. It must contain this static marker:

/* posthog-chunk-id: output-filename */

Open the matching .js.map file and confirm its chunk_id equals the JavaScript filename. For example:

{
  "chunk_id": "main-LMD2Y6LY.js"
}

You won't see a //# chunkId= comment. The plugin registers the final filename at runtime instead of adding a random ID after the build.

Upload the already-processed output without injecting it again:

posthog-cli sourcemap upload --directory ./dist/<your-app-name>/browser

Do not use sourcemap process, sourcemap inject, or sourcemap upload --delete-after after this build. Those commands rewrite JavaScript and invalidate hashes that Angular has already computed.

If you don't deploy source maps, remove only the .map files after a successful upload:

find ./dist/<your-app-name>/browser -name '*.map' -delete