Samouczek Angular2 (Tour of Heroes): Nie można znaleźć modułu 'angular2-in-memory-web-api'


99

Postępowałem zgodnie z samouczkiem . Po zmianie app/maint.tsw rozdziale Http pojawia się błąd podczas uruchamiania aplikacji z linii poleceń:

app / main.ts (5,51): błąd TS2307: nie można znaleźć modułu „angular2-in-memory-web-api”.

(Visual Studio Code daje mi ten sam błąd w main.ts - czerwone faliste podkreślenie).

Oto moje 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);

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

Odpowiedzi:


66

Dla mnie jedynym rozwiązaniem była aktualizacja angular2-in-memory-web-apido 0.0.10.

W package.jsonkomplecie

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

w bloku zależnym iw systemjs.config.jszestawie

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

w packagesobiekcie.


4
To naprawiło błąd modułu. Po tym dostałem błędy 404 - musiałem określić 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }w pliku systemjs.config.js (patrz odpowiedź @GrantTaylor).
dzisiaj

4
W szczególności, jeśli używasz angular-cli do tworzenia aplikacji, musisz dodać 'angular2-in-memory-web-api/**/*.+(js|js.map)'do vendorNpmFilestablicy w pliku angular-cli-build.js. Aftewards, należy wskazać swój system-config mapę tak: 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'. Następnie uruchom ponownie ng serve(lub npm start), aby pliki angular2-in-memory-web-api znalazły się w folderze dist / vendor.
ofShard,

4
Jeśli używasz kątowej 2 Eclipse plugin następujący linia idzie w package.json w dependenciesdziale: "angular-in-memory-web-api": "0.1.1". Musiałem jednak npm installpóźniej uciekać z folderu projektu.
João Mendes

1
Nadal mam ten problem :( nawet po wykonaniu wymaganych czynności
Hassan Tariq

5
Nie mam nawet pliku systemjs.config.js w moim projekcie. Jednak używam Angular4.
bleistift2

101

Jeśli chodzi o projekty utworzone przy użyciu aktualnych narzędzi CLI, działało u mnie podczas instalacji

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

a następnie wykonaj import jako

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

Mój plik 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
Dzięki, musiałem również zaimportować InMemoryDbService jako: import {InMemoryDbService} z 'angular-in-memory-web-api / in-memory-backend.service';
Baris Atamer

4
Po uruchomieniu npm installpolecenia otrzymałem wersję 0.3.2. Dzięki tej wersji mogłem dokładnie tak, import { InMemoryWebApiModule } from 'angular-in-memory-web-api';jak opisano w trasie.
comecme

Jak @comecme wskazał, po uruchomieniu npm install, import { InMemoryWebApiModule } from 'angular-in-memory-web-api'działa.
ajay_whiz

21

Oto, co zadziałało dla mnie:

Zauważyłem, że plik package.json miał następującą wersję:

„kątowy 2 -w-pamięci-web-api”: „0,0,20”

Zwróć uwagę na „ 2 ” w nazwie.

Jednak podczas odwoływania się do InMemoryWebApiModule używano „angular-in-memory-web-api” bez 2 w nazwie. Więc dodałem go i rozwiązałem problem:

import {InMemoryWebApiModule} z 'angular2-in-memory-web-api';

Uwaga : znalazłem to w sekcji powiadomień https://github.com/angular/in-memory-web-api

Od wersji 1.0.1.0 nazwa pakietu npm została zmieniona z angular2-in-memory-web-api na jego obecną nazwę, angular-in-memory-web-api. Wszystkie wersje po 0.0.21 są dostarczane pod tą nazwą. Pamiętaj, aby zaktualizować plik package.json i importować instrukcje.


18

Angular 4 Zmiany

Od 17 października 2017 r. W samouczku nie wspomniano, że angular-in-memory-web-apinie jest uwzględniony w standardowej kompilacji interfejsu wiersza polecenia i należy go zainstalować oddzielnie. Można to łatwo zrobić za pomocą npm:

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

To automatycznie obsługuje niezbędne zmiany package.json, więc nie musisz samodzielnie wprowadzać zmian.

Punkty nieporozumień

Wątek ten jest dość zagmatwany, ponieważ interfejs wiersza poleceń Angular znacznie się zmienił od czasu uruchomienia tego wątku; problem z wieloma szybko rozwijającymi się interfejsami API.

  • angular-in-memory-web-apizostała zmieniona; po prostu opuszcza 2 z kątowej 2angular
  • Angular CLI nie używa już SystemJS (zastąpionego przez Webpack), więc systemjs.config.jsjuż nie istnieje.
  • npm„s package.jsonnie powinna być edytowane bezpośrednio; użyj CLI.

Rozwiązanie

Od października 2017 r. Najlepszą poprawką jest po prostu samodzielna instalacja za pomocą npm, jak wspomniałem powyżej:

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

Powodzenia!


Konieczne może być również zaktualizowanie pliku package.json za pomocą zone.js do wersji 0.8.4, a następnie uruchomienie aktualizacji npm, a następnie spróbuj wykonać powyższą instalację.
Jason

1
Mam tu nowy problem. Nie można znaleźć modułu „./in-memory-data.service”.
Kannan T

@kannan - 1. Czy zainstalowałeś angular-in-memory-web-apiz npm? 2. Czy angular-in-memory-web-apiw twoim jest wpis dla package.json? 3. spróbuj zabić i ponownie uruchomić Angular CLI: Ctrl+Czabić; ng servezrestartować). Czasami CLI zachowuje się dziwnie (tak samo w przypadku wtyczki Angular dla VSCode)
Master of Ducks

