sentry/fixtures/integration-docs/javascript-angular2.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 2 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 application file (where <code class=\"docutils literal\"><span class=\"pre\">bootstrap</span></code> is called, e.g. main.ts):</p>\n<div class=\"highlight-js\"><div class=\"highlight\" style=\"background: #ffffff\"><pre style=\"line-height: 125%\"><span></span><span style=\"color: #2eb0f7\">import</span> <span style=\"color: #111111\">Raven</span> <span style=\"color: #111111\">from</span> <span style=\"color: #e8535a\">&#39;raven-js&#39;</span><span style=\"color: #111111\">;</span>\n<span style=\"color: #2eb0f7\">import</span> <span style=\"color: #111111\">{</span> <span style=\"color: #111111\">bootstrap</span> <span style=\"color: #111111\">}</span> <span style=\"color: #111111\">from</span> <span style=\"color: #e8535a\">&#39;angular2/platform/browser&#39;</span><span style=\"color: #111111\">;</span>\n<span style=\"color: #2eb0f7\">import</span> <span style=\"color: #111111\">{</span> <span style=\"color: #111111\">MainApp</span> <span style=\"color: #111111\">}</span> <span style=\"color: #111111\">from</span> <span style=\"color: #e8535a\">&#39;./app.component&#39;</span><span style=\"color: #111111\">;</span>\n<span style=\"color: #2eb0f7\">import</span> <span style=\"color: #111111\">{</span> <span style=\"color: #111111\">provide,</span> <span style=\"color: #111111\">ExceptionHandler</span> <span style=\"color: #111111\">}</span> <span style=\"color: #111111\">from</span> <span style=\"color: #e8535a\">&#39;angular2/core&#39;</span><span style=\"color: #111111\">;</span>\n\n<span style=\"color: #111111\">Raven</span>\n  <span style=\"color: #111111\">.config(</span><span style=\"color: #e8535a\">&#39;___PUBLIC_DSN___&#39;</span><span style=\"color: #111111\">)</span>\n  <span style=\"color: #111111\">.install();</span>\n\n<span style=\"color: #2eb0f7\">class</span> <span style=\"color: #111111\">RavenExceptionHandler</span> <span style=\"color: #111111\">{</span>\n  <span style=\"color: #111111\">call(err</span><span style=\"color: #4b4f5c\">:</span><span style=\"color: #111111\">any)</span> <span style=\"color: #111111\">{</span>\n    <span style=\"color: #111111\">Raven.captureException(err.originalException);</span>\n  <span style=\"color: #111111\">}</span>\n<span style=\"color: #111111\">}</span>\n\n<span style=\"color: #111111\">bootstrap(MainApp,</span> <span style=\"color: #111111\">[</span>\n  <span style=\"color: #111111\">provide(ExceptionHandler,</span> <span style=\"color: #111111\">{useClass</span><span style=\"color: #4b4f5c\">:</span> <span style=\"color: #111111\">RavenExceptionHandler})</span>\n<span style=\"color: #111111\">]);</span>\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=\"webpack-angular-cli-and-other-module-loaders\">\n<h3>Webpack, Angular CLI, and Other Module Loaders</h3>\n<p>In Webpack, Angular CLI, and other module loaders/packagers, you may need to use the <strong>require</strong> keyword as\npart of your <cite>import</cite> statement:</p>\n<div class=\"highlight-js\"><div class=\"highlight\" style=\"background: #ffffff\"><pre style=\"line-height: 125%\"><span></span><span style=\"color: #2eb0f7\">import</span> <span style=\"color: #111111\">Raven</span> <span style=\"color: #4b4f5c\">=</span> <span style=\"color: #111111\">require(</span><span style=\"color: #e8535a\">&#39;raven-js&#39;</span><span style=\"color: #111111\">);</span>  <span style=\"color: #34c08b; font-style: italic\">// NOTE: &quot;require&quot; not &quot;from&quot;</span>\n<span style=\"color: #2eb0f7\">import</span> <span style=\"color: #111111\">{</span> <span style=\"color: #111111\">bootstrap</span> <span style=\"color: #111111\">}</span> <span style=\"color: #111111\">from</span> <span style=\"color: #e8535a\">&#39;angular2/platform/browser&#39;</span><span style=\"color: #111111\">;</span>\n<span style=\"color: #2eb0f7\">import</span> <span style=\"color: #111111\">{</span> <span style=\"color: #111111\">MainApp</span> <span style=\"color: #111111\">}</span> <span style=\"color: #111111\">from</span> <span style=\"color: #e8535a\">&#39;./app.component&#39;</span><span style=\"color: #111111\">;</span>\n<span style=\"color: #2eb0f7\">import</span> <span style=\"color: #111111\">{</span> <span style=\"color: #111111\">provide,</span> <span style=\"color: #111111\">ExceptionHandler</span> <span style=\"color: #111111\">}</span> <span style=\"color: #111111\">from</span> <span style=\"color: #e8535a\">&#39;angular2/core&#39;</span><span style=\"color: #111111\">;</span>\n\n<span style=\"color: #111111\">Raven</span>\n  <span style=\"color: #111111\">.config(</span><span style=\"color: #e8535a\">&#39;___PUBLIC_DSN___&#39;</span><span style=\"color: #111111\">)</span>\n  <span style=\"color: #111111\">.install();</span>\n\n<span style=\"color: #2eb0f7\">class</span> <span style=\"color: #111111\">RavenExceptionHandler</span> <span style=\"color: #111111\">{</span>\n  <span style=\"color: #111111\">call(err</span><span style=\"color: #4b4f5c\">:</span><span style=\"color: #111111\">any)</span> <span style=\"color: #111111\">{</span>\n    <span style=\"color: #111111\">Raven.captureException(err.originalException);</span>\n  <span style=\"color: #111111\">}</span>\n<span style=\"color: #111111\">}</span>\n\n<span style=\"color: #111111\">bootstrap(MainApp,</span> <span style=\"color: #111111\">[</span>\n  <span style=\"color: #111111\">provide(ExceptionHandler,</span> <span style=\"color: #111111\">{useClass</span><span style=\"color: #4b4f5c\">:</span> <span style=\"color: #111111\">RavenExceptionHandler})</span>\n<span style=\"color: #111111\">]);</span>\n</pre></div>\n</div>\n</div>\n</div>\n",
  "link": "https://docs.getsentry.com/clients/javascript/integrations/angular2/",
  "id": "javascript-angular2",
  "name": "Angular 2"
}