Tutoriel Angular2 (Tour of Heroes): Impossible de trouver le module 'angular2-in-memory-web-api'


99

J'ai suivi le tutoriel . Après avoir changé app/maint.tsdans le chapitre Http, j'obtiens 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-in-memory-web-api'.

(Visual Studio Code me donne la même erreur dans main.ts - soulignement ondulé rouge.)

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

Réponses:


66

Pour moi, la seule solution était de passer angular2-in-memory-web-apià 0.0.10.

En package.jsonset

'angular2-in-memory-web-api': '0.0.10'

dans le bloc des dépendances et dans l' systemjs.config.jsensemble

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

dans l' packagesobjet.


4
Cela a corrigé l'erreur du module. Après cela, j'ai eu 404 erreurs - je devais spécifier 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }dans le fichier systemjs.config.js (voir la réponse de @GrantTaylor).
toni

4
Il convient de noter en particulier que si vous utilisez angular-cli pour développer votre application, vous devez ajouter 'angular2-in-memory-web-api/**/*.+(js|js.map)'au vendorNpmFilestableau dans le fichier angular-cli-build.js. Aftewards, vous devez pointer votre carte system-config comme ceci: 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'. Et puis réexécutez ng serve(ou npm start) pour que les fichiers angular2-in-memory-web-api se retrouvent dans le dossier dist / vendor.
ofShard

4
Si vous utilisez le plugin Eclipse angulaire 2, la ligne suivante va dans package.json, dans la dependenciessection: "angular-in-memory-web-api": "0.1.1". J'ai dû courir à npm installpartir du dossier du projet par la suite, cependant.
João Mendes le

1
Je suis toujours confronté à ce problème: (même après avoir suivi les étapes requises
Hassan Tariq

5
Je n'ai même pas de fichier systemjs.config.js dans mon projet. J'utilise Angular4, cependant.
bleistift2

101

Quant aux projets créés à l'aide des outils CLI actuels, cela a fonctionné pour moi en installant

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

puis effectuer l'importation en tant que

import { InMemoryWebApiModule } from 'angular-in-memory-web-api/in-memory-web-api.module';

Mon package.json

> "dependencies": {
>     "@angular/common": "^2.4.0",
>     "@angular/compiler": "^2.4.0",
>     "@angular/core": "^2.4.0",
>     "@angular/forms": "^2.4.0",
>     "@angular/http": "^2.4.0",
>     "@angular/platform-browser": "^2.4.0",
>     "@angular/platform-browser-dynamic": "^2.4.0",
>     "@angular/router": "^3.4.0",
>     "angular-in-memory-web-api": "^0.3.1",
>     "core-js": "^2.4.1",
>     "rxjs": "^5.1.0",
>     "zone.js": "^0.7.6"   },

>     "devDependencies": {
>     "@angular/cli": "1.0.0-rc.4",
>     "@angular/compiler-cli": "^2.4.0",
>     "@types/jasmine": "2.5.38",
>     "@types/node": "~6.0.60",
>     "codelyzer": "~2.0.0",
>     "jasmine-core": "~2.5.2",
>     "jasmine-spec-reporter": "~3.2.0",
>     "karma": "~1.4.1",
>     "karma-chrome-launcher": "~2.0.0",
>     "karma-cli": "~1.0.1",
>     "karma-jasmine": "~1.1.0",
>     "karma-jasmine-html-reporter": "^0.2.2",
>     "karma-coverage-istanbul-reporter": "^0.2.0",
>     "protractor": "~5.1.0",
>     "ts-node": "~2.0.0",
>     "tslint": "~4.5.0",
>     "typescript": "~2.0.0"   }

1
Merci, j'ai également dû importer InMemoryDbService en tant que: import {InMemoryDbService} de 'angular-in-memory-web-api / in-memory-backend.service';
Baris Atamer

4
Après avoir exécuté la npm installcommande, j'ai obtenu la version 0.3.2. Avec cette version, je pourrais tout import { InMemoryWebApiModule } from 'angular-in-memory-web-api';comme décrit dans la tournée.
comecme le

Comme @comecme l'a souligné, après l'exécution npm install, import { InMemoryWebApiModule } from 'angular-in-memory-web-api'fonctionne.
ajay_whiz

21

Voici ce qui a fonctionné pour moi:

J'ai remarqué que package.json avait la version suivante:

"angular 2 -in-memory-web-api": "0.0.20"

Notez le " 2 " dans le nom.

Cependant, lors du référencement d'InMemoryWebApiModule, il utilisait 'angular-in-memory-web-api' sans le 2 dans le nom. Je l'ai donc ajouté et cela a résolu le problème:

importer {InMemoryWebApiModule} depuis 'angular2-in-memory-web-api';

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

À partir de la version 1.0.1.0, le package npm a été renommé angular2-in-memory-web-api en son nom actuel, angular-in-memory-web-api. Toutes les versions après 0.0.21 sont livrées sous ce nom. Assurez-vous de mettre à jour votre package.json et vos instructions d'importation.


18

Changements angulaires 4

Depuis le 17 octobre 2017, le didacticiel ne mentionne pas que ce angular-in-memory-web-apin'est pas inclus dans une version CLI standard et doit être installé séparément. Cela peut être facilement fait avec npm:

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

Cela gère automatiquement les modifications nécessaires pour package.json, vous n'avez donc pas besoin de les modifier vous-même.

Points de confusion

Ce thread est assez déroutant car la CLI angulaire a considérablement changé depuis le démarrage de ce thread; un problème avec de nombreuses API en évolution rapide.

  • angular-in-memory-web-apia été renommé; il fait passer le 2 de 2 angulaire à simplementangular
  • La CLI angulaire n'utilise plus SystemJS (remplacé par Webpack), donc systemjs.config.jsn'existe plus.
  • npm« s package.jsonne doivent pas être modifiées directement; utilisez la CLI.

Solution

Depuis octobre 2017, la meilleure solution consiste simplement à l'installer vous-même en utilisant npm, comme je l'ai mentionné ci-dessus:

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

Bonne chance!


Vous devrez peut-être également mettre à jour le fichier package.json avec zone.js vers 0.8.4, puis exécuter la mise à jour npm, puis essayer l'installation ci-dessus.
Jason

1
Suis confronté à un nouveau problème ici. Impossible de trouver le module './in-memory-data.service'.
Kannan T

@kannan - 1. Avez-vous installé angular-in-memory-web-apiavec npm? 2. Y a-t-il une entrée pour angular-in-memory-web-apidans votre package.json? 3. essayez de tuer et de redémarrer la CLI angulaire: Ctrl+Cpour tuer; ng serverecommencer). Parfois, la CLI agit bizarrement (Idem pour le plugin Angular pour VSCode)
Master of Ducks

