来自打字稿的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”上不存在属性“runtime”。

显然，我的 Angular 应用程序不了解 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

好的，修好了。

解决方案分为三部分。

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

1. 对每个顶部的 cmets 进行了一些修改，以使文件相互了解：

   chrome-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”导入{组件}；

2. 为了编译，我跟着Angular 2 docs：

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

瞧