Angular 2 - 404 traceur not found

Question

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 runnin

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

Answer 2

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'
}

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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