36

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... Error 404 for traceur

Here is my project structure: 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 enter image description here this is boycotting my progress.

Jeffrey Devloo
  • 1,406
  • 1
  • 11
  • 20

17 Answers17

30

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

muttonUp
  • 6,351
  • 2
  • 42
  • 54
Ashish Singh
  • 301
  • 3
  • 2
  • Thanks, this was my issue was well! – Scott Wegner Oct 25 '16 at 20:12
  • 1
    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! – Simba Nov 01 '16 at 16:40
  • One missing important thing is you need to adjust the import statement in app.module.ts `import { InMemoryWebApiModule } from 'angular-in-memory-web-api';` – e-cloud Nov 02 '16 at 19:26
23

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).

Community
  • 1
  • 1
Coquelicot
  • 8,775
  • 6
  • 33
  • 37
22

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.

Jeffrey Devloo
  • 1,406
  • 1
  • 11
  • 20
  • still having this issue and can't fix it. any idea? :/ http://stackoverflow.com/questions/38954205/migrating-from-router-deprecated-2-0-0-rc-2-to-router3-0-0-rc-1 – phip1611 Aug 15 '16 at 11:43
  • 10
    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? – pietro909 Sep 17 '16 at 16:51
  • 1
    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. – Bryan Oct 27 '16 at 02:59
  • Thanks! My issue was the file was in `.js` extension instead of `.ts` (facepalm) – Taku Jan 10 '17 at 14:38
  • 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 – user3728728 Feb 19 '17 at 17:29
  • @Brett Thank you, thank you, thank you! Set my TS compiler to no longer emit comments and it fixed my issue. – gravidThoughts Mar 10 '17 at 19:04
6

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

James
  • 2,823
  • 22
  • 17
4

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.

bosch
  • 1,089
  • 11
  • 16
3

I spent up to 3 hours trying to figure out what i did wrong in my codes, i was able to find out that "Commenting a section of my codes caused the problem".

So kindly make sure that you are not commenting any of your codes outside the scope of a component

Jemil Oyebisi
  • 633
  • 8
  • 10
3

I got this error when run angular4 quickstart project on asp.net mvc. changing "es2015" to "commonjs" inside tsconfig.json solved my problem.

MortezaDalil
  • 352
  • 1
  • 2
  • 16
2

The problem is within the system.js I think:

There is a regex, which is used to detect import-statements:

var esmRegEx = /(^\s*|[}\);\n]\s*)(import\s*(['"]|(\*\s+as\s+)?[^"'\(\)\n;]+\s*from\s*['"]|\{)|export\s+\*\s+from\s+["']|export\s*(\{|default|function|class|var|const|let|async\s+function))/; 

This regex will detect import-statements within multiline-comments and cause this horrible error. I have opened an issue here:

https://github.com/systemjs/systemjs/issues/1408

Tobias Gassmann
  • 11,399
  • 15
  • 58
  • 92
2

@Coquelicot Gave a similar answer, but I thought I'd answer anyway since mine has a little bit more detail. I don't normally have any issues with using multi-line comments, but if I put an import statement inside of one then I get this exact error. Simply putting quotes around the import statement got rid of the error for me. Very strange.

Bryan
  • 2,951
  • 11
  • 59
  • 101
2

Because of version change it throws 404 error. to resolve this issue we need to do below modifications in systemjs.config.js file:

  1. replace npm:angular-in-memory-web-api/ with npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js. in map.

  2. remove below code in packages:

    'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
    }
    
YakovL
  • 7,557
  • 12
  • 62
  • 102
manga
  • 21
  • 1
2

I think the first thing you should do is to check whether you have download the traceur!I have met this problems and it token me several hours to search.But I found there is not a traceur in my node_modules directory. So I have try npm install traceur to install traceur.Then update the systemjs.config.js,adding a line like 'traceur':'npm:traceur/bin/traceur.js'. Fortunately,this problem was resolved.Hope this can help you !

Mehdi Dehghani
  • 10,970
  • 6
  • 59
  • 64
Steven
  • 21
  • 1
1

I have the same issue, after I googled for this case, then I solved it by changed: Core issue: main: 'index.js' must be changed to main: 'bundles/core.umd.js'

packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

=> main: 'bundles/core.umd.js'

packages: {
    '@angular/core': {
        main: 'bundles/core.umd.js'
    },
    '@angular/compiler': {
        main: 'bundles/compiler.umd.js'
    },
    '@angular/common': {
        main: 'bundles/common.umd.js'
    },
    '@angular/platform-browser': {
        main: 'bundles/platform-browser.umd.js'
    },
    '@angular/platform-browser-dynamic': {
        main: 'bundles/platform-browser-dynamic.umd.js'
    },
    '@angular/http': {
        main: 'bundles/http.umd.js'
    }
}

Note: My maps:

map: {
    '@angular': 'node_modules/@angular',
    'rxjs': 'node_modules/rxjs'
}
Hieu Tran AGI
  • 849
  • 9
  • 9
1

I've had the same issue and it couldn't load one of my files. I opened the file and everything was correctly there.

The problem was that I've had a snippet commented out in the same file. Snippet contained this keyword "export class". Even though it was commented out, it was parsed by Angular.

Make sure that you don't have "export class" keywords in your comments, and delete the temporary commented code just to check if it works without it.

gradosevic
  • 4,809
  • 2
  • 36
  • 51
  • Happened to me too. Weird thing is that it happened only for code commented by /* */ and for import statements as well – Eitan Peer Dec 07 '16 at 11:04
1

There are multiple reason behind this error,

1)Sometimes comments mentioned on top of app.component.ts file
2)pointing to incorrect umd file
3)If you are using ts(Typescript) version, please mention the transpiler options in config.js file as below or compile your all .ts file to .js file using transpiler and then reference .js file in code:

(function (global) {
    System.config({
        transpiler: 'ts',
        typescriptOptions: {
          tsconfig: true
        },
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
            'angular2' : ''
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main',
                defaultExtension: 'ts'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);
0

At first, you should compile your TypeScript files with

$ tsc 

command. If you are running application outside the node envirnoment, you should compile TypeScript files manually.

Also check tsconfig.json - if script version is set as ES6 for Angular 2.0

0

For me, what happened is a co-worker deleted a TypeScript file, which meant I had an old *.js file no longer needed (since our source control ignores these files). If the traceur error references a *.js file you don't need, delete the file.

Clay Lenhart
  • 1,597
  • 15
  • 17
-1

I had this exact issue which was resolved by correcting the name of a file.

Mosby42
  • 130
  • 1
  • 5