@MasterofDucks Bro rozwiązał to wczoraj, problem polegał na tym, że nie utworzyłem pliku, dlatego. dzięki za pomoc :)
Kannan T

15

Mi to pasuje:

W zestawie bloków zależności package.json (użyj „angular” zamiast „angular2”)

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

Następnie uruchomić

 npm install

LUB

po prostu biegnij (moje preferowane)

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

14

Obecnie robię samouczek i miałem podobny problem. Wydaje się, że naprawiło to dla mnie zdefiniowanie głównego pliku 'angular2-in-memory-web-api'w packageszmiennej w systemjs.config.js:

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

Zanim to dodałem, zarejestrowano błąd 404 w /node_modules/angular2-in-memory-web-api/miejscu, w którym wydawało się, że próbuje załadować plik JavaScript. Teraz ładuje /node_modules/angular2-in-memory-web-api/index.jsi inne pliki w tym module.


2
Obecnie wydaje się, że w części dotyczącej HTTP w samouczku Tour of Heroes występuje kilka błędów.
Grant Taylor

To nie pomaga w przypadku mojego błędu (z omawianym błędem).
toni

Najpierw musiałem zaktualizować „angular2-in-memory-web-api” (patrz odpowiedź @traneHead), a następnie zastosować tę odpowiedź.
dzisiaj

Dzięki, rozwiązałem mój problem. Nie musiałem podbijać do 0.0.10, jak wyjaśniają inni.
Radek Skokan

10

To rozwiązało problem 404

Z dokumentacji Angular in-memory-web-api

Zawsze importuj InMemoryWebApiModule po HttpModule, aby upewnić się, że dostawca XHRBackend InMemoryWebApiModule zastępuje wszystkie inne.

Importy modułów powinny mieć InMemoryWebApiModule wymienione po HttpModule

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

1
Istotne jest również, że pojawia się po zaimportowaniu tras, takich jak AppRoutingModule w wersji demonstracyjnej Angular2. Miałem AppRoutingModule po InMemoryWebApiModule.forRoot (InMemoryDataService) i wszystko psuje.
Mark

6

Z folderu głównego (folder zawiera plik package.json), używając:

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

pracował dla mnie, korzystając z nowego przewodnika szybkiego startu z Angular-cli
OST

@OST Dude nawet używam angular-cli, ale napotykam ten błąd Nie można znaleźć modułu „./in-memory-data.service”.
Kannan T

5

Najprostszym rozwiązaniem, jakie przyszło mi do głowy, było zainstalowanie pakietu za pomocą npm i ponowne uruchomienie serwera:

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

Prawie zainstalowałem pakiet angular2-in-memory-web-api , ale strona npm mówi:

Wszystkie wersje po 0.0.21 są (lub wkrótce będą) dostarczane z angular -in-memory-web-api .

Uwaga : to rozwiązanie działało w przypadku projektu utworzonego za pomocą narzędzi CLI, który nie wymienia pakietu jako zależności i może nie rozwiązać problemu w przypadku projektów utworzonych za pomocą materiału siewnego Quickstart, który wymienia pakiet jako zależność .


Mój problem polegał na tym, że ng servenadal działało podczas instalacji. Musiałem go zamknąć i uruchomić ponownie.
Jorn.Beyers

4

Używam kątowej 4 i poniżej rozwiązało mój problem.

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


Cześć, nawet używam kątowej 4, którą zrobiłem tak, jak powiedziałeś, ale mam tutaj nowy problem Nie można znaleźć modułu „./in-memory-data.service”.
Kannan T

3

To był prawdziwy śmierdzący. Dzięki @traneHead, @toni i innym te kroki zadziałały dla mnie.

  1. Uaktualnij angular2-in-memory-web-apido0.0.10
  2. Edytuj właściwość zmiennej packages w systemjs.config.js:

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


Ten film może być również pomocny: Samouczek Angular2 - HTTP
AnderSon

3

Tworzę projekt za pomocą angular-cli i ustawiam w package.json "angular-in-memory-web-api": "^ 0.2.4" w bloku zależności, a następnie uruchamiam npm install.

Pracuj dla mnie: D


Jakieś zalecenia dotyczące przyczyny tego problemu? Albo jaką konfigurację mogą zweryfikować lub zmienić, aby wyeliminować problem? Być może zawartość pliku „package.json” mogłaby pomóc.
Joshua Briefman

3

