angular2 rc4＆＃34; XHR错误（404 Not Found）loading / traceur

时间：2016-07-26 09:34:21

标签： angular

我将angular2从RC2迁移到RC4，现在我发现了以下错误：

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

这是我的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);

我的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"
  }
}

我的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>

我的主要内容：

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

我的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 { }

My folder structure

有没有人有想法。我尝试了快速入门，他们的作品＃ 感谢

2 个答案:

答案 0 :(得分：3)

app.component.ts中的

从顶部删除评论....

这将解决你的问题...不知道背后的确切原因，因为角度2仍未释放，所以我希望angular2团队能够纠正这个......

你可以在这里查看： - Angular2: error at startup of the app "http://localhost:3000/traceur 404 (Not Found)"

答案 1 :(得分：2)

好的发现了问题。一个问题是下面的akshay提到的问题。第二件事是我在system.config.js

中使用过它 
'app': { main: 'main.ts', defaultExtension: 'ts' }

而不是

'app': { main: 'main.js', defaultExtension: 'js' }

更改为js，现在可以使用了。在rc2中奇怪的是它有效......

相关问题
最新问题