Angular2: erreur lors du démarrage de l'application “http://localhost:3000/traceur 404 (introuvable)”
J'ai une image de marque nouvelle installation Angulaire (rc1).
Je pense que je viens de créer une habitude " Bonjour, quelque chose de l'app, mais, lorsque je lance l'application depuis le navigateur, j'obtiens l'erreur suivante dans le navigateur de la console
Quelqu'un peut-il m'expliquer ce que j'ai fait de mal? Je dois avoir quelque chose de mal, étant donné que d'autres, beaucoup plus complexe, les choses fonctionnent parfaitement avec la rc1 sur ma machine.
Merci d'avance
app.composante.ts
import { Component } from '@angular/core';
@Component({
selector: 'm2t-app',
template: `
Hello something
`,
directives: []
})
export class AppComponent {
}
principal.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
index.html
<html>
<head>
<title>MEAN2 Training Class</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles.css">
<!-- 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>
<m2t-app>Loading...</m2t-app>
</body>
</html>
systemjs.confing.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);
- Sans code, c'est presque impossible
- J'ai ajouté de l'app.composante.ts, principal.ts et index.html dans ma question. systemjs.config.js est exactement le même que dans la page de démarrage Rapide. Thx
- faire une démo complète dans
http://plnkr.copour d'autres, de vérifier toutes les choses s'il vous plaît. - Quel est le contenu de votre
systemjs.config.jsfichier? Merci! - systemjs.config.js ajouté Thx
Vous devez vous connecter pour publier un commentaire.
J'ai trouvé la raison. Au début de l'application.composante.ts, j'avais commenté une version antérieure de la bête AppComponent, quelque chose comme
Supprimant le commentaire au début du fichier a résolu le problème.
/** */c'est la syntaxe pour bloquer les commentaires pour TS (VS Code) et de ne pas/* */. Toutefois, mes erreurs persistantes à l'aide de la ci-dessus.J'ai trouvé que cette erreur apparaît dans le commentaire sur plusieurs lignes avec l'import/export des déclarations. Nous allons corriger l'erreur si nous transformons l'instruction à une mauvaise forme ou de mettre l'instruction dans un singleline commentaire.
Exemple:
Pour d'autres personnes à qui ce message d'erreur et ne pas avoir de commentaires dans le code. J'ai rencontré cette erreur et de les résoudre cette double vérification de mon systemjs.config.js fichier.
Si vous n'avez pas ce problème exact dans votre systemjs.config.js fichier, il ne démontrent que l' /traceur 404(Non Trouvé) erreur peut venir de votre systemjs.config.js fichier.
J'avais
et je l'ai changé pour
et l'erreur a disparu.
vous n'avez pas besoin de définir angulaire-à-mémoire-web-api dans les paquets de la section.
supprimer defination dans des packages;
au lieu de définir
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'à la section de carte. il fonctionne très bien.check this out
Je trouve que dans certains cas, c'est parce que pas de ts transpiler déclaré dans systemjs.config.js fichier.
Ajouter ceci dans le Système.fonction config:
et en valeur de la carte, ajouter des ts de la carte comme ceci:
Je pense que le problème réside dans system.js
Import-Statemtents sont detetced par une expression régulière qui va produire des résultats, même dans le cas de l'import-déclaration est à l'intérieur d'une multiligne-commentaire-bloc
https://github.com/systemjs/systemjs/issues/1408
Dans mon cas, le problème était lié à
system.config.jsde l'importation de bibliothèques desrcou d'autres sous-dossiers au lieu de l'importation de laumd'partir debundleset de cette façontracera été déclenchée automatiquement en espérant transpile certainses2015code.Voir la réponse complète ici, espérons que cela pourra aider quelqu'un.
Il y a plusieurs raisons derrière cette erreur,
1)Parfois des commentaires mentionnés plus haut de l'application.composante.fichier ts
2)pointant vers incorrect umd fichier
3)Si vous utilisez ts(Transcription) version, s'il vous plaît mentionner le transpiler options config.js fichier comme ci-dessous, ou de la compilation de tous .ts fichier .fichier js à l'aide de transpiler puis de référence .fichier js dans le code: