Unable to setup Angular 2 with TypeScript in Visual Studio Code

By : Patrick
Source: Stackoverflow.com
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/[email protected]/traceur-runtime.js"></script>
    <script src="https://jspm.io/[email protected]"></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
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.

By : Patrick


Answers

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.



This video can help you solving your question :)
By: admin