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

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

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

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

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

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