javascript - Rozšíření pro Chrome a Angular2 příprava na produkci

Mám jednoduché rozšíření pro Chrome s vyskakovacím oknem a když kliknete na akci prohlížeče, vyskakovací okno se zobrazí a načte aplikaci Angular2. Aplikace Angular2 je jednoduchá:

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component'

@NgModule({
    imports: [BrowserModule],
    declarations: [//all components
        AppComponent
    ],
    bootstrap: [//main component
        AppComponent
    ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

do index.html přidám skript

System.import('app/main.js').catch(function(err) {
     console.error(err);
});

a když spustím rozšíření, funguje to dobře, ale teď potřebuji spojit všechny soubory .ts do jednoho souboru JavaScript. Obvykle to dělám s gulp, ale po spojení mé rozšíření nefunguje... Mohl by mi někdo prosím vysvětlit, jak připravit soubory .ts pro nasazení??

AKTUALIZACE 1

manifest.json

{
  "manifest_version": 2,
  "name": "One-click Kittens",
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.0",

  "permissions": [
    "https://secure.flickr.com/"
  ],
  "browser_action": {
    "default_icon": "img/icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [{
    "js": [
      "lib/jquery.min.js"
    ],
    "matches": [
      "http://*/*",
      "https://*/*"
    ],
    "run_at": "document_end"
  }],
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self",
  "web_accessible_resources": [
    "lib/*"
  ]
}