Как импортировать адаптер обновления angular, чтобы получить гибридное приложение?

Я просмотрел официальное руководство по обновлению, некоторые блоги вот так, но я не понимаю. Я хотел взглянуть на модуль обновления angular2, но потерпел неудачу в самом начале, когда попытался загрузить свое приложение ng1 с помощью адаптера обновления angular для запуска.

Я получаю эти ошибки

Мой 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});

если я пропущу только какой-то полифилл, вот мой 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"
  }
}

Я использую tsconfig.json и typings.json из официального 5-минутного руководства.

Везде, где я читал, кажется, что это тривиальная задача, но, хотя я пробовал разные подходы, ни один из них не работал у меня. Итак, что мне не хватает?

ИЗМЕНИТЬ:

Решение, как сказал Тьерри ниже, импортирует

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

Вы можете найти более подробную информацию в его ответе здесь, который посвящен той же проблеме (я я на самом деле читал его заранее, но пропустил комментарий с важной для меня частью).


angular angularjs ng-upgrade systemjs
person jowey    schedule 13.04.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам также необходимо включить файл 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 для более подробной информации:

person Thierry Templier    schedule 13.04.2016
comment
Спасибо, это оно! Идеальный. Не могли бы вы объяснить, почему файлов два (upgrade.js и upgrade.dev.js)? У них вроде одинаковый код. - person jowey; 14.04.2016
comment
Мне было интересно, потому что у меня нет уменьшенной версии (угловая бета.14), так что обе они одинаковы, но вы, вероятно, будете правы в будущем. Просто хотел убедиться, что я не что-то. - person jowey; 14.04.2016