在 AngularJS 应用程序（普通旧 ES5）中使用 Angular 2 组件（TypeScript）答案

【问题标题】：Use Angular2 componets (TypeScript) in AngularJS application (plain old ES5)在 AngularJS 应用程序（普通旧 ES5）中使用 Angular 2 组件（TypeScript）
【发布时间】：2016-03-01 20:18:44
【问题描述】：

我在使用 requireJS 的 ES5 angularJS 应用程序中尝试使用 angular2 组件时遇到了麻烦。当我使用 angular2.dev.sfx.js 时，我可以使用以下代码进行引导：

define([
'nxApp',
'nxRoute',
 ], 
   function(nxApp, nxRoute){
     var upgradeAdapter = new ng.UpgradeAdapter();
     upgradeAdapter.bootstrap(document.body, ['nxApp']);
     return upgradeAdapter;
});

但是我不能在 typescripts 中使用 import {Component} from 'angular2/angular2'，因为这会转换为 define(['angular2/angular2']... 这反过来会导致脚本错误作为脚本无法加载，因为 requireJS 在应用根文件夹中搜索 angular2.js 但它不存在。

当我使用 angular2.dev.js 和 system.js 时，TypeScripts 工作，但我无法在我的 es5 引导代码中获得 angular 2 的参考。 ng ist 不再定义，试图将 angular2/angular2 放在定义中会抛出一个错误，即公共模块尚未加载。

是否可以在 ES5 应用程序中使用 angular2 typescript 组件？

谢谢。

【问题讨论】：

标签： angular requirejs

【解决方案1】：

我必须转换 ES5 Javascript 部分才能使用 System.js。它与 RequireJs 有类似的配置，shims 必须替换为 meta。

这样我就可以加载 angular2.dev.js 和 system.js，如 angular 2 Quickstart 中所示。然后可以使用 require('angular2/angular2') 从 ES5 javascript 中获取 angular2。

【讨论】：