@MasterofDucks Bro a résolu ce problème hier, le problème était que je n'ai pas créé le fichier, c'est pourquoi. merci pour votre aide :)
Kannan T

15

Ça marche pour moi:

Dans l'ensemble de blocs de dépendances package.json (utilisez "angular" au lieu de "angular2")

"angular-in-memory-web-api": "^0.3.2",

Puis cours

 npm install

OU

il suffit de courir (mon préféré)

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

14

Je suis actuellement en train de faire le tutoriel et j'ai eu un problème similaire. Ce qui semble l'avoir résolu pour moi, c'est de définir un fichier principal pour 'angular2-in-memory-web-api'la packagesvariable dans systemjs.config.js:

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

Avant d'ajouter cela, il y avait une erreur 404 enregistrée pour l' /node_modules/angular2-in-memory-web-api/endroit où il semblait essayer de charger un fichier JavaScript. Maintenant, il se charge /node_modules/angular2-in-memory-web-api/index.jset les autres fichiers de ce module.


2
Il semble actuellement y avoir plusieurs erreurs avec la partie HTTP du didacticiel Tour of Heroes.
Grant Taylor

Cela n'aide pas avec mon erreur (avec l'erreur en question).
toni

J'ai d'abord dû mettre à jour «angular2-in-memory-web-api» (voir la réponse de @traneHead), puis appliquer cette réponse.
toni

Merci, résolu mon problème. Je n'ai pas eu besoin de passer à 0.0.10 comme d'autres expliquent.
Radek Skokan

10

Cela a résolu le problème 404

À partir de la documentation Angular in-memory-web-api

Importez toujours le InMemoryWebApiModule après le HttpModule pour vous assurer que le fournisseur XHRBackend de InMemoryWebApiModule remplace tous les autres.

Les importations de modules doivent avoir InMemoryWebApiModule répertorié après HttpModule

@NgModule({
imports:      [ BrowserModule,
              AppRoutingModule,
              FormsModule,
              HttpModule,
              InMemoryWebApiModule.forRoot(InMemoryDataService),
              ...

1
Il est également crucial que cela vienne après l'importation de routes comme AppRoutingModule dans la démo Angular2. J'ai eu AppRoutingModule après InMemoryWebApiModule.forRoot (InMemoryDataService) et ça casse tout.
Mark

6

Depuis votre dossier racine (le dossier contient package.json), en utilisant:

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

a fonctionné pour moi en utilisant le nouveau guide de démarrage rapide avec Angular-cli
OST

@OST Mec utilise même angular-cli mais je suis confronté à cette erreur. Impossible de trouver le module './in-memory-data.service'.
Kannan T

5

La solution la plus simple à laquelle je pouvais penser était d'installer le package avec npm et de redémarrer le serveur:

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

J'ai presque installé le package angular2-in-memory-web-api , mais la page npm dit:

Toutes les versions postérieures à 0.0.21 sont (ou le seront bientôt) livrées sous angular-in-memory-web-api .

Remarque : cette solution fonctionnait pour un projet qui a été créé avec les outils CLI, qui ne répertorie pas le package en tant que dépendance, et peut ne pas résoudre le problème des projets créés avec la valeur de départ Quickstart, qui répertorie le package en tant que dépendance .


Mon problème était qu'il ng serveétait toujours en cours d'exécution pendant son installation. J'ai dû l'éteindre et redémarrer.
Jorn.Beyers

4

J'utilise angulaire 4 et ci-dessous a résolu mon problème.

npm installer angular-in-memory-web-api --save


salut j'utilise même angular 4 j'avais fait comme vous l'avez dit mais je suis confronté à un nouveau problème ici Impossible de trouver le module './in-memory-data.service'.
Kannan T

3

C'était une vraie puanteur. Grâce à @traneHead, @toni et d'autres, ces étapes ont fonctionné pour moi.

  1. Passer angular2-in-memory-web-apià0.0.10
  2. Modifiez la propriété de la variable packages dans systemjs.config.js:

angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }


Cette vidéo peut également être utile: Tutoriel Angular2 - HTTP
AnderSon

3

Je crée mon projet en utilisant angular-cli et je mets dans package.json "angular-in-memory-web-api": "^ 0.2.4" dans le bloc de dépendances, puis j'exécute npm install.

Travaille pour moi: D


Des recommandations sur ce qui cause ce problème? Ou ce qu'ils peuvent configurer qu'ils pourraient vérifier ou modifier pour éliminer le problème? Peut-être que le contenu de votre "package.json" pourrait vous aider.
Joshua Briefman

3

Pour les utilisateurs qui ont généré un projet vide avec angular cli 1.4.9 (réel en octobre 2017) et qui ont ensuite commencé, suivez les instructions étape par étape, exécutez simplement la commande suivante:

npm i angular-in-memory-web-api

Juste cette commande, sans rien de plus.

J'espère que ça fait gagner du temps à quelqu'un


2

Si vous utilisez angular cli, vous obtiendrez cette erreur.

Veuillez ajouter 'angular2-in-memory-web-api'le const barrelsdans le fichier system-config.ts comme ci-dessous:

 const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/forms',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',
  'angular2-in-memory-web-api',

  // App specific barrels.
  'app',
  'app/shared',
  /** @cli-barrel */
];

Et ajoutez 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'comme ci-dessous.

System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
    'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'
  },
  packages: cliSystemConfigPackages,

});

Reconstruisez en utilisant npm start. Cela a résolu le problème pour moi.


0

Essayez d'ajouter les définitions dactylographiées:

sudo typings install --save file:./node_modules/angular2-in-memory-web-api/in-memory-backend.service.d.ts

... en spécifiant le nom de la dépendance:

angular2-in-memory-web-api

Ajoutez ensuite le point d'entrée pour "angular2-in-memory-web-api" dans /systemjs.config.js

var packages = {
  ...
  'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }
};

J'ai installé les typages comme vous l'avez écrit. Cela a changé le contenu du dossier typings (ajouté "\ définitions \ in-memory-backend.service \ index.d.ts" au navigateur et aux sous-dossiers principaux, et a ajouté une référence dans les fichiers browser.d.ts et main.d.ts ). Qu'entendez-vous par "spécifier le nom de la dépendance" ?. J'ai ajouté le point d'entrée comme vous l'avez spécifié. Mais mon erreur persiste.
toni

Lorsque vous exécutez "sudo typings install ...", les typages doivent vous demander "Quel est le nom de la dépendance?" puis vous pouvez entrer "angular2-in-memory-web-api".
user1014932

Ma réponse s'appliquait à angular2-in-memory-web-api v0.0.7 btw.
user1014932

0

J'ai eu le même problème, j'ai changé dans systemjs.config:

'angular2-in-memory-web-api': { defaultExtension: 'js' },

Par cette ligne:

'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },

0

Changer cette ligne, comme suggéré ci-dessus, a fonctionné pour moi dans le didacticiel Angular 2 Heroes:

'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },

0

Je l'ai résolu en copiant index.jset index.d.tsvers core.jset core.d.ts, c'est-à-dire à l'intérieur du node_modules/angular2-in-memory-web-apidossier. Allez comprendre.


0

La réponse principale m'a aidé: changer

'angular2-in-memory-web-api': { defaultExtension: 'js' },

à

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

0

dans app \ main.ts modifiez simplement:

import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';

à:

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

puis ajoutez le paramètre index.js dans

var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main:'index.js', defaultExtension: 'js' }
};

dans systemjs.config.js

c'est du travail pour moi.


0

Le dernier correctif à cette date est de

  1. remplacez toutes les instances de "angular2-in-memory-web-api" par "angular-in-memory-web-api".
  2. Changer la version de la dépendance package.json de "angular-in-memory-web-api": "0.0.20"vers "angular-in-memory-web-api": "0.1.0" et "zone.js": "^0.6.23"vers"zone.js": "^0.6.25"
  3. Dans systemjs.config.js, modifiez le chemin de index.js. Cela devrait ressembler à:
    'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

0

À partir de la dernière version (actuellement 0.1.14), c'est ce qui est indiqué dans le CHANGELOG

Dans, systemjs.config.jsvous devez changer le mappage en:

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

puis supprimez de packages:

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

0

J'ai eu cette erreur parce que j'importais InMemoryWebApiModuledepuis angular2-in-memory-web-apiJ'ai supprimé le 2. En fait, j'avais deux entrées dans mon fichier package.json; l'un était angular2-in-memory-web-apiet le second était angular-in-memory-web-api. L'utilisation a angular-in-memory-web-apirésolu le problème pour moi. Donc, votre importation devrait être comme ceci:

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
...
@NgModule({

imports: [
InMemoryWebApiModule.forRoot(InMemoryDataService)
]
})

En utilisant cli-angular, vous ne devez rien changer system.config.js.


0

Pour moi, faire une installation à partir du répertoire angular-tour-of-heroes fonctionne pour moi

C: \ nodejs \ angular-tour-of-heroes> npm install angular-in-memory-web-api --save



0

J'ai rencontré un problème similaire. Je viens de télécharger l'intégralité de l'exemple vers la fin de la partie 7 (dernière partie) du didacticiel et je l'ai exécuté. Ça a marché.

Bien sûr, vous devez d'abord tout installer et compiler.

> npm install
> npm start

J'ai également changé 'app-root' en 'my-app' dans app.component.ts.


0

Si vous utilisez angular cli pour créer votre application angular2, y compris l'api angular2-in-memory-web-api implique trois étapes:

  1. ajoutez l'API au fichier system-config.ts (dans le sous-répertoire src) comme ci-dessous:

    /** Map relative paths to URLs. */
    const map: any = {
      'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'
    };
    /** User packages configuration. */
    const packages: any = {
      'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
    };
    
  2. Ajouter

    angular2-in-memory-web-api/**/*.+(js|js.map)' 
    

au tableau vendorNpmFiles dans le fichier angular-cli-build.js comme ofShard mentionné;

  1. Bien sûr, ajoutez au package.json comme décrit par traneHead; pour 2.0.0-rc.3 j'utilise la version ci-dessous:

    "angular2-in-memory-web-api": "0.0.13"
    

Je trouve que ce lien «Ajout de matériel2 à votre projet» explique assez clairement le processus d'ajout de bibliothèques tierces.


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

La InMemoryDataServiceclasse ne relève d'aucune API. Nous devons créer une classe de service, puis importer cette classe de service dans le fichier app.module.ts.


-1

Toni, Vous devez ajouter les typages pour Angular2-in-memory-web-api.

Ajoutez-les dans votre fichier TS.

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.