1

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

我得到这些错误

我的 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

您可以在他的答案中找到更多详细信息,该答案侧重于同一问题(我实际上已经阅读过它,但错过了对我来说重要部分的评论)。

4

1 回答 1

2

您还需要包含upgradejs 文件:

 <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:

于 2016-04-13T17:20:11.687 回答