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.
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
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).
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.
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
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.
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
I got this error when run angular4 quickstart project on asp.net mvc. changing "es2015" to "commonjs" inside tsconfig.json solved my problem.
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:
@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.
Because of version change it throws 404 error. to resolve this issue we need to do below modifications in systemjs.config.js file:
replace
npm:angular-in-memory-web-api/withnpm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js. in map.remove below code in packages:
'angular-in-memory-web-api': { main: './index.js', defaultExtension: 'js' }
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'
}
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.
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);
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 !
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
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.
I had this exact issue which was resolved by correcting the name of a file.
来源：https://stackoverflow.com/questions/37022526/angular-2-404-traceur-not-found