wake-up-neo.com

Angular 2 - 404 Traceur nicht gefunden

Ich habe die Startanleitung befolgt und ein wenig für eine vorherige Version von Version 2 erweitert. Ich habe meine Version aktualisiert und alles entsprechend geändert .. Wenn ich den Webserver betreibe, erhalte ich jetzt den Fehler 404 für Traceur ...  Error 404 for traceur

Hier ist meine Projektstruktur:  Project structure

Relevante Dateien : 

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"
  ]
}

Ein mögliches Problem könnte sein  enter image description here Das boykottiert meinen Fortschritt.

36
Jeffrey Devloo

Das Problem war, dass einer meiner Dienste ungültig war. Ich habe den Konstruktor als eine der letzten Methoden zu Demonstrationszwecken hinzugefügt und lehnte das Laden ab.

Öffnen Sie den Fehler für diejenigen, die jemals auf diesen Fehler stoßen würden, und überprüfen Sie die referenzierten Dateien auf Fehler. Das Problem ist NICHT, dass er Traceur nicht findet, sondern dass er KEINE Datei laden kann.

22
Jeffrey Devloo

Ich habe dieses Problem erhalten, als ich dem Angular Heroes Tutorial folgte. Ursache war ein ungültiger Speicherort für den Import von angle-in-memory-web-api in der Datei systemjs.config.js. Der richtige Ort sollte sein: 

'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'

und entfernen Sie packages.angular-in-memory-web-api

siehe https://github.com/angular/quickstart/commit/541bdc5f634e1142860c56cace247234edfaf74b

30
Ashish Singh

Falls es jemandem hilft, beide Male, bei denen ich dieses Problem erlebt habe, wurde dies durch mehrzeilige Kommentare verursacht (siehe Piccis Antwort hier als Beispiel).

23
Coquelicot

Bei der Migration von RC4 zu RC6 ist der gleiche Fehler aufgetreten.

Für mein Projekt musste ich die Datei systemjs.config.js aktualisieren. Ich habe aufgehört, auf die Stammdateien index.js zu verweisen, und habe auf die Dateien core.umd.js in/bundles verwiesen.

Folgend diesem: Beispiel

6
James

In meinem Fall hatte ich nicht einmal traceur als Abhängigkeit in node_modules und die App funktionierte gut, aber plötzlich begann sie nach traceur zu fragen, nachdem sie eine Bibliothek hinzugefügt hatte, die ebenfalls traceur nicht benötigte. 

Die Lösung bestand darin, auf die neu hinzugefügten Bibliotheken aus bundles-Ordnern statt src (oder dem Standardordner) in system.config.js zu verweisen und die .umd.js-Version der Dateien anzugeben. Außerdem musste ich den Eintrag main aus dem Abschnitt packages entfernen.

Der Grund dafür ist, dass das Laden der umd-Module aus den bundle-Ordnern nicht den traceur-Transpiler auslöst, da davon ausgegangen wird, dass das Bibliotheksmodul bereits im richtigen Format vorliegt ..__ Andernfalls kann davon ausgegangen werden, dass der Code in es2015 geschrieben ist und benötigt wird Transpilation, so dass traceur aufgerufen wird. 

Ich bin auf diese traceur-Ausgabe gestoßen, nachdem ich versucht hatte, eine Verbindung mit einer Firebase-Instanz von einer perfekt laufenden App "Tour of Heroes" mit Hilfe von AngularFire2 herzustellen. Ich habe alle Antworten hier ausprobiert, aber keiner von ihnen hat geholfen, also habe ich gegoogelt, bis ich diesen github issue gefunden habe.

4
bosch

Ich habe diese Fehlermeldung erhalten, wenn das angle4 quickstart-Projekt auf asp.net mvc ausgeführt wird. Das Ändern von "es2015" in "commonjs" in tsconfig.json hat mein Problem gelöst.

3
MortezaDalil

Ich habe bis zu 3 Stunden damit verbracht, herauszufinden, was ich in meinen Codes falsch gemacht habe.

Stellen Sie daher sicher, dass Sie keinen Code außerhalb des Bereichs einer Komponente kommentieren 

3
Oyebisi Jemil

Das Problem liegt in der system.js, denke ich:

