来自typescript的angular2 chrome扩展chrome.runtime.sendMessage

Question

我正在尝试使用Angular 2编写Chrome扩展程序。

在我的app.component.ts中，我有以下内容：

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"});
  }
}

问题在于，当我尝试使用Ahead of Time compilation进行编译时，出现此错误：

   /dev/quickstart/app/app.component.ts:14:12出错：   “typeof chrome”类型中不存在属性“运行时”。

显然，我的角应用程序不知道chrome.runtime。解决这个问题的最佳方法是什么？

我见过this stack overflow answer关于使用tsc编译chrome-app.d.ts，但我需要使用Ahead of Time compilation来解决内容安全策略。

因此，我使用node_modules/.bin/ngc -p tsconfig-aot.json代替tsc。有什么帮助吗？

Answer 1

好的，修好了。

解决方案分为3部分。

1. 首先，我需要一些额外的文件。我将以下所有内容放入名为chrome的文件夹中：
   chrome-app.d.ts
   index.d.ts
   filesystem/index.d.ts - ＆gt;我将其重命名为filesystem.d.ts
   filewriter/index.d.ts - ＆gt;我将其重命名为filewriter.d.ts



1. 对每个文章中的热门评论进行了一些修改，以使文件彼此了解：

   铬app.d.ts

/// <reference path="index.d.ts"/>
/// <reference path="filesystem.d.ts"/>

index.d.ts
/// <reference path="filesystem.d.ts" />


filesystem.d.ts
/// <reference path="filewriter.d.ts" />

1. 在app.component.ts内，我需要在顶部：
   ///<reference path="chrome/chrome-app.d.ts" />
   从'@ angular / core'导入{Component};

2. 为了编译，我遵循了Angular 2 docs：

   node_modules/.bin/ngc -p tsconfig-aot.json
node_modules/.bin/rollup -c rollup-config.js

瞧