---
title: "Angular CLI"
description: "Upload your source maps using the Angular CLI, a custom Angular builder and the Sentry webpack plugin."
url: https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/uploading/angular-webpack/
---

# Angular CLI | Sentry for Angular

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.

Before you start configuring the source maps upload, make sure that you're [generating source maps](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps.md#generating-source-maps) in your Angular project.

## [Install](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/uploading/angular-webpack.md#install)

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

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

## [Configure](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/uploading/angular-webpack.md#configure)

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

### [1. Set up custom Angular builder](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/uploading/angular-webpack.md#1-set-up-custom-angular-builder)

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

`angular.json`

```javascript
{
  "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
    }
  }
}
```

This configuration has no effect on your development server if you're running `ng serve`. Only `ng build` is configured to use the custom builder and the Webpack plugin. If you're using an Angular version below 13, only `ng build --prod` will leverage the custom builder.

### [2. Register the Sentry Webpack Plugin](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/uploading/angular-webpack.md#2-register-the-sentry-webpack-plugin)

This guide assumes you are using a Sentry SDK on version `7.47.0` or higher.

If you are on an older version and you want to upload source maps we recommend upgrading your SDK to the newest version.

To upload source maps you have to configure an [Organization Token](https://sentry.io/orgredirect/organizations/:orgslug/settings/auth-tokens/).

Alternatively, you can also use a [Personal Token](https://sentry.io/orgredirect/organizations/:orgslug/settings/account/api/auth-tokens/), with the "Project: Read & Write" and "Release: Admin" permissions.

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 (don't forget to add it to your `.gitignore` file, as this is sensitive data) in the working directory when building your project. We recommend you add the auth token to your CI/CD environment as an environment variable.

`.env.sentry-build-plugin`

```bash
SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
```

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

`webpack.config.js`

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

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

  devtool: "hidden-source-map", // Source map generation must be turned on ("hidden-source-map", "source-map", etc.)
  plugins: [
    sentryWebpackPlugin({
      org: "___ORG_SLUG___",
      project: "___PROJECT_SLUG___",
      authToken: process.env.SENTRY_AUTH_TOKEN,

      sourcemaps: {
        // As you're enabling client source maps, you probably want to delete them after they're uploaded to Sentry.
        // Set the appropriate glob pattern for your output folder - some glob examples below:
        filesToDeleteAfterUpload: [
          "./**/*.map",
          ".*/**/public/**/*.map",
          "./dist/**/client/**/*.map",
        ],
      },
    }),
  ],
};
```

Learn more about configuring the plugin in our [Sentry webpack plugin documentation](https://www.npmjs.com/package/@sentry/webpack-plugin).

### [3. Upload](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/uploading/angular-webpack.md#3-upload)

To upload the source maps, build your Angular application:

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

The Sentry webpack plugin doesn't upload source maps in watch-mode/development-mode. We recommend running a production build to test your implementation.

Generating source maps **may expose them to the public**, potentially causing your source code to be leaked. You can prevent this by configuring your server to deny access to `.js.map` files, or by using [Sentry Webpack Plugin's `sourcemaps.filesToDeleteAfterUpload`](https://www.npmjs.com/package/@sentry/webpack-plugin#sourcemapsfilestodeleteafterupload) option to delete source maps after they've been uploaded to Sentry.