Ich habe das Tutorial befolgt . Nach dem Ändern app/maint.tsim HTTP-Kapitel erhalte ich die Fehlermeldung beim Starten der App über die Befehlszeile:

app / main.ts (5,51): Fehler TS2307: Modul 'angle2-in-memory-web-api' kann nicht gefunden werden.

(Visual Studio Code gibt mir den gleichen Fehler in main.ts - rot gewellte Unterstreichung.)

Hier ist mein 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);

Hier ist mein 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
]);

Für mich war die einzige Lösung ein Upgrade angular2-in-memory-web-apiauf 0.0.10.

Im package.jsonSet

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

im Abhängigkeitsblock und im systemjs.config.jsSatz

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

im packagesObjekt.

Bei Projekten, die mit den aktuellen CLI-Tools erstellt wurden, funktionierte dies bei der Installation

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

und dann Import als ausführen

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

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

Folgendes hat bei mir funktioniert:

Ich habe festgestellt, dass die package.json die folgende Version hat:

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

Beachten Sie die " 2 " im Namen.

Beim Verweisen auf InMemoryWebApiModule wurde jedoch 'Angular-In-Memory-Web-API' ohne die 2 im Namen verwendet. Also habe ich es hinzugefügt und es hat das Problem behoben:

{InMemoryWebApiModule} aus 'angle2-in-memory-web-api' importieren;

Hinweis : Ich habe dies im Hinweisabschnitt von https://github.com/angular/in-memory-web-api gefunden

Ab Version 0.1.0 wurde das npm-Paket von angular2-in-memory-web-api in den aktuellen Namen angular-in-memory-web-api umbenannt. Alle Versionen nach 0.0.21 werden unter diesem Namen ausgeliefert. Stellen Sie sicher, dass Sie Ihre package.json- und import-Anweisungen aktualisieren.

Winkel 4 Änderungen

Ab dem 17. Oktober 2017 wird im Lernprogramm nicht erwähnt, dass dies angular-in-memory-web-apinicht in einem Standard-CLI-Build enthalten ist und separat installiert werden muss. Dies kann leicht gemacht werden mit npm:

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

Dadurch werden die erforderlichen Änderungen automatisch vorgenommen package.json, sodass Sie keine Änderungen selbst vornehmen müssen.

Verwirrungspunkte

Dieser Thread ist ziemlich verwirrend, da sich die Angular-CLI seit dem Start dieses Threads erheblich geändert hat. Ein Problem mit vielen sich schnell entwickelnden APIs.

• angular-in-memory-web-apiwurde umbenannt; es lässt die 2 von Winkel 2 auf einfach fallenangular
• Die Angular CLI verwendet kein SystemJS mehr (ersetzt durch Webpack) und ist daher systemjs.config.jsnicht mehr vorhanden.
• npm's package.jsonsollten nicht direkt bearbeitet werden; Verwenden Sie die CLI.

Lösung

Ab Oktober 2017 ist die beste Lösung, es einfach selbst zu installieren npm, wie oben erwähnt:

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

Viel Glück da draußen!

Für mich geht das:

In package.json Abhängigkeiten Block gesetzt (verwenden Sie "Winkel" anstelle von "Winkel2")

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

Dann renne

 npm install

ODER

einfach nur rennen (mein bevorzugter)

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

Ich mache gerade das Tutorial und hatte ein ähnliches Problem. Was es für mich behoben zu haben scheint, ist das Definieren einer Hauptdatei für 'angular2-in-memory-web-api'in der packagesVariablen in systemjs.config.js:

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

Bevor ich dies hinzufügte, wurde ein 404-Fehler protokolliert, bei /node_modules/angular2-in-memory-web-api/dem versucht wurde, eine JavaScript-Datei zu laden. Jetzt werden /node_modules/angular2-in-memory-web-api/index.jsdie anderen Dateien in diesem Modul geladen.

Dies löste das 404-Problem

Aus der Angular In-Memory-Web-API-Dokumentation

Importieren Sie das InMemoryWebApiModule immer nach dem HttpModule, um sicherzustellen, dass der XHRBackend-Anbieter des InMemoryWebApiModule alle anderen ersetzt.

Bei Modulimporten sollte InMemoryWebApiModule nach HttpModule aufgeführt sein

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

Verwenden Sie in Ihrem Stammordner (der Ordner enthält package.json) Folgendes:

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

Die einfachste Lösung, die ich mir vorstellen konnte, war, das Paket mit npm zu installieren und den Server neu zu starten:

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

Ich hätte fast das Paket angle2-in-memory-web-api installiert , aber auf der npm-Seite steht:

Alle Versionen nach 0.0.21 werden (oder werden bald) unter Angular -In-Memory-Web-API ausgeliefert .

Hinweis : Diese Lösung funktionierte für ein Projekt, das mit den CLI-Tools erstellt wurde, in denen das Paket nicht als Abhängigkeit aufgeführt ist, und möglicherweise nicht das Problem für Projekte, die mit dem Quickstart-Startwert erstellt wurden, in dem das Paket als Abhängigkeit aufgeführt ist .

Ich benutze Winkel 4 und unten hat mein Problem gelöst.

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

Das war ein echter Stinker. Dank @traneHead, @toni und anderen haben diese Schritte für mich funktioniert.

