28 votes

Angular2: erreur au démarrage de l'application "http: // localhost: 3000 / traceur 404 (Not Found)"

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

Console log

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 rel="stylesheet" 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);

34voto

Picci Points 4743

J'ai trouvé la raison. Au début de app.component.ts, j'avais commenté une version antérieure du stupide AppComponent, quelque chose comme

 /*

import { AnotherComponent } from './anotherComponent.component'
// some other code

}*/
import { Component } from '@angular/core';

@Component({
  selector: 'm2t-app',
  template: `
        Hello something
        `,
  directives: []
})
export class AppComponent { 
}
 

La suppression du commentaire au début du fichier a résolu le problème.

16voto

DeadWoroz Points 91

J'ai trouvé que cette erreur apparaît dans les commentaires multilignes avec des instructions d'importation / exportation. Nous corrigerons l'erreur si nous transformons l'instruction en une forme incorrecte ou la mettons dans un commentaire sur une seule ligne.

Exemple:

 /**
import { Component } from '@angular/core'; // generate error
export class TestClass { }; // generate error

// import { Component } from '@angular/core'; // correct
// export class TestClass { }; // correct

impot { Component } from '@angular/core'; // correct
export clas TestClass { }; // correct
*/
 

6voto

Greg Netland Points 221

Pour les autres personnes qui obtiennent cette erreur et n'ont pas de commentaires dans leur code. J'ai rencontré cette erreur et l'ai résolu en vérifiant à nouveau mon fichier systemjs.config.js.

Bien que vous ne puissiez pas avoir ce problème exact dans votre fichier systemjs.config.js, cela démontre que l'erreur / traceur 404 (Not Found) peut provenir de votre fichier systemjs.config.js.

j'ai eu

   var packages = {
'app_spa': { main: 'app.component.ts', defaultExtension: 'ts' },
 

et je l'ai changé en

   var packages = {
'app_spa': { main: 'app.component.js', defaultExtension: 'js' },
 

et l'erreur a disparu.

5voto

ahankendi Points 210

vous n'avez pas besoin de définir angular-in-memory-web-api dans la section packages. supprimer cette définition dans les packages;

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

au lieu de définir 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' dans la section de carte. ça fonctionne bien.

regarde ça

3voto

Ming Zhi Points 31

Je trouve que dans certains cas, c'est parce qu'aucun transpilateur ts n'a été déclaré dans le fichier systemjs.config.js. Ajoutez ceci dans la fonction System.config:

     transpiler: 'ts',
    typescriptOptions: {
        tsconfig: true
    },
    meta: {
        'typescript': {
            "exports": "ts"
        }
    },
 

et dans la valeur de la carte, ajoutez ts map comme ceci:

     map: {
        'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
        'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
    },
 

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