Menu
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.
700
You just built your first application using Angular 2 (or 4) and the tester comes to you saying that when he refreshes the page using the browser he get a 404 error. How it comes? Angular doesn’t use anymore the # in the URL. When you refresh the page using the URL showed by Angular the web server doesn’t find any valid match.
- GeeksforGeeks How to setup 404 page in angular routing ? To set up a 404 page in the angular routing, we have to first create a component to display whenever a 404 error occurred. In the following approach, we will create a simple angular component called PagenotfoundComponent .
Angular doesn’t use anymore the # in the URL. When you refresh the page using the URL showed by Angular the web server doesn’t find any valid match. If you are developing your application with Java EE or Spring the solution is very simple and you don’t have to implement code in your frontend.
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 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
178
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).
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.
22
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
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
