如何导入角度升级适配器以获得混合应用程序？答案

【问题标题】：How to import the angular upgrade adapter to get a hybrid application?如何导入角度升级适配器以获得混合应用程序？
【发布时间】：2016-04-13 14:13:22
【问题描述】：

我查看了官方的升级指南，一些博客like this，但我不明白。我想看看 angular2 的升级模块，但是当我尝试使用 angular 升级适配器启动我的 ng1 应用程序时，一开始就失败了。

I get those errors

我的 index.html

<html>
<head>
   (...)
   <script src="node_modules/angular/angular.js"></script>

   <script src="node_modules/es6-shim/es6-shim.min.js"></script>
   <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
   <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
   <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
   <script src="node_modules/systemjs/dist/system.src.js"></script>
   <script src="node_modules/rxjs/bundles/Rx.js"></script>
   <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
</head>
<body>
    <div ng-controller="AppController">
        (...)
    </div>

<script src="app/app.module.js"></script>
<script src="app/app.controller.js"></script>

<script>
    System.import('app/main')
            .then(null, console.error.bind(console));
</script>
</body>
</html>

main.ts（来自官方升级指南）

import {UpgradeAdapter} from 'angular2/upgrade';

const upgradeAdapter = new UpgradeAdapter();
upgradeAdapter.bootstrap(document.body, ['app'], {strictDi: true});

可以这样引导

angular.bootstrap(document.body, ['app'], {strictDi: true});

如果我只是想念某种 polyfill，那就是我的 package.json：

{
 (...)
  "dependencies": {
    "angular": "^1.4.9",
    "angular2": "^2.0.0-beta.14",
    "es6-shim": "^0.35.0",
    "jquery": "^2.2.3",
    "reflect-metadata": "^0.1.2",
    "rxjs": "^5.0.0-beta.2",
    "systemjs": "^0.19.26",
    "zone.js": "^0.6.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.9",
    "typings": "^0.7.12"
  }
}

我正在使用官方 5 分钟快速入门中的 tsconfig.json 和 typings.json。

在我阅读的所有地方，这似乎都是一项微不足道的任务，但尽管我尝试了不同的方法，但没有一个对我有用。那我错过了什么？

编辑：

解决方法是如下Thierry所说的导入

    <script src="node_modules/angular2/bundles/upgrade.dev.js"></script

您可以在 his answer here 中找到更多详细信息，它关注的是同一问题（我实际上已经阅读过它，但错过了对我来说重要部分的评论）。

【问题讨论】：

标签： angularjs angular systemjs ng-upgrade

【解决方案1】：

您还需要包含upgrade js 文件：

 <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
 <script src="node_modules/systemjs/dist/system.src.js"></script>
 <script src="node_modules/rxjs/bundles/Rx.js"></script>
 <script src="node_modules/angular2/bundles/angular2.dev.js"></script>    
 <script src="node_modules/angular2/bundles/upgrade.dev.js"></script>

请参阅此 plunkr 了解更多详情：

http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview

【讨论】：

谢谢！完美的。你能解释一下为什么有两个文件（upgrade.js 和 upgrade.dev.js）吗？他们似乎有完全相同的代码。
我想知道，因为我没有缩小版本（角度 beta.14），所以两者都是一样的，但你可能会适合未来。只是想确保我不是什么东西。