angular2 chrome extension chrome.runtime.sendMessage from typescript
<p>I'm trying to write a Chrome Extension using Angular 2.</p>

<p>In my <code>app.component.ts</code>, I have the following:</p>

<pre><code>import { Component } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  showHeading = true;
  heroes = ['Magneta', 'Bombasto', 'Magma', 'Tornado'];
  toggleHeading() {
    this.showHeading = !this.showHeading;
  }
  injectHello(){
    chrome.runtime.sendMessage({action:"inject"});
  }
}
</code></pre>

<p>The problem is that when I try to compile using <a href="https://angular.io/docs/ts/latest/cookbook/aot-compiler.html" rel="nofollow noreferrer">Ahead of Time compilation</a>, I get this error:</p>

<blockquote>
  <p>Error at /dev/quickstart/app/app.component.ts:14:12:
  Property 'runtime' does not exist on type 'typeof chrome'.</p>
</blockquote>

<p>Apparently, my angular app does not know about chrome.runtime.  What is the best way to resolve this?</p>

<p>I've seen <a href="https://stackoverflow.com/questions/35096976/using-a-complex-d-ts-file-chrome-app-d-ts">this stack overflow answer</a> about compiling chrome-app.d.ts with <code>tsc</code>, but I need to use <a href="https://angular.io/docs/ts/latest/cookbook/aot-compiler.html" rel="nofollow noreferrer">Ahead of Time compilation</a> to get around the Content Security Policy.</p>

<p>Therefore, I use <code>node_modules/.bin/ngc -p tsconfig-aot.json</code> instead of <code>tsc</code>.  Any help?</p>