Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:

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.

share|improve this question
    
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. – Patrick Jul 10 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 Jul 10 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. – Patrick Jul 10 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 Jul 10 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 – jhadesdev Jul 10 at 9:14
up vote 1 down vote accepted

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.

share|improve this answer
    
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? – Patrick Jul 16 at 22:25
    
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 ;-) – Ajden Towfeek Jul 16 at 23:09

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.

share|improve this answer
    
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. – Patrick Jul 16 at 6:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.