Angular 2 alpha 44 -- does it require traceur.js?

1,611 views
Skip to first unread message

Vern Jensen

unread,
Oct 19, 2015, 10:37:27 PM10/19/15
to AngularJS
I'm attempting to run Angular 2 alpha 44. I'm having a console error that traceur.js cannot be found. I was under the impression (thanks Eric Martinez for all your help!) that Angular 2 does not need traceur anymore, as of alpha 42. Then why does my alpha 44 app give this console error?

My index.html:

<html>
<head>
    <title>Angular 2 QuickStart</title>
    <script src="/node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="/node_modules/systemjs/dist/system.js"></script>
    <script src="/node_modules/angular2/bundles/angular2.min.js"></script>
    <script src="/node_modules/angular2/bundles/router.dev.min.js"></script>


    <script>
        System.defaultJSExtensions = true;


        System.config({
            packages: {
                'app': { defaultExtension: 'js' }
            }
        });
        System.import('app');
    </script>
</head>
<body>
    <my-app>Vern is loading...</my-app>
</body>
</html>



My package.json (for npm):

{
  "name": "TestApp",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
 "tsc": "tsc -p src -w",
 "start": "live-server --open=./"
},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular2": ">=2.0.0-alpha.44",
    "systemjs": "=0.18.17",
"es6-shim": ">=0.33.6"
  },
  "devDependencies": {
    "live-server": "^0.8.1",
    "typescript": "^1.6.2"
  }
}


My folder structure (all at same level):

node_modules
app.ts
index.html
package.json


Yes I know, it's not structured in src/app the way the tutorial has it...

Console error:

system.src.js:4208 GET http://localhost:63977/traceur.js 404 (Not Found)M @ system.src.js:4208(anonymous function) @ system.src.js:4208T @ angular2.min.js:1W @ angular2.min.js:1o.fetch @ system.src.js:4208(anonymous function) @ system.src.js:4208(anonymous function) @ system.src.js:4208(anonymous function) @ system.src.js:4208(anonymous function) @ system.src.js:4208(anonymous function) @ system.src.js:4208(anonymous function) @ system.src.js:4208(anonymous function) @ system.src.js:4208(anonymous function) @ system.src.js:4208n.run @ angular2.min.js:1(anonymous function) @ angular2.min.js:1k @ angular2.min.js:1A @ angular2.min.js:1I @ angular2.min.js:1(anonymous function) @ angular2.min.js:1n.run @ angular2.min.js:1(anonymous function) @ angular2.min.js:1h @ angular2.min.js:1

Any idea why I'm getting this?

Vern Jensen

unread,
Oct 19, 2015, 10:38:57 PM10/19/15
to AngularJS
Also note that I'm including system.js in index.html... so where is system.src.js coming from? (angular2.min.js is including it?)

Vern Jensen

unread,
Oct 19, 2015, 10:46:28 PM10/19/15
to AngularJS
Update: if I replace this:
  <script src="/node_modules/systemjs/dist/system.js"></script>
with this:
  <script src="/node_modules/systemjs/dist/system-csp-production.js"></script>

then my runtime console error changes to:
app.ts:1 Uncaught ReferenceError: require is not defined

That would seem to be an es6 issue. But I'm including es6-shim.min.js. And my .ts files are configured to compile to ECMAScript 5 using CommonJS Module format.  I'm still wrapping my head around all of this... so could be doing something stupid easily. Ideas?

Eric Martinez

unread,
Oct 20, 2015, 8:26:37 AM10/20/15
to AngularJS
Hey Vern,

can you create a repo so I can clone it? I can't reproduce this. Everything is working fine for me.

Pawel Kozlowski

unread,
Oct 20, 2015, 8:35:00 AM10/20/15
to ang...@googlegroups.com
See https://github.com/pkozlowski-opensource/ng2-play/issues/31

Cheers,
Pawel
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+u...@googlegroups.com.
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.



--
AngularJS book:
http://www.packtpub.com/angularjs-web-application-development/book
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

Vern Jensen

unread,
Oct 20, 2015, 4:28:27 PM10/20/15
to AngularJS
Hey Vern,

can you create a repo so I can clone it? I can't reproduce this. Everything is working fine for me.

Thanks Eric. Would a zip be okay?


Ultimately I want to get the router working, but for now that (and including hello.js) is commented out.

It's set up to use Visual Studio, but you can get the same error by cd'ing to the root directory and doing "npm start" (based on the new tutorial -- see package.json for what npm start triggers. You'll need to have installed live-server via npm, which you'll have done if you went through the new Angular 2 5-minute quickstart.)

Again, my goal is to have everything self-contained: no references to any files hosted online. (Any required libraries in node_modules.)

When you do "npm start" you should get a note about "require is not defined" in app.ts line 1.

Vern Jensen

unread,
Oct 20, 2015, 4:29:27 PM10/20/15
to AngularJS
Pawel -- thanks, but yes, it already uses es6-shim.min.js.

Vern Jensen

unread,
Oct 20, 2015, 4:33:26 PM10/20/15
to AngularJS
Eric -- also, you can see the other error about traceur if you change index.html to use the other system.js, like so:

    <script src="/node_modules/systemjs/dist/system.js"></script>
<!--
    <script src="/node_modules/systemjs/dist/system-csp-production.js"></script>
   -->

BTW I'm using Chrome, almost the very latest version.

Eric Martinez

unread,
Oct 20, 2015, 7:28:30 PM10/20/15
to AngularJS
Vern,

I found what caused the problem. The comments... hard to believe, right? Yeah... that's it.

You have this comment 

/*
import {Hello} from 'hello';


import {
  ROUTER_PROVIDERS,
  ROUTER_DIRECTIVES,
  ROUTER_PRIMARY_COMPONENT,
  RouteConfig,
  RouterLink,
  RouterOutlet,
  Route,
  LocationStrategy,
  HashLocationStrategy
} from 'angular2/router';
*/

If you remove that comment, it will work (you still have a lot of issues, but they are trackable and easy to fix). If you don't want to remove the comments from your TS files, in your tsconfig.json file set "removeComments" to true.

I had issues like this in my beginnings with angular2, so I stopped using comments like that. I wish I could tell you exactly why this happen but I can't, I'm a beginner like anyone else. I hope this at least helps you a little bit.

Vern Jensen

unread,
Oct 20, 2015, 8:06:10 PM10/20/15
to AngularJS
Once again, you are a lifesaver Eric! *Comments* Who would've guessed?
Reply all
Reply to author
Forward
0 new messages