36 votes

Angulaire 2 - 404 traceur non trouvé

J'ai suivi le guide de démarrage et élargi un peu lors d'une précédente angulaire 2 version. J'ai mis à jour mon révision et tout a changé en conséquence. Quand je suis en cours d'exécution du serveur web j'ai maintenant l'erreur 404 pour traceur... Error 404 for traceur

Voici mon projet de structure: Project structure

Fichiers pertinents :

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

Un problème possible pourrait être enter image description here c'est le boycott de mes progrès.

30voto

Ashish Singh Points 301

J'ai eu ce problème en suivant le tutoriel Angular Heroes. Cela était dû à l'emplacement non valide de l'importation angular-in-memory-web-api, dans le fichier systemjs.config.js . Le bon emplacement devrait être:

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

et supprimez packages.angular-in-memory-web-api

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

23voto

Coquelicot Points 1251

Au cas où cela aiderait quelqu'un, à chaque fois que je rencontrais ce problème, cela était dû à des commentaires multilignes (voir la réponse de Picci ici pour un exemple).

22voto

Jeffrey Devloo Points 582

Le problème était que l'un de mes services était invalide. J'ai ajouté le constructeur comme l'une des dernières méthodes de démonstration et il a refusé de charger.

Donc, pour ceux qui rencontreraient jamais cette erreur, ouvrez l'erreur et vérifiez les fichiers référencés pour les erreurs. Le problème n’est PAS qu’il ne trouve pas traceur mais bien qu’il NE PEUT PAS charger de fichier.

6voto

James Points 1299

J'ai rencontré cette même erreur lors de la migration de RC4 à RC6.

Pour mon projet, j'ai dû mettre à jour le fichier systemjs.config.js. J'ai arrêté de référencer les fichiers racine index.js et commencé à référencer les fichiers core.umd.js dans / bundles.

Suite à ceci: exemple

4voto

bosch Points 954

Dans mon cas, je n'ai même pas eu traceur comme une dépendance en node_modules et l'application fonctionnait bien, mais tout d'un coup commencé à demander l' traceur après l'ajout d'une bibliothèque qui n'a pas besoin d' traceur soit.

La solution était de référence nouvellement ajouté, les bibliothèques de bundles dossiers au lieu de src (ou dossier par défaut), en system.config.js , et en précisant l' .umd.js version de fichiers. Aussi, j'ai dû enlever l' main entrée de l' packages section.

La raison est que le chargement de l' umd modules à partir de l' bundle des dossiers ne déclenche pas l' traceur transpiler, car elle suppose le module bibliothèque est déjà dans le bon format. Sinon, on peut supposer que le code est écrit en es2015 et il a besoin de transpilation de sorte qu'il invoque traceur.

Je suis tombé sur cette traceur problème après avoir essayé de se connecter à un Firebase instance à partir d'un parfaitement praticable "Tour des Héros" app à l'aide d' AngularFire2. J'ai essayé toutes les réponses ici, mais aucun d'entre eux ont aidé, j'ai donc googlé jusqu'à ce que j'ai trouvé cette github question.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X