web-dev-qa-db-de.com

Angular2 Tutorial (Tour of Heroes): Das Modul 'angle2-in-memory-web-api' kann nicht gefunden werden

Ich bin dem Tutorial gefolgt. Nach dem Ändern von app/maint.ts im HTTP-Kapitel erhalte ich den Fehler beim Starten der App über die Befehlszeile: 

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

(Visual Studio Code gibt mir den gleichen Fehler in main.ts - rote wellenförmige 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
]);
importangular
98
toni

Für mich bestand die einzige Lösung darin, angular2-in-memory-web-api auf 0.0.10 zu aktualisieren.

In package.json eingestellt

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

im abhängigen Block und in systemjs.config.js gesetzt

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

im packages-Objekt.

65
traneHead

Bei Projekten, die mit den aktuellen CLI-Tools erstellt wurden, funktionierte es bei mir durch die Installation

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

und dann Importieren als 

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"   }
98
mohit mathur

Folgendes hat für mich funktioniert:

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

"angle2 -in-memory-web-api": "0.0.20"

Beachten Sie das "2" im Namen.

Beim Verweisen auf InMemoryWebApiModule wurde jedoch 'angle-in-memory-web-api' ohne die 2 im Namen verwendet. Also habe ich es hinzugefügt und das Problem gelöst: 

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

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

Ab Version 1.0.0 wurde das npm-Paket von .__ umbenannt. angle2-in-memory-web-api mit dem aktuellen Namen wink-in-memory-web-api. Alle Versionen nach 0.0.21 werden unter .__ verschickt. dieser Name. Aktualisieren Sie Ihre package.json- und Importanweisungen.

21
Exocomp

Winkel 4 Änderungen

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

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

Dadurch werden die erforderlichen Änderungen an package.json automatisch übernommen, sodass Sie nicht selbst Änderungen vornehmen müssen.

Punkte der Verwirrung

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-api wurde umbenannt; es lässt die 2 von Winkel 2 einfach auf angular fallen
  • Die Angular-CLI verwendet kein SystemJS (ersetzt durch Webpack), sodass systemjs.config.js nicht mehr vorhanden ist.
  • npms package.json sollte nicht direkt bearbeitet werden; Verwenden Sie die CLI.

Lösung

Ab Oktober 2017 ist die beste Lösung die einfache Installation mithilfe von npm, wie oben erwähnt:

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

Viel Glück da draußen!

18
Master of Ducks

Für mich geht das:

In package.json Abhängigkeiten Block gesetzt (verwende "angle" anstelle von "angle2")

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

Dann renne 

 npm install

ODER 

einfach laufen (mein bevorzugter)

npm install angular-in-memory-web-api --save
15
Tushar Ghosh

Ich mache gerade das Tutorial und hatte ein ähnliches Problem. Was anscheinend behoben wurde, ist die Definition einer Hauptdatei für 'angular2-in-memory-web-api' in der Variable packages in systemjs.config.js:

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

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

14
Grant Taylor

Dies löste das Problem 404 

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

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

Für das Importieren von Modulen sollte InMemoryWebApiModule nach HttpModule aufgelistet sein

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

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

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

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 beinahe das Paket angle2-in-memory-web-api installiert, aber auf der Seite npm heißt es:

Alle Versionen nach 0.0.21 werden (oder werden bald) unter .__ versandt. angle-in-memory-web-api.

Note: Diese Lösung funktionierte für ein Projekt, das mit den CLI-Tools erstellt wurde, das Paket nicht als Abhängigkeit auflistet und das Problem für Projekte, die mit dem Seed Quickstart erstellt wurden, möglicherweise nicht löst Paket als Abhängigkeit.

5
Nocturno

Ich verwende Winkel 4 und löste mein Problem.

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

4
Vishal Biradar

Ich erstelle mein Projekt mithilfe von angle-cli und setze es in package.json "angle-in-memory-web-api": "^ 0.2.4" im Abhängigkeitsblock und dann npm install.

