Angular 2 - 404 traceur not found

30,409

Solution 1

The issue was that one of my services was invalid. I've added the constructor as one of the last methods for demonstrating purposes and it refused to load.

So for those that would ever encounter this error, open up the error and check the referenced files for errors. The issue is NOT that he doesn't find traceur but it is that he CANNOT load a file.

Solution 2

I got this issue when following the Angular Heroes tutorial. It was caused by invalid location of the angular-in-memory-web-api import, in the systemjs.config.js file. The correct location should be :

'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'

and remove packages.angular-in-memory-web-api

see https://github.com/angular/quickstart/commit/541bdc5f634e1142860c56cace247234edfaf74b

Solution 3

In case it helps anyone, both times I've experienced this issue, it's been caused by multiline comments (see Picci's answer here for an example).

Solution 4

I experienced this same error while migrating from RC4 to RC6.

For my project, I had to update the systemjs.config.js file. I stopped referencing the root index.js files, and started referencing the core.umd.js files in /bundles.

Following this: example

Solution 5

In my case I didn't even had traceur as a dependency in node_modules and the app was working fine but all of a sudden started to ask for traceur after adding a library that didn't need traceur either.

The solution was to reference the newly added libraries from bundles folders instead of src (or default folder) in system.config.js and specifying the .umd.js version of files. Also, I had to remove the main entry from the packages section.

The reason behind is that loading the umd modules from the bundle folders does not trigger the traceur transpiler as it assumes the library module is already in the correct format. Otherwise, it may assume that the code is written in es2015 and it needs transpilation so it invokes traceur.

I came across this traceur issue after trying to connect to a Firebase instance from a perfectly runnable "Tour of Heroes" app with the aid of AngularFire2. I tried all the answers here but none of them helped, so I googled until I found this github issue.

View more solutions

30,409

Author by

Jeffrey Devloo

A passionate student driven by the will to master all technologies and skills.

Updated on June 21, 2020

Comments

Jeffrey Devloo almost 4 years

I've followed the starting guide and expanded a little upon for a previous angular 2 version. I've updated my revision and changed everything accordingly. When I am running the web server I now receive the error 404 for traceur...

Here is my project structure:

Relevant files :

Index.html:

    <html>
<head>
    <title>Kinepolis HR-tool</title>

    <base href="./">

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Kinepolis HR tool">
    <meta name="author" content="Jeffrey Devloo!">

    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
    <!-- CSS for PrimeUI -->

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err){ console.error(err);  });
    </script>
</head>

<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>

</html>

systemjs.config.js

(function(global) {

    // map tells the System loader where to look for things
    var map = {
        'app':                        'app', // 'dist',
        'rxjs':                       'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '@angular':                   'node_modules/@angular',
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { defaultExtension: 'js' },
    };

    var packageNames = [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/router-deprecated',
        '@angular/testing',
        '@angular/upgrade',
    ];

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function(pkgName) {
        packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });

    var config = {
        map: map,
        packages: packages
    }

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);

})(this);

tsconfig.json

    {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

A possible issue could be this is boycotting my progress.

phip1611 almost 8 years

still having this issue and can't fix it. any idea? :/ stackoverflow.com/questions/38954205/…
CJ Alpha almost 8 years

Oh wow, this is insane! I was breaking my head over this for like 2 hours, and multi-line comments were the issue.
aaron-bond almost 8 years

This was what I'd done too. can't believe that was the cause. How are you supposed to tell that's the case with an error like that :o Thanks!
pietro909 over 7 years

this is so hateful: had this error several times and is ALWAYS related to something different than traceur. What's wrong with SystemJS? Would be that hard to get a proper trace or debug?
Aleksandr Barmin over 7 years

Yes, it is my mistake.
Scott Wegner over 7 years

Thanks, this was my issue was well!
Bryan over 7 years

I got the same error by putting an import statement inside of a multi-lined comment. Simply adding quotes around that import statement fixed the problem. Very strange.
Simba over 7 years

That solve my problem. Thank you. But... uh, that's a really obscure bug for a training exercise -- as an Angular beginner, there is no way I would have found that for myself. Would you be able to expand your answer to tell us how you found it, and why it would have been this way in the first place? Thanks again for the answer; I really appreciate it!
e-cloud over 7 years

One missing important thing is you need to adjust the import statement in app.module.ts import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
Eitan Peer over 7 years

Happened to me too. Weird thing is that it happened only for code commented by /* */ and for import statements as well
Taku over 7 years

Thanks! My issue was the file was in .js extension instead of .ts (facepalm)
user3728728 over 7 years

This is amazing, I still have this problem after hours of searching, none of the above solution solved the problem, I thought that Angular guys finished with all those unexplain errors. This is a very bad news that one error, can not say what exactly is the problem, and how to fix it, Instead, you have to guess and search many solution, very sad
gravidThoughts about 7 years

@Brett Thank you, thank you, thank you! Set my TS compiler to no longer emit comments and it fixed my issue.
gravidThoughts about 7 years

Surreal, certain to be a head scratcher for many a developer years later.
JDL about 7 years

Thanks ! Save me 1h :)
Jemil Oyebisi about 7 years

@JDL, i'm glad it helped you
Tod about 7 years

Thank you! This was exactly my problem too.
Zsoca almost 7 years

Thanks man you saved my life. I just went to crazy, because of this freaking error...