Nx Angular CLI

If you're using @nx/angular, you can use the Nx CLI together with our Sentry webpack plugin to automatically create releases and upload source maps to Sentry when building your app (with nx build, for example). Due to @nx/angular's architecture, to register the webpack plugin, you'll first need to configure the @nx/angular:webpack-browser executor. 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 Sentry webpack plugin:

npm install --save-dev @sentry/webpack-plugin

Configure

Configure your app to upload source maps in three steps.

1. Configure project.json

In your project.json, replace the default executor (@angular-devkit/build-angular:browser) with @nx/angular:webpack-browser:

{
  "targets": {
    "build": {
      "builder": "@nx/angular:webpack-browser",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.js" // path to your webpack.config.js
        },
        "sourceMap": { // enable source maps generation
            "scripts": true,
         }
        // ... other options
      },
      // ... other options
    }
  }
}

2. Register the Sentry Webpack Plugin

To upload source maps you have to configure an auth token. Auth tokens can be passed to the plugin explicitly with the authToken option, with a SENTRY_AUTH_TOKEN environment variable, or with an .env.sentry-build-plugin file in the working directory when building your project. We recommend you add the auth token to your CI/CD environment as an environment variable.

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:

nx build