如何将 Angular 2 组件添加到用 Coffeescript 编写的 Angular 1 指令？ （使用网络包）

Question

我有一个案例，我正在使用用 coffee-script 编写的 Angular 应用程序。我正在尝试在用咖啡编写的现有 ng1 指令中嵌入一个新组件。根据 documentation 我应该只需要...

1.) 将文件重命名为 .ts 2.) 添加以下 (ish)...

import { HeroDetailComponent } from './hero-detail.component';
/* . . . */
angular.module('heroApp', [])
  .directive('heroDetail', upgradeAdapter.downgradeNg2Component(HeroDetailComponent));

问题是我在使用 coffeescript，所以我不能这样做。所以我尝试像这样在反引号中添加它（以使其清楚 JS）...

`import { HeroDetailComponent } from '../../../ng2/spinner/spinner.component';`

upgradeAdapter.downgradeNg2Component(HeroDetailComponent));

然后我更改我的 .coffee 加载程序以包含

{
  test: /\.coffee$/,
  loaders: ["coffee-loader", "coffee-import", "ts"]
},

但这会引发一堆错误。有没有比转译所有文件和更改扩展名更简单的方法？这会有所帮助，所以我仍然可以合并。

Answer 1

我的代码有一些问题，但真正的问题是咖啡脚本需要导入的方式。我把它改成了这样...

{ NgSpinnerComponent } = require '../../../ng2/upgrade.adapter';
...
module.directive("ngSpinner", NgSpinnerComponent)

更新适配器在哪里...

import { UpgradeAdapter } from '@angular/upgrade';
import { MyModule } from './my.module';
import { SpinnerComponent } from './spinner/spinner.component'
const upgradeAdapter = new UpgradeAdapter(MyModule);
var NgSpinnerComponent = upgradeAdapter.downgradeNg2Component( SpinnerComponent );
export {upgradeAdapter, NgSpinnerComponent}