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


99

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

Antworten:


66

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.


4
Das hat den Modulfehler behoben. Danach bekam ich 404 Fehler - ich musste 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }in der Datei systemjs.config.js angeben (siehe Antwort von @GrantTaylor).
Toni

4
Wenn Sie zum Entwickeln Ihrer Anwendung Angular-Cli verwenden, müssen Sie insbesondere 'angular2-in-memory-web-api/**/*.+(js|js.map)'das vendorNpmFilesArray in der Datei Angular-Cli-Build.js ergänzen. Anschließend müssen Sie Ihre Systemkonfigurationszuordnung wie folgt anzeigen : 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'. Führen Sie dann erneut aus ng serve(oder npm start), damit die Angular2-in-Memory-Web-API-Dateien im Ordner dist / vendor landen.
ofShard

4
Wenn Sie das Angular 2 Eclipse-Plugin verwenden, befindet sich die folgende Zeile in package.json im dependenciesAbschnitt : "angular-in-memory-web-api": "0.1.1". Ich musste npm installdanach allerdings aus dem Projektordner laufen .
João Mendes

1
Ich bin immer noch mit diesem Problem konfrontiert :( Auch nachdem ich die erforderlichen Schritte
befolgt habe

5
Ich habe nicht einmal eine systemjs.config.js-Datei irgendwo in meinem Projekt. Ich benutze jedoch Angular4.
bleistift2

100

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

1
Danke, auch ich musste InMemoryDbService importieren als: import {InMemoryDbService} von 'Angular-In-Memory-Web-API / In-Memory-Backend.service';
Baris Atamer

4
Nachdem npm installich den Befehl ausgeführt hatte, bekam ich Version 0.3.2. Mit dieser Version konnte ich genau import { InMemoryWebApiModule } from 'angular-in-memory-web-api';wie in der Tour beschrieben.
Comecme

Wie @comecme betonte npm install, import { InMemoryWebApiModule } from 'angular-in-memory-web-api'funktioniert es nach dem Ausführen .
Ajay_whiz

21

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.


18

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!


Möglicherweise müssen Sie auch die Datei package.json mit zone.js auf 0.8.4 aktualisieren, dann npm update ausführen und dann die obige Installation versuchen.
Jason

1
Ich stehe hier vor einem neuen Problem. Das Modul './in-memory-data.service' kann nicht gefunden werden.
Kannan T

@kannan - 1. Haben Sie installieren angular-in-memory-web-apimit npm? 2. Gibt es einen Eintrag für angular-in-memory-web-apiin Ihrem package.json? 3. Versuchen Sie, die Angular CLI Ctrl+Czu beenden und neu zu starten: um zu töten; ng serveNeustarten). Manchmal verhält sich die CLI seltsam (Ditto für das Angular-Plugin für VSCode)
Master of Ducks

@MasterofDucks Bro hat das gestern gelöst. Das Problem war, dass ich die Datei nicht erstellt habe. Deshalb. Vielen Dank für Ihre Hilfe :)
Kannan T

15

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

14

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.


2
Derzeit scheint der HTTP-Teil des Tour of Heroes-Tutorials mehrere Fehler zu enthalten.
Grant Taylor

Dies hilft nicht bei meinem Fehler (mit dem fraglichen Fehler).
Toni

Ich musste zuerst ´angular2-in-memory-web-api´ aktualisieren (siehe Antwort von @traneHead) und dann diese Antwort anwenden.
Toni

Danke, mein Problem gelöst. Ich musste nicht auf 0.0.10 steigen, wie andere erklären.
Radek Skokan

10

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

1
Es ist auch wichtig, dass Routen wie AppRoutingModule in die Angular2-Demo importiert werden. Ich hatte AppRoutingModule nach InMemoryWebApiModule.forRoot (InMemoryDataService) und es bricht alles.
Mark

6

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

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

arbeitete für mich mit der neuen Kurzanleitung mit Angular-cli
OST

@OST Dude verwendet sogar Angular-CLI, ist jedoch mit diesem Fehler konfrontiert. Das Modul './in-memory-data.service' kann nicht gefunden werden.
Kannan T

5

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 .


Mein Problem war, dass ng servees noch lief, während dies installiert wurde. Musste es herunterfahren und neu starten.
Jorn.Beyers

4

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

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


Hallo, ich verwende sogar Winkel 4, den ich getan habe, wie Sie gesagt haben, aber ich stehe hier vor einem neuen Problem. Das Modul './in-memory-data.service' kann nicht gefunden werden.
Kannan T

3

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


Dieses Video kann auch hilfreich sein: Angular2 Tutorial - HTTP
AnderSon

3

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.


Irgendwelche Empfehlungen, welche Anzahl dieses Problem verursacht? Oder welche Konfiguration können sie überprüfen oder ändern, um das Problem zu beheben? Vielleicht könnte der Inhalt Ihrer "package.json" helfen.
Joshua Briefman

3

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


2

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.


0

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 habe die Typisierungen so installiert, wie Sie sie geschrieben haben. Dadurch wurde der Inhalt des Typisierungsordners geändert ("\ definitiones \ in-memory-backend.service \ index.d.ts" zu Browser- und Hauptunterordnern hinzugefügt und Verweise in den Dateien browser.d.ts und main.d.ts hinzugefügt ). Was meinen Sie mit "Angeben des Abhängigkeitsnamens"?. Ich habe den Einstiegspunkt wie angegeben hinzugefügt. Aber mein Fehler bleibt bestehen.
Toni

Wenn Sie "sudo typings install ..." ausführen, sollten Sie beim Schreiben gefragt werden, wie der Abhängigkeitsname lautet. und dann können Sie "angle2-in-memory-web-api" eingeben.
user1014932

Meine Antwort galt übrigens für angle2-in-memory-web-api v0.0.7.
user1014932

0

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

0

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

0

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.


0

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

0

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

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

0

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

0

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.


0

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



0

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.


0

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;

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


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


-1

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”
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.