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

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.

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"   }

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.

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!

Ç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

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.

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

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

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

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 .

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

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

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' }

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

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

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.

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 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' },

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' },

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.

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' }

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.

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' }

À 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'      
}

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.

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

La meilleure façon est de l'installer en utilisant NPM par exemple

npm installer git + https://github.com/itryan/in-memory-web-api/ --save

il ajoutera la référence requise

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.

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é;

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

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.

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”