web-dev-qa-db-fra.com

Angulaire 2 - 404 traceur non trouvé

J'ai suivi le guide de départ et développé un peu pour une version antérieure angulaire 2. J'ai mis à jour ma révision et tout changé en conséquence . Lorsque j'utilise le serveur Web, je reçois maintenant l'erreur 404 pour traceur ...  Error 404 for traceur

Voici la structure de mon projet:  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 ceci boycotte mes progrès.

angularhttp-status-code-404
36
Jeffrey Devloo

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 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 un fichier.

22
Jeffrey Devloo

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

30
Ashish Singh

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).

23
Coquelicot

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

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

Suite à ceci: exemple

6
James

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

La solution consistait à référencer les bibliothèques nouvellement ajoutées à partir des dossiers bundles au lieu de src (ou du dossier par défaut) dans system.config.js et en spécifiant la version .umd.js des fichiers. De plus, j'ai dû supprimer l'entrée main de la section packages.

La raison derrière cela est que le chargement des modules umd à partir des dossiers bundle ne déclenche pas le transpiler traceur car il suppose que le module de bibliothèque est déjà dans le format correct . Sinon, cela peut supposer que le code est écrit en es2015 et qu'il a besoin la transpilation appelle donc traceur. 

J'ai rencontré ce problème traceur après une tentative de connexion à une instance Firebase à partir d'une application parfaitement exécutable "Tour of Heroes" à l'aide de AngularFire2. J'ai essayé toutes les réponses ici mais aucune d'entre elles n'a aidé, alors j'ai cherché sur Google jusqu'à ce que je trouve ce github issue .

4
bosch

J'ai eu cette erreur lors de l'exécution angular4 quickstart project sur asp.net mvc. changer "es2015" en "commonjs" dans tsconfig.json a résolu mon problème.

3
MortezaDalil

J'ai passé jusqu'à trois heures à essayer de comprendre ce que j'avais mal fait dans mes codes. J'ai pu découvrir que "commenter une section de mes codes était la cause du problème".

Veillez donc à ne commenter aucun de vos codes en dehors de la portée d'un composant. 

3
Oyebisi Jemil

Le problème est dans le system.js je pense:

Il y a un regex, qui est utilisé pour détecter les instructions d'import:

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

Cette expression régulière détectera les instructions d'importation dans les commentaires multilignes et causera cette horrible erreur. J'ai ouvert un problème ici:

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

2
Tobias Gassmann

En raison de la modification de version, une erreur 404 est générée . Pour résoudre ce problème, nous devons procéder aux modifications ci-dessous dans le fichier systemjs.config.js:

  1. remplacez npm:angular-in-memory-web-api/ par npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js. dans la carte.

  2. supprimer le code ci-dessous dans les packages:

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

@ Coquelicot a donné une réponse similaire, mais j'ai pensé que je répondrais quand même car le mien a un peu plus de détails. Normalement, je n'ai aucun problème à utiliser des commentaires multilignes, mais si je mets une déclaration d'importation dans une déclaration, j'obtiens cette erreur exacte. Le simple fait de mettre des guillemets autour de la déclaration d'importation a éliminé l'erreur pour moi. Très étrange.

2
Brett

J'ai eu le même problème et il n'a pas pu charger l'un de mes fichiers. J'ai ouvert le fichier et tout y était correctement.

Le problème était que j'ai eu un extrait commenté dans le même fichier. Snippet contient ce mot-clé " export class ". Même s'il a été commenté, il a été analysé par Angular.

Assurez-vous de ne pas avoir de mots clés " export class " dans vos commentaires, puis supprimez le code commenté temporaire pour vérifier s'il fonctionne correctement.

1
gradosevic

Il y a plusieurs raisons derrière cette erreur,

1) Parfois, les commentaires mentionnés au-dessus du fichier app.component.ts
2) pointant vers un fichier umd incorrect
3) Si vous utilisez la version ts (TypeScript), veuillez mentionner les options de transpiler dans le fichier config.js ci-dessous ou compiler votre fichier all

(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
dharmesh kaklotar

Je pense que la première chose à faire est de vérifier si vous avez bien téléchargé le logiciel traceur! J'ai rencontré ce problème et cela m'a pris plusieurs heures à rechercher.Mais j'ai trouvé qu'il n'y a pas de traceur dans mon répertoire node_modules. J'ai donc essayé npm install traceur pour installer traceur. Ensuite, mettez à jour le systemjs.config.js, en ajoutant une ligne du type 'traceur':'npm:traceur/bin/traceur.js'. Heureusement, ce problème a été résolu. J'espère que cela pourra vous aider!

1
Steven

Au début, vous devriez compiler vos fichiers TypeScript avec 

$ tsc

commander. Si vous exécutez une application en dehors de l'environnement du noeud, vous devez compiler les fichiers TypeScript manuellement.

Vérifiez également tsconfig.json - si la version du script est définie sur ES6 pour Angular 2.0

0
Aleksandr Barmin

Pour moi, un collègue a supprimé un fichier TypeScript, ce qui signifie que je n'avais plus besoin d'un ancien fichier * .js (car notre contrôle source ignore ces fichiers). Si l'erreur traceur fait référence à un fichier * .js dont vous n'avez pas besoin, supprimez le fichier.

0
Clay Lenhart