104 votes

Angular2 tutoriel (Tour of Heroes) : impossible de trouver module ' angular2-dans-mémoire-web-api '

J'ai suivi le Tutoriel. Après la modification d' app/maint.ts dans le Http chapitre, je reçois l'erreur lors du démarrage de l'application via la ligne de commande:

app/main.ts(5,51): erreur TS2307: Impossible de trouver le module 'angular2-à-mémoire-web-api".

(Code de Visual Studio me donne la même erreur dans le principal.ts - rouge trait ondulé.)

Voici mon systemjs.config.js:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // 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 ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

Voici mon app/main.ts:

// Imports for loading & configuring the in-memory web api
import { provide }    from '@angular/core';
import { XHRBackend } from '@angular/http';

import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService }               from './in-memory-data.service';

// The usual bootstrapping imports
import { bootstrap }      from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { AppComponent }   from './app.component';

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
    provide(SEED_DATA,  { useClass: InMemoryDataService })     // in-mem server data
]);

102voto

mohit mathur Points 940

En ce qui concerne les projets créés à l’aide d’outils CLI actuels, cela a fonctionné pour moi en installant

effectuer ensuite importer comme

Mon package.json

69voto

traneHead Points 128

Pour moi la seule solution était de mettre à niveau à .

En `` la valeur

dans le bloc de dépendances et en `` la valeur

dans le `` objet.

21voto

Exocomp Points 541

Voici ce qui a fonctionné pour moi:

J'ai remarqué que le paquet.json a la version suivante:

"angulaire2-dans-mémoire-web-api": "0.0.20"

Notez le "2" dans le nom.

Toutefois, lorsque le référencement InMemoryWebApiModule c'est à l'aide angulaire-à-mémoire-web-api " sans les 2 dans le nom. Donc je l'ai ajouté et il a résolu le problème:

importer { InMemoryWebApiModule } 'angular2-à-mémoire-web-api";

Remarque: j'ai trouvé ça dans l'avis de la section de https://github.com/angular/in-memory-web-api

Que de la v. 0.1.0, le mécanisme national de prévention paquet a été renommé de angular2-à-mémoire-web-api pour son nom actuel, angulaire-à-mémoire-web-api. Toutes les versions après 0.0.21 sont expédiés en vertu de la ce nom. Assurez-vous de mettre à jour votre paquet.json et déclarations d'importation.

18voto

Master of Ducks Points 168

Angulaire 4 Changements

En date du 17 octobre 2017, le tutoriel ne mentionne qu' angular-in-memory-web-api n'est pas inclus dans une norme de la CLI de construire, et doit être installé séparément. Cela peut être fait facilement avec npm:

$ npm install angular-in-memory-web-api --save

Ce gère automatiquement les changements nécessaires à l' package.json, de sorte que vous n'avez pas besoin de faire des modifications vous-même.

Points de confusion

Ce fil est assez déroutant, comme l'angle de la CLI a beaucoup changé depuis ce fil a été commencé; un problème avec de nombreux évolution rapide de l'Api.

  • angular-in-memory-web-api a été renommé; il tombe le 2 angulaires2 simplement angular
  • L'angle de la CLI n'utilise plus SystemJS (remplacé par Webpack), alors systemjs.config.js n'existe plus.
  • npms' package.json ne doit pas être modifié directement; l'utilisation de la CLI.

Solution

En octobre 2017, la meilleure solution est tout simplement de l'installer vous-même à l'aide de npm, comme je l'ai mentionné ci-dessus:

$ npm install angular-in-memory-web-api --save

Bonne chance là-bas!

14voto

Grant Taylor Points 143

Je suis en train de faire le tutoriel et eu un problème similaire. Ce qui semble l’avoir fixé pour moi consiste à définir un fichier principal pour dans le variable dans `` :

Avant que j’ai ajouté ceci, il y avait une erreur 404 enregistrés pour où il a semblé essayer de charger un fichier JavaScript. Maintenant, il charge les et les autres fichiers de ce module.

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