如何将 Angular 2 组件添加到用 Coffeescript 编写的 Angular 1 指令中？（使用 webpack）答案

【问题标题】：How to add a Angular 2 component to an Angular 1 directive written in Coffeescript? (with webpack)如何将 Angular 2 组件添加到用 Coffeescript 编写的 Angular 1 指令中？（使用 webpack）
【发布时间】：2017-02-15 18:36:24
【问题描述】：

我有一个案例，我正在使用咖啡脚本编写的 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"]
},

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

【问题讨论】：

标签： angular typescript coffeescript webpack ts-loader

【解决方案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}

【讨论】：