1. Upgrade angular2-in-memory-web-apiauf0.0.10
2. Bearbeiten Sie die Eigenschaft variable der Pakete in systemjs.config.js:

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

Ich erstelle mein Projekt mit angle-cli und setze in package.json "angle-in-memory-web-api": "^ 0.2.4" im Abhängigkeitsblock und führe dann npm install aus.

Arbeite für mich: D.

Für Benutzer, die ein leeres Projekt mit Angular Cli 1.4.9 (Stand Oktober 2017) generiert und dann Schritt für Schritt die Anweisungen befolgt haben, führen Sie einfach den folgenden Befehl aus:

npm i angular-in-memory-web-api

Nur dieser Befehl, ohne zusätzliche Informationen.

Hoffe das spart jemandem Zeit

Wenn Sie Angular Cli verwenden, wird dieser Fehler angezeigt.

Bitte fügen Sie 'angular2-in-memory-web-api'in der const barrelsDatei system-config.ts Folgendes hinzu:

 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 */
];

Und 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'wie unten hinzufügen .

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,

});

Neu erstellen mit npm start. Dies löste das Problem für mich.

Versuchen Sie, die Typoskriptdefinitionen hinzuzufügen:

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

... Angabe des Abhängigkeitsnamens:

angular2-in-memory-web-api

Fügen Sie dann den Einstiegspunkt für "angle2-in-memory-web-api" in /systemjs.config.js hinzu

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

Ich hatte das gleiche Problem, ich habe es in systemjs.config geändert:

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

Durch diese Zeile:

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

Das Ändern dieser Zeile, wie oben vorgeschlagen, hat im Angular 2 Heroes Tutorial für mich funktioniert:

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

Ich löste es kopieren index.jsund index.d.tszu core.jsund core.d.ts, das heißt, innerhalb node_modules/angular2-in-memory-web-apiOrdner. Finde es heraus.

Die Hauptantwort hat mir geholfen: Veränderung

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

zu

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

in app \ main.ts einfach ändern:

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

zu:

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

Fügen Sie dann den Parameter index.js in hinzu

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

in systemjs.config.js

Es ist Arbeit für mich.

Der letzte Fix ab diesem Datum ist zu

1. Ersetzen Sie alle Instanzen von "angle2-in-memory-web-api" durch "angle-in-memory-web-api".
2. Ändern Sie die Abhängigkeitsversion von package.json von "angular-in-memory-web-api": "0.0.20"nach "angular-in-memory-web-api": "0.1.0" und "zone.js": "^0.6.23"nach"zone.js": "^0.6.25"
3. Ändern Sie in systemjs.config.js den Pfad für index.js. Es sollte so aussehen:
   'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

Ab dem neuesten Stand (derzeit 0.1.14) ist dies in der CHANGELOG

In systemjs.config.jssollten Sie die Zuordnung ändern in:

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

dann löschen aus packages:

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

Ich habe diesen Fehler , weil ich den Import InMemoryWebApiModuleaus angular2-in-memory-web-apiich die 2. Eigentlich entfernt hatte ich zwei Einträge in meiner package.json - Datei; einer war angular2-in-memory-web-apiund der zweite war angular-in-memory-web-api. Mit hat angular-in-memory-web-apidas Problem für mich gelöst. Ihr Import sollte also so aussehen:

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

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

Mit cli-angle müssen Sie nichts daran ändern system.config.js.

Für mich funktioniert es nur, eine Installation aus dem Angular-Tour-of-Heroes-Verzeichnis durchzuführen

C: \ nodejs \ Angular-Tour-of-Heroes> npm Installiere Angular-In-Memory-Web-API - Speichern

Der beste Weg ist, es mit NPM zu installieren, z

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

Es wird die erforderliche Referenz hinzugefügt

Ich bin auf ein ähnliches Problem gestoßen. Ich habe gerade das gesamte Beispiel gegen Ende von Teil 7 (letzter Teil) des Tutorials heruntergeladen und ausgeführt. Es funktionierte.

Natürlich müssen Sie zuerst alles installieren und kompilieren.

> npm install
> npm start

Ich habe auch 'app-root' in 'my-app' in app.component.ts geändert.

Wenn Sie Angular CLI zum Erstellen Ihrer Angular2-App verwenden, umfasst das Angular2-in-Memory-Web-API drei Schritte:

1. Fügen Sie die API wie folgt zur Datei system-config.ts (im Unterverzeichnis src) hinzu:

   /** 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. Hinzufügen

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

auf das VendorNpmFiles-Array in der Datei angle-cli-build.js wie von Hard erwähnt;

3. Fügen Sie natürlich die package.json hinzu, wie von traneHead beschrieben. für 2.0.0-rc.3 verwende ich die folgende Version:

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

Ich finde, dass dieser Link "Hinzufügen von Material2 zu Ihrem Projekt" den Prozess des Hinzufügens von Bibliotheken von Drittanbietern ziemlich klar erklärt.

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

Die InMemoryDataServiceKlasse fällt unter keine API. Wir müssen eine Serviceklasse erstellen und diese Serviceklasse dann in die Datei app.module.ts importieren.

Toni, Sie müssen die Typisierungen für Angular2-in-Memory-Web-API hinzufügen.

Fügen Sie sie Ihrer TS-Datei hinzu.

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”