Arbeit für mich: D

3
Anderson Marques

Für Benutzer, die ein leeres Projekt mit dem Winkel cli 1.4.9 (Actual im Oktober 2017) erstellt und anschließend die Anweisungen befolgt haben, führen Sie einfach den folgenden Befehl aus:

npm i angular-in-memory-web-api

Nur diesen Befehl, ohne etwas zusätzliches.

Hoffe, das spart jemandem Zeit

3
Yurii Bratchuk

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

  1. Upgrade von angular2-in-memory-web-api auf 0.0.10
  2. Bearbeiten Sie die Paketvariableigenschaft in systemjs.config.js:

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

3
AnderSon

Wenn Sie mit dem Winkelcli arbeiten, wird dieser Fehler angezeigt. 

Bitte fügen Sie 'angular2-in-memory-web-api' in const barrels in der Datei system-config.ts wie folgt 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 fügen Sie 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api' wie folgt hinzu. 

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,

});

Erstellen Sie mit npm start neu. Dies hat das Problem für mich gelöst.

2
Nama

Die Hauptantwort hat mir geholfen: Ändern

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

zu

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

Versuchen Sie, die TypeScript-Definitionen hinzuzufügen:

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

... unter 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' }
};
0
user1014932

Am besten installieren Sie es mit NPM, z

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

es wird die erforderliche Referenz hinzufügen 

0
Aamir

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.

0
Davide Castronovo

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

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

In dieser Zeile:

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

Ich löste es beim Kopieren von index.js und index.d.ts nach core.js und core.d.ts, das heißt in node_modules/angular2-in-memory-web-api-Ordner. Geh raus.

0
Eduardo Cavalcanti

Das neueste Update ist an diesem Datum 

  1. ersetzen Sie alle Instanzen von "angle2-in-memory-web-api" durch "angle-in-memory-web-api".
  2. Ändern Sie die Version der package.json-Abhängigkeit von "angular-in-memory-web-api": "0.0.20" in "angular-in-memory-web-api": "0.1.0" Und "zone.js": "^0.6.23" in "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' }
0
Shifa Khan

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

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

Wenn Sie die angle2-App mithilfe von angle cli erstellen, umfasst das angle2-in-memory-web-api drei Schritte:

  1. fügen Sie die API zur Datei system-config.ts (im Unterverzeichnis src) wie folgt 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)'

an das vendorNpmFiles-Array in der Datei angle-cli-build.js, wie vonShard erwähnt; 

  1. Füge natürlich zu 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 dieses link "Hinzufügen von Material2 zu Ihrem Projekt" erklärt das Hinzufügen von Drittanbieter-Bibliotheken recht deutlich.

0
Treefish Zhang

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

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

> npm install
> npm start

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

0
Chong Lip Phang

Zum jetzigen Zeitpunkt (derzeit 0.1.14) wird dies in der CHANGELOG angegeben.

In systemjs.config.js sollten Sie die Zuordnung ändern in:

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

dann von packages löschen:

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

Für mich ist es einfach, ein Verzeichnis aus dem Verzeichnis Angular-Tour-of-Heroes zu installieren

C:\nodejs\angle-tour-of-heroes> npm installiert angle-in-memory-web-api --save 

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

Die InMemoryDataService-Klasse gehört zu keiner API. Wir müssen eine Serviceklasse erstellen und diese Serviceklasse anschließend in die Datei app.module.ts importieren.

0
Debarati Majumder

Ich habe diese Fehlermeldung erhalten, weil ich InMemoryWebApiModule von angular2-in-memory-web-api importierte. Ich entfernte die 2. Ich hatte tatsächlich zwei Einträge in meiner package.json-Datei; einer war angular2-in-memory-web-api und der zweite warangular-in-memory-web-api. Mit angular-in-memory-web-api wurde das Problem für mich gelöst. Ihr Import sollte also so sein:

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

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

Wenn Sie cli-angle verwenden, müssen Sie nichts an system.config.js ändern.

0
edkeveked