<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
<!-- 2. Load our 'modules' -->
<script src='app/app.component.js'></script>
<script src='app/boot.js'></script>
<!--upgrade-->
<script src="node_modules/angular2/upgrade.js"></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
without <script src="node_modules/angular2/upgrade.js"></script>
code works fine. when i include upgrade.js.it shows " Uncaught ReferenceError: require is not defined in angular2" .How can i overcome from this error.
The require
function is provided by SystemJS. You need to add it into your script
:
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
(...)
Here is a plunkr describing a working sample: https://plnkr.co/edit/JXLDFBW4A1mi9tyNHoJ3?p=preview.
Hope it helps you,
Thierry
Module should be system in tsconfig.json
{
"version": "1.0.0",
"compilerOptions": {
"target": "es5",
**"module": "system",**
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"noLib": false,
"declaration": false
},
"exclude": [
"node_modules",
"bower_components",
"jspm_packages",
"typings/main",
"typings/main.d.ts"
]
}