如何在Angular 2.0应用程序中使用诸如Sortablejs之类的库？

Question

我正在开始一个新的，简单的Angular 2.0应用程序，并希望列出包含可以拖动的项目。

Sortablejs似乎是一个很好的工具，但似乎有几个障碍。据我所知，我必须：

1）使用ng-sortable将Sortable.js包装在Angular 1属性指令中。

2）使用UpgradeAdapter将Angular 1元素指令用作Angular 2组件。

3）使用升级工具周围的ngadapter包装器来启用除组件指令之外的属性指令。

然后我需要包含所有文件并将所有说明混合在一起。

从angular-cli生成的应用开始，我生成了一条路线，并安装了npm，ngadapter，angular，UpgradeAdapter和sortablejs。我将其添加到我的index.html文件

<script type="text/javascript" src="/node_modules/sortablejs/ng-sortable.js"></script>
<script type="text/javascript" src="/node_modules/angular/angular-min.js"></script>

我创建了一个像这样的upgrade_adapter.ts文件

import { UpgradeAdapter } from '@angular/upgrade';
export const upgradeAdapter = new UpgradeAdapter();

我编辑了我的main.ts文件，如下所示：

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { MySimpleAppComponent, environment } from './app/';
import { upgradeAdapter } from './app/upgrade_adapter';
import { angular } from '../node_modules/angular'; // here's the problem. I don't know how to get angular
import { ngAdapter } from 'ngAdapter/build/ngAdapter';

//create your AngularJS module 
let module = angular.module('MyApp', []);

//create adapter 
let adapter = new ngAdapter(module);

if (environment.production) {
  enableProdMode();
}

// bootstrap(MySimpleAppComponent);          // what it was originally
adapter.bootstrap(document.body, ['MyApp']); // from ngadapter instructions

我确定这里有一堆错误，但第一条错误信息是

• 找不到姓名＆＃39; angular＆＃39;

我非常确定答案在pages of the system.js documentation内，但我没有得到它。你知道如何设置角度物体吗？我在这里走下正轨吗？我没有和Sortable结婚但是我希望我在尝试使用Angular 2的其他库时会遇到同样的问题，并且想知道如何去做。

是否有更好或更标准的方法来使用一个尚未为Angular 2制作的优秀JavaScript库？