How to add a Angular 2 component to an Angular 1 directive written in Coffeescript? (with webpack)

Question

I have a case where I am am working in an Angular application written in coffee-script. I am trying to embed a new component in an existing ng1 directive written in coffee. According to the documentation I should just have to...

1.) Rename file to .ts 2.) Add the following (ish)...

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

The problem is I am in coffeescript so I can't just do that. So I tried adding that in back ticks (to make it clear JS) like this...

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

upgradeAdapter.downgradeNg2Component(HeroDetailComponent));

Then I change my .coffee loader to include

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

But this throws a bunch of errors transpiling. Is there an easier way than transpiling all of the files and changing the extension? This would help so I can still merge.

Answer 1

There were a few things wrong with my code but the real problem was the way coffee script requires imports. I changed it to something like this...

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

Where update adapter is...

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}