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

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.

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

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.

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!

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

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.

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

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

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

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ść .

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

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

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

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

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

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.

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

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

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

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

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

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.

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

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

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.

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

Najlepszym sposobem jest zainstalowanie go za pomocą NPM np

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

doda wymagane odniesienie

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.

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;

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

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.

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”