W przypadku użytkowników, którzy wygenerowali pusty projekt za pomocą kątowego cli 1.4.9 (stan faktyczny w październiku 2017 r.), A następnie zaczęli postępować zgodnie z instrukcjami krok po kroku, po prostu uruchom następujące polecenie:

npm i angular-in-memory-web-api

Tylko to polecenie, bez niczego dodatkowego.

Mam nadzieję, że to oszczędza komuś czas


2

Jeśli używasz kątowego CLI, otrzymasz ten błąd.

Dodaj 'angular2-in-memory-web-api'w const barrelspliku system-config.ts jak poniżej:

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

I dodaj 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'jak poniżej.

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,

});

Przebuduj używając npm start. To rozwiązało problem.


0

Spróbuj dodać definicje maszynopisu:

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

... określając nazwę zależności:

angular2-in-memory-web-api

Następnie dodaj punkt wejścia dla „angular2-in-memory-web-api” w /systemjs.config.js

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

Zainstalowałem napisy, tak jak napisałeś. Zmieniło to zawartość folderu typings (dodano „\ definitions \ in-memory-backend.service \ index.d.ts” do przeglądarki i głównych podfolderów oraz dodano odniesienie w plikach browser.d.ts i main.d.ts ). Co rozumiesz przez „określenie nazwy zależności”? Dodałem punkt wejścia zgodnie z opisem. Ale mój błąd nadal występuje.
toni

Po uruchomieniu „sudo typings install ...”, przy wpisywaniu powinno pojawić się pytanie „Jaka jest nazwa zależności?” a następnie możesz wpisać „angular2-in-memory-web-api”.
user1014932

Moja odpowiedź dotyczyła angular2-in-memory-web-api v0.0.7 btw.
user1014932

0

Miałem ten sam problem, zmieniłem w systemjs.config:

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

W tej linii:

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

0

Zmiana tej linii, jak zasugerowano powyżej, zadziałała dla mnie w samouczku Angular 2 Heroes:

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

0

Rozwiązałem to kopiowanie index.jsi index.d.tsdo core.jsa core.d.ts, to znaczy wewnątrz node_modules/angular2-in-memory-web-apifolderu. Idź się przekonać.


0

Główna odpowiedź pomogła mi: zmiana

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

do

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

0

w app \ main.ts po prostu zmodyfikuj:

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

do:

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

następnie dodaj parametr index.js w

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

w systemjs.config.js

to dla mnie praca.


0

Ostatnia poprawka na ten dzień to

  1. zamień wszystkie wystąpienia „angular2-in-memory-web-api” na „angular-in-memory-web-api”.
  2. Zmień wersję zależności package.json z "angular-in-memory-web-api": "0.0.20"na "angular-in-memory-web-api": "0.1.0" i "zone.js": "^0.6.23"na"zone.js": "^0.6.25"
  3. W systemjs.config.js zmień ścieżkę do pliku index.js. Powinien wyglądać następująco:
    'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

0

Od ostatniego (obecnie 0.1.14), jest to zawarte w CHANGELOG

W systemjs.config.jsnależy zmienić mapowanie na:

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

następnie usuń z packages:

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

0

Otrzymałem ten błąd, ponieważ importowałem InMemoryWebApiModulez. angular2-in-memory-web-apiUsunąłem 2. W rzeczywistości miałem dwa wpisy w moim pliku package.json; jeden był, angular2-in-memory-web-apia drugi był angular-in-memory-web-api. Użycie angular-in-memory-web-apirozwiązało problem za mnie. Więc twój import powinien wyglądać tak:

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

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

Używając kli-kątowego nie musisz nic zmieniać system.config.js.


0

U mnie działa po prostu instalacja z katalogu angular-tour-of-heroes

C: \ nodejs \ angular-tour-of-heroes> npm install angular-in-memory-web-api --save



0

Napotkałem podobny problem. Właśnie pobrałem cały przykład pod koniec części 7 (ostatniej części) samouczka i uruchomiłem go. Zadziałało.

Oczywiście najpierw musisz wszystko zainstalować i skompilować.

> npm install
> npm start

Zmieniłem również „app-root” na „my-app” w app.component.ts.


0

Jeśli używasz angular cli do tworzenia aplikacji angular2, w tym angular2-in-memory-web-api, obejmuje trzy kroki:

  1. dodaj interfejs API do pliku system-config.ts (w podkatalogu src), jak poniżej:

    /** 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. Dodaj

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

do tablicy vendorNpmFiles w pliku angular-cli-build.js, jak wspomniany w Shard;

  1. Oczywiście dodaj do pliku package.json zgodnie z opisem w traneHead; dla 2.0.0-rc.3 używam wersji poniżej:

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

Uważam, że ten link „Dodawanie materiału2 do projektu” dość jasno wyjaśnia proces dodawania bibliotek innych firm.


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

InMemoryDataServiceKlasa nie podlega jakiejkolwiek API. Musimy utworzyć klasę usług, a następnie zaimportować ją do pliku app.module.ts.


-1

Toni, musisz dodać typy dla Angular2-in-memory-web-api.

Dodaj je do swojego pliku TS.

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.