Unable to setup Angular 2 with TypeScript in Visual Studio Code
Question
I'm going nuts here. I am new to JavaScript module loading and new to Angular and new to TypeScript and I can't figure out why my setup is not working. Please help!
I have followed the quickstart instructions from the Angular 2 site and have been able to get a running app. Below are the key files
index.html
<html>
<head>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="js/angular2.dev.js"></script>
</head>
<body>
<my-app></my-app>
<script>System.import('./js/app');</script>
</body>
</html>
js/app.js is the main component and things work, but they are very slow. I am now trying to get everything working on my local machine and to load modules using AMD (RequireJS). Here is how the new index looks:
index.html (2nd version)
<html>
<head>
<script data-main="js/launch" src="js/require.js"></script>
</head>
<body>
<my-app></my-app>
</body>
</html>
launch.js (in same folder as app.js and require.js )
define(["require", "exports", "angular2.dev", "app"],
function (require, exports, angular2, app) {});
The app fails to run and the browser throws the following errors:
1) Error: Script error for angular2/angular2. http://requirejs.org/docs/errors.html#scripterror Error: Script error for angular2/angular2. http://requirejs.org/docs/errors.html#scripterror
2) TypeError: es6Promise is undefined
I have tried placing es6-promise.js (from here ) in the js/ folder and changing launch.js to:
launch.js (2nd version)
define(["require", "exports", "es6-promise", "angular2.dev", "app"],
function (require, exports, es6Promise, angular2, app) {
});
...but I get the same 2 errors. I am compiling TypeScript within Visual Basic Code with the settings below:
tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "amd",
"sourceMap": false,
"removeComments": true,
"noImplicitAny": false,
"emitDecoratorMetadata":true,
"outDir": "./js",
"out": "app.js"
},
"files": [
"ts/app.ts"
]
}
What am I missing? why is es6Promise not defined? please help.
2 answers
solution1
2 2015-07-16 01:06:22
Here is a complete starter project with a few samples. Live demo as well. http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples
Hopefully this will help you get started.
solution2
1 ACCPTED 2015-07-16 09:31:06
Well that just won't work. Angular 2 loads slow because it needs to be runtime transpiled because it uses es6 features. And for runtime transpiration you'll need to include traceur which will provide the polyfill for es6-promise.
That's why it doesn't work even though that you've build time transpiled your app.ts with typescript.
Also require.js doesn't know how to load es6 modules on its own you still need system.js for the es6 module loader polyfill.
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.