{ "html": "
\n

Installation

\n

Raven.js should be installed via npm.

\n
$ npm install raven-js --save\n
\n
\n
\n\n\n
\n

Configuration

\n

Configuration depends on which module loader/packager you are using to build your Angular application.

\n

Below are instructions for SystemJS, followed by instructions for Webpack, Angular CLI, and other module loaders/packagers.

\n
\n

SystemJS

\n

First, configure SystemJS to locate the Raven.js package:

\n
System.config({\n  packages: {\n    /* ... existing packages above ... */\n    'raven-js': {\n      main: 'dist/raven.js'\n    }\n  },\n  paths: {\n    /* ... existing paths above ... */\n    'raven-js': 'node_modules/raven-js'\n  }\n});\n
\n
\n

Then, in your main module file (where @NgModule is called, e.g. app.module.ts):

\n
import Raven = require('raven-js');\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule, ErrorHandler } from '@angular/core';\nimport { AppComponent } from './app.component';\n\nRaven\n  .config('___PUBLIC_DSN___')\n  .install();\n\nexport class RavenErrorHandler implements ErrorHandler {\n  handleError(err:any) : void {\n    Raven.captureException(err.originalError || err);\n  }\n}\n\n@NgModule({\n  imports: [ BrowserModule ],\n  declarations: [ AppComponent ],\n  bootstrap: [ AppComponent ],\n  providers: [ { provide: ErrorHandler, useClass: RavenErrorHandler } ]\n})\nexport class AppModule { }\n
\n
\n

Once you’ve completed these two steps, you are done.

\n
\n
\n

Angular CLI

\n

Angular CLI now uses Webpack to build instead of SystemJS. All you need to do is modify your main module file (where @NgModule is called, e.g. app.module.ts):

\n
import * as Raven from 'raven-js';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule, ErrorHandler } from '@angular/core';\nimport { AppComponent } from './app.component';\n\nRaven\n  .config('___PUBLIC_DSN___')\n  .install();\n\nexport class RavenErrorHandler implements ErrorHandler {\n  handleError(err:any) : void {\n    Raven.captureException(err);\n  }\n}\n\n@NgModule({\n  imports: [ BrowserModule ],\n  declarations: [ AppComponent ],\n  bootstrap: [ AppComponent ],\n  providers: [ { provide: ErrorHandler, useClass: RavenErrorHandler } ]\n})\nexport class AppModule { }\n
\n
\n

Once you’ve completed that step, you are done.

\n
\n
\n", "link": "https://docs.getsentry.com/clients/javascript/integrations/angular/", "id": "javascript-angular", "name": "Angular" }