sentry/fixtures/integration-docs/javascript-angular.json

{
  "html": "<div class=\"section\" id=\"installation\">\n<h2>Installation</h2>\n<p>Raven.js should be installed via npm.</p>\n<div class=\"highlight-sh\"><div class=\"highlight\" style=\"background: #ffffff\"><pre style=\"line-height: 125%\"><span></span>$ npm install raven-js --save\n</pre></div>\n</div>\n</div>\n\n\n<div class=\"section\" id=\"configuration\">\n<h2>Configuration</h2>\n<p>Configuration depends on which module loader/packager you are using to build your Angular application.</p>\n<p>Below are instructions for <a class=\"reference external\" href=\"https://github.com/systemjs/systemjs\">SystemJS</a>, followed by instructions for <a class=\"reference external\" href=\"https://webpack.github.io/\">Webpack</a>, Angular CLI, and other module loaders/packagers.</p>\n<div class=\"section\" id=\"systemjs\">\n<h3>SystemJS</h3>\n<p>First, configure SystemJS to locate the Raven.js package:</p>\n<div class=\"highlight-js\"><div class=\"highlight\" style=\"background: #ffffff\"><pre style=\"line-height: 125%\"><span></span><span style=\"color: #111111\">System.config({</span>\n  <span style=\"color: #111111\">packages</span><span style=\"color: #4b4f5c\">:</span> <span style=\"color: #111111\">{</span>\n    <span style=\"color: #34c08b; font-style: italic\">/* ... existing packages above ... */</span>\n    <span style=\"color: #e8535a\">&#39;raven-js&#39;</span><span style=\"color: #4b4f5c\">:</span> <span style=\"color: #111111\">{</span>\n      <span style=\"color: #111111\">main</span><span style=\"color: #4b4f5c\">:</span> <span style=\"color: #e8535a\">&#39;dist/raven.js&#39;</span>\n    <span style=\"color: #111111\">}</span>\n  <span style=\"color: #111111\">},</span>\n  <span style=\"color: #111111\">paths</span><span style=\"color: #4b4f5c\">:</span> <span style=\"color: #111111\">{</span>\n    <span style=\"color: #34c08b; font-style: italic\">/* ... existing paths above ... */</span>\n    <span style=\"color: #e8535a\">&#39;raven-js&#39;</span><span style=\"color: #4b4f5c\">:</span> <span style=\"color: #e8535a\">&#39;node_modules/raven-js&#39;</span>\n  <span style=\"color: #111111\">}</span>\n<span style=\"color: #111111\">});</span>\n</pre></div>\n</div>\n<p>Then, in your main module file (where <code class=\"docutils literal\"><span class=\"pre\">&#64;NgModule</span></code> is called, e.g. app.module.ts):</p>\n<div class=\"highlight-js\"><div class=\"highlight\" style=\"background: #ffffff\"><pre style=\"line-height: 125%\"><span></span>import Raven = require(&#39;raven-js&#39;);\nimport { BrowserModule } from &#39;@angular/platform-browser&#39;;\nimport { NgModule, ErrorHandler } from &#39;@angular/core&#39;;\nimport { AppComponent } from &#39;./app.component&#39;;\n\nRaven\n  .config(&#39;___PUBLIC_DSN___&#39;)\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</pre></div>\n</div>\n<p>Once you&#8217;ve completed these two steps, you are done.</p>\n</div>\n<div class=\"section\" id=\"angular-cli\">\n<h3>Angular CLI</h3>\n<p>Angular CLI now uses Webpack to build instead of SystemJS. All you need to do is modify your main module file (where <code class=\"docutils literal\"><span class=\"pre\">&#64;NgModule</span></code> is called, e.g. app.module.ts):</p>\n<div class=\"highlight-js\"><div class=\"highlight\" style=\"background: #ffffff\"><pre style=\"line-height: 125%\"><span></span>import * as Raven from &#39;raven-js&#39;;\nimport { BrowserModule } from &#39;@angular/platform-browser&#39;;\nimport { NgModule, ErrorHandler } from &#39;@angular/core&#39;;\nimport { AppComponent } from &#39;./app.component&#39;;\n\nRaven\n  .config(&#39;___PUBLIC_DSN___&#39;)\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</pre></div>\n</div>\n<p>Once you&#8217;ve completed that step, you are done.</p>\n</div>\n</div>\n",
  "link": "https://docs.getsentry.com/clients/javascript/integrations/angular/",
  "id": "javascript-angular",
  "name": "Angular"
}