Angular CLI

You can use the Angular CLI together with our Sentry webpack plugin to automatically create releases and upload source maps to Sentry when building your app (with ng build, for example). Due to Angular's closed build system, to register the webpack plugin, you'll first need to configure a custom builder. In the end, you'll be able to automatically upload source maps whenever you're creating a production build of your app.

Install

Install the custom webpack builder for Angular and the Sentry webpack plugin:

npm install --save-dev @angular-builders/custom-webpack @sentry/webpack-plugin

Configure

With these packages installed, configure your app to upload source maps in three steps:

1. Set up custom Angular builder

In your angular.json, replace the default builder (@angular-devkit/build-angular) with @angular-builders/custom-webpack:

{
  "projects": {
    "my-project": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            // ... other options
          },
          // ... other options
        },
        // ... other options
      },
      // ... other options
    }
  }
}

2. Register the Sentry Webpack Plugin

To upload source maps you have to configure an auth

SENTRY_AUTH_TOKEN=sntrys_YOUR_TOKEN_HERE

Register the Sentry Webpack plugin in your webpack.config.js:

const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");

module.exports = {
  // ... other config above ...

  devtool: "source-map", // Source map generation must be turned on
  plugins: [
    sentryWebpackPlugin({
      org: "example-org",
      project: "example-project",
      authToken: process.env.SENTRY_AUTH_TOKEN,
    }),
  ],
};

Learn more about configuring the plugin in our Sentry webpack plugin documentation.

3. Upload

To upload the source maps, build your Angular application:

ng build # add --prod for Angular versions below 13