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/[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.

Thanks for the link. I don't think I'm dealing with the same problem from that post unless I'm missing something. In my case, it seems that the same JavaScript (from app.js ) works in one case, but does not work in another. I don't understand how the es6Promise object can be defined in my first setup, but not in my second. — BeetleJuice
– BeetleJuice, Commented Jul 10, 2015 at 0:43
If you're just looking to get started with Angular2 & TypeScript, there are plenty of boilerplates. I would recommend Angular2 Webpack Starter in particular. Thankfully, the setup process will become easier in the future. — shmck
– shmck, Commented Jul 10, 2015 at 6:23
@shmck That's a great resource thanks! It still leaves me confused as to why my first setup above worked but the second didn't. In my research, I found that system.js and require.js are both module loaders. So why is my required.js implementation not working? I just felt I was missing a fundamental concept so I thought I would ask here. — BeetleJuice
– BeetleJuice, Commented Jul 10, 2015 at 6:45
Actually, I'm not sure how System.js & Require.js would work together. There are two options I'm very happy with: 1) JSPM + System.js, 2) Webpack. — shmck
– shmck, Commented Jul 10, 2015 at 8:04
@Patrick I think we usually use either require.js or system.js, but not both. require is a module loader of AMD modules, and system.js is a compatibility layer (I think) for the es6-module-loader polyfill. It allows to load multiple module formats like AMD or commonjs, and have them available as ES6 modules using the new import syntax.There will be an angular command line interface that will scaffold all this in a recommended way in the future, so the best is probably take a well working boilerplate, my favorite is github.com/mgechev/angular2-seed — Angular University
– Angular University, Commented Jul 10, 2015 at 9:14

TGH · Accepted Answer · 2015-07-16 01:06:22Z

2

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.

answered Jul 16, 2015 at 1:06

TGH

39.4k13 gold badges106 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BeetleJuice Over a year ago

Thanks. I've been given great links to different starter/seed projects, and I came across the site you linked during my search! As I pointed out in my opening post, I could actually get a project to run successfully. What I was trying to understand though is why the 2nd version of my files would not work. I think I am missing an important concept and I was hoping one of the responses would help me learn it.

Ajden Towfeek · Accepted Answer · 2015-07-16 09:48:13Z

1

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.

edited Jul 16, 2015 at 9:48

answered Jul 16, 2015 at 9:31

Ajden Towfeek

3872 silver badges14 bronze badges

2 Comments

BeetleJuice Over a year ago

Thanks! this is the first response that helps me understand a bit. Does this mean that to use Angular 2 (once it's in production), we will have to run a transpiler in the browser? That seems to go against the Angular team's professed focus on speed. Secondly, your response leaves me wondering whether those of us who want to limit dependencies will have to write Angular 2 in ES5 so we don't have to rely on the System.js library. Any opinion on that?

Ajden Towfeek Over a year ago

No, of course you won't be runtime transpiling in production, either browsers will support ES6 by then or it will be build time transpiled. System.js is just a polyfill for loading ES6 modules which also won't be needed once browsers support ES6. Last but not least, please mark as accepted answer ;-)

Collectives™ on Stack Overflow

Unable to setup Angular 2 with TypeScript in Visual Studio Code

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related