angular2 rc4 "XHR error (404 Not Found) loading /traceur
Question
I migrate angular2 from RC2 to RC4 and now I recive the following error:
localhost/:36 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/traceur
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:769:30)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:356:38)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:256:48)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:423:34)
Error loading http://localhost:3000/traceur
Error loading http://localhost:3000/app/main.ts
This is my systemsjs.config:
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
//map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'rxjs': 'node_modules/rxjs'
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
// No umd for router yet
packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
My package.json
{
"name": "emersy",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.4",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"jquery": "^2.2.3",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4",
"canonical-path": "0.0.2",
"http-server": "^0.9.0",
"tslint": "^3.7.4",
"lodash": "^4.11.1",
"jasmine-core": "~2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-cli": "^0.1.2",
"karma-htmlfile-reporter": "^0.2.2",
"karma-jasmine": "^0.3.8",
"protractor": "^3.3.0",
"rimraf": "^2.5.2"
}
}
My index.html:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Emersy</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&sensor=true"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="feuerwehr, firefighter, südtirol, vigil del fuoco, alto adige, intervento, emergenza, emergency, notfall, feuer, hydrant, volonteer, freiwillig, volontario, einsatzinformationsmanagement, informationsmanagement">
<meta name="description" content="Emersy. Das neue Informationsmanagement für Einsatzkräfte. Einfach, immer mit dabei, effizient">
<meta name="robots" content="index,follow">
<meta name="copyright" content="© 2015 Emersy">
<meta name="geo.region" content="IT-BZ">
<meta name="geo.position" content="46.6097665;11.192359699999997">
<meta name="ICBM" content="46, 11">
<link rel="shortcut icon" href="assets\img\favicon.ico" />
<link rel="stylesheet" href="node_modules\bootstrap\dist\css\bootstrap.css">
<link rel="stylesheet" href="assets\css\emersy.css">
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.9/cookieconsent.min.js"></script>
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/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>
<script type="text/javascript">
window.cookieconsent_options = { "message": "Wir verwenden Cookies für eine bestmögliche Nutzererfahrung. Durch die Nutzung unserer Internetseite erklären Sie sich damit einverstanden, dass wir Cookies auf Ihrem Gerät speichern.", "dismiss": "OK!", "theme": "dark-bottom", "learnMore": "Cookie-Richtlinien", "link": "#!cookie", };
</script>
</head>
<base href="/">
<body>
<noscript>
<div class="msg error siterequirements">
<h2>Voraussetzungen</h2>
<p>Achtung, es scheint als ob die Ausführung von JavaScript deaktiviert ist. Dies ist für ein einwandfreies funktionieren dieser Anwendung notwendig. Bitte überprüfen Sie Ihre Browsereinstellungen.</p>
</div>
</noscript>
<emersy-app>Loading....</emersy-app>
</body>
</html>
And my main.ts:
import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
My app.component.ts:
//Multiple lines of comments here
import { Component } from '@angular/core';
@Component({
selector: 'emersy-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
Has anyone a idea. I tried the quickstarts and they works# Thanks
2 answers
solution1
3 2016-07-26 12:03:49
in your app.component.ts remove the comments from the top ....
this will solve ur issue ... don't know the exact reason behind this as angular 2 is still not released so i hope the angular2 team will correct this...
you can check this out over here : - Angular2: error at startup of the app "http://localhost:3000/traceur 404 (Not Found)"
solution2
2 ACCPTED 2016-07-26 16:56:44
Ok found the problem. One problem was the issue mention by akshay below. And the second thing was that I have used this in the system.config.js
'app': { main: 'main.ts', defaultExtension: 'ts' }
instead of
'app': { main: 'main.js', defaultExtension: 'js' }
changed to js and now it works. strange in rc2 it works...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Getting error on loading in angular2 RC4: Error: XHR error (404 Not Found) loading
Error on angular2 : (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur
XHR error (404 Not Found) loading http://localhost:3000/traceur
Error: XHR error (404 Not Found) loading angular2/http
Angular2 upgrade to RC6, traceur not found
XHR error (404) loading angular2/forms
Angular2 + .NETCore 404 /traceur not found
XHR error (404 Not Found) in angular2/http
Angular2 Rc4 to Rc5 Migration: unable to load website (traceur/forms)
angular2 traceur not found
Related Tags