1
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/upgrade.dev.js"></script>
<body>
<h1>Angular 1 to 2</h1>
<script>
    angular.element(document).ready(function () {
        var upgrade_1 = require('angular2/upgrade');
        var upgradeAdapter = new upgrade_1.UpgradeAdapter();
        upgradeAdapter.bootstrap(document.body, ['app'], { strictDi: true });
    });
</script>
</body>
</html>

Above is the html that I'm trying to use to setup upgrade adapter for angular2.

I'm currently just trying to load the upgrade adapter. The above code in the script tag is what the example typescript code complied to js as per angular website. https://angular.io/docs/ts/latest/guide/upgrade.html#!#bootstrapping-hybrid-angular-1-2-applications

The issue is I keep getting the following error: "'require' is undefined".

Why is systemjs not loading it up?

MichaelMarriott
  • 56
  • 1
  • 4

1 Answers1

1

Below is a great step by step on how to setup the upgrade adapter

https://medium.com/@SevenLee/configuration-tips-to-build-hybrid-angular-1-and-angular-2-project-in-real-world-230b715629dc#.g0tsratdm

My main issue was in my tsconfig file I needed to use "module": "system" instead of "module": "commonjs"

this then compiles the upgrade adapter code to:

system.register(['angular2/upgrade'], function(exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var upgrade_1;
var upgradeAdapter;
return {
    setters:[
        function (upgrade_1_1) {
            upgrade_1 = upgrade_1_1;
        }],
    execute: function() {
        upgradeAdapter = new upgrade_1.UpgradeAdapter();
        upgradeAdapter.bootstrap(document.body, ['app'], { strictDi: true });
    }
}
});
MichaelMarriott
  • 56
  • 1
  • 4