Es gibt einen Regex, der dazu dient, Import-Anweisungen zu erkennen:

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

Dieser reguläre Ausdruck erkennt Import-Anweisungen in mehrzeiligen Kommentaren und verursacht diesen schrecklichen Fehler. Ich habe hier eine Ausgabe geöffnet:

https://github.com/systemjs/systemjs/issues/1408

2
Tobias Gassmann

Aufgrund der Versionsänderung wird der Fehler 404 ausgegeben. Um dieses Problem zu beheben, müssen Sie die folgenden Änderungen in der Datei systemjs.config.js vornehmen:

  1. ersetzen Sie npm:angular-in-memory-web-api/ durch npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js. in der karte.

  2. entfernen Sie den folgenden Code in Paketen:

    'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
    }
    
2
manga

@ Coquelicot Hatte eine ähnliche Antwort, aber ich dachte, ich würde trotzdem antworten, da meine etwas mehr Details hat. Normalerweise habe ich keine Probleme mit der Verwendung von mehrzeiligen Kommentaren. Wenn ich jedoch eine import-Anweisung in einen einfüge, dann erhalte ich genau diesen Fehler. Durch einfaches Anbringen von Anführungszeichen um die Import-Anweisung wurde der Fehler für mich beseitigt. Sehr eigenartig.

2
Brett

Ich hatte das gleiche Problem und konnte keine meiner Dateien laden. Ich habe die Datei geöffnet und alles war richtig da.

Das Problem war, dass ich ein Snippet in derselben Datei auskommentiert hatte. Das Snippet enthielt dieses Schlüsselwort " export class ". Obwohl es auskommentiert wurde, wurde es von Angular analysiert.

Vergewissern Sie sich, dass in Ihren Kommentaren keine " export class " - Schlüsselwörter vorhanden sind, und löschen Sie den temporären kommentierten Code, um zu überprüfen, ob er ohne diesen Code funktioniert.

1
gradosevic

Es gibt mehrere Gründe für diesen Fehler,

1) Manchmal werden Kommentare oben in der Datei app.component.ts erwähnt
2) zeigt auf eine falsche umd-Datei
3) Wenn Sie die Version ts (TypeScript) verwenden, erwähnen Sie bitte die Transpileroptionen in der Datei config.js oder kompilieren Sie die Datei .ts mit der Transpiler-Datei in die .js-Datei.

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

Ich denke, das erste, was Sie tun sollten, ist zu prüfen, ob Sie den Traceur heruntergeladen haben! Ich habe dieses Problem gefunden und es mehrere Stunden lang gesucht. Aber ich habe festgestellt, dass sich in meinem node_modules-Verzeichnis kein Traceur befindet. Also habe ich versucht, npm install traceur zu installieren, um traceur zu installieren. Dann systemjs.config.js aktualisieren und eine Zeile wie 'traceur':'npm:traceur/bin/traceur.js' hinzufügen. Glücklicherweise wurde dieses Problem gelöst. Hoffe, das kann Ihnen helfen!

1
Steven

Ich habe das gleiche Problem, nachdem ich für diesen Fall gegoogelt habe, habe ich es gelöst, indem ich es geändert habe: Kernproblem: main: 'index.js' muss in main geändert werden: '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'
    }
}

Hinweis: Meine Karten:

map: {
    '@angular': 'node_modules/@angular',
    'rxjs': 'node_modules/rxjs'
}
1
Hieu Tran AGI

Zunächst sollten Sie Ihre TypeScript-Dateien mit kompilieren 

$ tsc 

befehl. Wenn Sie eine Anwendung außerhalb der Knotenumgebung ausführen, sollten Sie TypeScript-Dateien manuell kompilieren.

Überprüfen Sie auch tsconfig.json - ob die Skriptversion für Angular 2.0 als ES6 festgelegt ist

0

Für mich ist es passiert, dass ein Mitarbeiter eine TypeScript-Datei gelöscht hat, was bedeutet, dass eine alte * .js-Datei nicht mehr benötigt wurde (da unsere Quellcodeverwaltung diese Dateien ignoriert). Wenn der Traceur-Fehler auf eine nicht benötigte * .js-Datei verweist, löschen Sie die Datei.

0
Clay Lenhart