Search code examples
angularjsangularsystemjsng-upgrade

How to import the angular upgrade adapter to get a hybrid application?

I looked at at the official upgrade guide, some blogs like this but I don't get it. I wanted to take a look at the upgrade module of angular2, but failed right at the beginning when I tried to bootstrap my ng1 application with the angular upgrade adapter to start.

I get those errors

My 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 (from the official upgrade guide)

import {UpgradeAdapter} from 'angular2/upgrade';

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

it's fine to bootstrap like this

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

if I only miss some sort of polyfill here is my 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"
  }
}

I'm using the tsconfig.json and typings.json from the official 5min quickstart.

Everywhere I read it seems that this is a trivial task, but although I tried different approches none worked for me. So what am I missing?

EDIT:

The solution is as Thierry stated below to import 

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

You can find more details in his answer here which focuses on the same problem (I've actually read it bevore but missed the comment with the important part for me).

Solution

  • You also need to include the upgrade js file:

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

    See this plunkr for more details: