How to import the angular upgrade adapter to get a hybrid application?
Question
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.
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).
1 answers
solution1
2 ACCPTED 2016-04-13 17:20:11
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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.