Angular2 Tutorial (Tour of Heroes): 'angular2-in-memory-web-api' modülü bulunamıyor


99

Öğreticiyi takip ettim . app/maint.tsHttp bölümünü değiştirdikten sonra uygulamayı komut satırı üzerinden başlatırken hata alıyorum:

app / main.ts (5,51): TS2307 hatası: 'bellek içi-web-api' modülü bulunamıyor.

(Visual Studio Code, main.ts içinde aynı hatayı veriyor - kırmızı dalgalı alt çizgi.)

İşte benim 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);

İşte benim 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
]);

Yanıtlar:


66

Benim için tek çözüm yükseltmek oldu angular2-in-memory-web-apiiçin 0.0.10.

In package.jsonseti

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

bağımlılıklar bloğunda ve systemjs.config.jssette

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

içinde packagesbir nesne.


4
Bu, modül hatasını düzeltti. Bundan sonra 404 hatası aldım - 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }systemjs.config.js dosyasında belirtmem gerekiyordu (@GrantTaylor tarafından verilen cevaba bakınız).
toni

4
Başvurunuzu geliştirmek için açısal-cli kullanıyorsanız Özellikle dikkat edilmesi, ardından eklemek gerekir 'angular2-in-memory-web-api/**/*.+(js|js.map)'için vendorNpmFilesaçısal-cli-build.js dosyasında dizisi. Aftewards, bunu gibi system-config haritayı işaret etmelidir: 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'. Ve sonra yeniden çalıştırın ng serve(veya npm start), böylece bellekteki angular2 web-api dosyaları dist / vendor klasörüne düşer.
ofShard

4
Eğer Açısal 2 Eclipse eklentisi kullanıyorsanız, aşağıdaki satırı içinde, package.json gider dependenciesbölümüne: "angular-in-memory-web-api": "0.1.1". Daha npm installsonra proje klasöründen çalıştırmak zorunda kaldım .
João Mendes

1
Hala bu sorunla karşı karşıyayım :( gerekli adımları
Hassan Tariq

5
Projemin hiçbir yerinde systemjs.config.js dosyam bile yok. Yine de Angular4 kullanıyorum.
bleistift2

101

Mevcut CLI Araçları kullanılarak oluşturulan projelere gelince, yükleyerek benim için çalıştı

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

ve sonra olarak içe aktarma gerçekleştirin

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

Benim 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
Teşekkürler, ayrıca InMemoryDbService'i şu şekilde içe aktarmak zorunda kaldım: {InMemoryDbService} hizmetini 'angular-in-memory-web-api / in-memory-backend.service'den içe aktarın;
Barış Atamer

4
npm installKomutu çalıştırdıktan sonra 0.3.2 sürümünü edindim. Bu versiyonla, import { InMemoryWebApiModule } from 'angular-in-memory-web-api';turda anlatıldığı gibi yapabilirim .
comecme

@Comecme çalıştırdıktan sonra, işaret ettiği gibi npm install, import { InMemoryWebApiModule } from 'angular-in-memory-web-api'çalışır.
ajay_whiz

21

İşte benim için işe yarayan şey:

Package.json'un aşağıdaki sürüme sahip olduğunu fark ettim:

"açısal 2 -bellek içi web-api": "0.0.20"

" 2 " yi .

Bununla birlikte, InMemoryWebApiModule'a başvururken, adında 2 olmadan 'bellek içi açısal web api' kullanıyordu. Ben de ekledim ve sorunu çözdü:

"angular2-in-memory-web-api" den {InMemoryWebApiModule} dosyasını içe aktarın;

Not : Bunu https://github.com/angular/in-memory-web-api'nin bildirim bölümünde buldum

V.0.1.0 itibariyle, npm paketi angular2-in-memory-web-api'den angular-in-memory-web-api olarak yeniden adlandırıldı. 0.0.21'den sonraki tüm sürümler bu isim altında gönderilir. Package.json ve import ifadelerinizi güncellediğinizden emin olun.


18

Açısal 4 Değişiklik

17 Ekim 2017 itibariyle, eğitici angular-in-memory-web-apistandart bir CLI yapısına dahil edilmediğinden ve ayrı olarak yüklenmesi gerektiğinden bahsetmiyor . Bu, aşağıdakilerle kolayca yapılabilir npm:

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

Bu, üzerinde gerekli değişiklikleri otomatik olarak gerçekleştirir package.json, böylece kendi başınıza düzenleme yapmanız gerekmez.

Karışıklık noktaları

Bu ileti dizisi başlatıldığından beri Angular CLI önemli ölçüde değiştiğinden bu ileti dizisi oldukça kafa karıştırıcıdır; hızla gelişen birçok API ile ilgili bir sorun.

  • angular-in-memory-web-apiyeniden adlandırıldı; Bu damla 2 , açısal 2 basitçeangular
  • Angular CLI artık SystemJS'yi (Webpack ile değiştirildi) kullanmadığından systemjs.config.jsartık mevcut değildir.
  • npm'ler package.jsondoğrudan düzenlenmemelidir; CLI'yi kullanın.

Çözüm

Ekim 2017'den itibaren, en iyi düzeltme, npmyukarıda bahsettiğim gibi, onu kullanarak kendiniz yüklemektir :

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

Orada iyi şanslar!


Ayrıca, zone.js ile package.json dosyasını 0.8.4'e güncellemeniz, ardından npm güncellemesini çalıştırmanız ve ardından yukarıdaki yüklemeyi denemeniz gerekebilir.
Jason

1
Burada yeni bir sorunla karşı karşıyayım './in-memory-data.service' modülü bulunamıyor.
Kannan T

@kannan - 1. angular-in-memory-web-apiile yüklediniz npmmi? 2. angular-in-memory-web-apiSizin için bir giriş var mı package.json? 3. Angular CLI: öldürmeyi ve yeniden başlatmayı deneyin Ctrl+C; ng serveyeniden başlatmak). Bazen CLI garip davranır (VSCode için Angular eklentisi için Ditto)
Master of Ducks

@MasterofDucks Bro dün bunu çözdü, sorun şu ki, dosyayı bu yüzden oluşturmadım. yardımınız için teşekkürler :)
Kannan T

15

Benim için çalışıyor:

Package.json bağımlılıklarında blok kümesi ("angular2" yerine "açısal" kullanın)

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

O zaman koş

 npm install

VEYA

sadece koş (benim tercihim)

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

14

Şu anda öğreticiyi yapıyorum ve benzer bir sorunla karşılaştım. Bunu benim için düzeltti gibi görünen şey 'angular2-in-memory-web-api', packagesdeğişkeninde bir ana dosya tanımlamak systemjs.config.js:

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

Bunu eklemeden önce, /node_modules/angular2-in-memory-web-api/bir JavaScript dosyasını yüklemeye çalışıyor gibi göründüğü yere ilişkin bir 404 hatası kaydedildi . Şimdi /node_modules/angular2-in-memory-web-api/index.jsbu modüldeki ve diğer dosyaları yükler .


2
Şu anda Tour of Heroes eğitiminin HTTP bölümünde birkaç hata var gibi görünüyor.
Grant Taylor

Bu benim hatamda yardımcı olmuyor (söz konusu hata ile).
toni

Önce ´angular2-in-memory-web-api´yi güncellemem gerekiyordu (@traneHead tarafından verilen cevaba bakınız) ve sonra bu cevabı uyguladım.
toni

Teşekkürler, sorunumu çözdüm. Diğerlerinin açıkladığı gibi 0.0.10'a çıkmam gerekmedi.
Radek Skokan

10

Bu 404 sorununu çözdü

Açısal bellek içi web api Belgelerinden

InMemoryWebApiModule'ün XHRBackend sağlayıcısının diğerlerinin yerini aldığından emin olmak için InMemoryWebApiModule'ü her zaman HttpModule'dan sonra içe aktarın.

Modül içe aktarmalarında HttpModule'dan sonra InMemoryWebApiModule listelenmelidir

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

1
Angular2 demosundaki AppRoutingModule gibi rotaları içe aktardıktan sonra gelmesi de çok önemlidir. InMemoryWebApiModule.forRoot (InMemoryDataService) sonrasında AppRoutingModule vardı ve her şeyi bozuyor.
Mark

6

Kök klasörünüzden (klasör package.json içerir), şunu kullanarak:

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

Angular-cli ile yeni hızlı başlangıç ​​kılavuzunu kullanarak benim için çalıştı
OST

@OST Ahbap, açısal-cli kullanıyorum bile ama bu hatayla karşılaşıyorum './in-memory-data.service' modülü bulunamıyor.
Kannan T

5

Aklıma gelen en basit çözüm, paketi npm ile kurmak ve sunucuyu yeniden başlatmaktı:

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

Neredeyse angular2-in-memory-web-api paketini yükledim , ancak npm sayfası şunu söylüyor:

0.0.21'den sonraki tüm sürümler, açısal bellek içi web api altında gönderilir (veya yakında gönderilecektir) .

Not : Bu çözüm, paketi bağımlılık olarak listelemeyen ve paketi bağımlılık olarak listeleyen Hızlı Başlangıç ​​çekirdeği ile oluşturulan projeler için sorunu çözemeyen CLI araçlarıyla oluşturulan bir proje için çalıştı. .


Benim sorunum, bu ng servekurulurken hala çalışıyordu. Kapatıp yeniden başlatmak zorunda kaldı.
Jorn.Beyers

4

Açısal 4 kullanıyorum ve aşağıda sorunumu çözdüm.

npm bellek içinde açısal web api yükleme - kaydet


merhaba ben bile açısal 4 kullanıyorum dediğin gibi yaptım ama burada yeni bir sorunla karşılaşıyorum './in-memory-data.service' modülü bulunamıyor.
Kannan T

3

Bu gerçek bir iğrençti. @TraneHead, @toni ve diğerleri sayesinde, bu adımlar benim için çalıştı.

  1. yükseltme angular2-in-memory-web-apiiçin0.0.10
  2. Paketler değişkeni özelliğini şurada düzenleyin systemjs.config.js:

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


Bu video da yardımcı olabilir: Angular2 Eğitimi - HTTP
AnderSon

3

Projemi açısal-cli kullanarak oluşturuyorum ve bağımlılıklar bloğunda package.json "angular-in-memory-web-api": "^ 0.2.4" içinde ayarlıyorum ve sonra npm kurulumunu çalıştırıyorum.

Benim için çalış: D


Bu soruna neden olan sayıyla ilgili herhangi bir öneriniz var mı? Veya sorunu ortadan kaldırmak için neyi doğrulayabilecekleri veya değiştirebilecekleri yapılandırmaları? Belki "package.json" dosyanızın içeriği yardımcı olabilir.
Joshua Briefman

3

Açısal cli 1.4.9 (Ekim 2017'de geçerli) ile boş bir proje oluşturan ve ardından talimatları adım adım izlemeye başlayan kullanıcılar için aşağıdaki komutu çalıştırmanız yeterlidir:

npm i angular-in-memory-web-api

Ek bir şey olmadan sadece bu komut.

Umarım bu birinin zamanını kurtarır


2

Açısal cli kullanıyorsanız, bu hatayı alırsınız.

Ekleyiniz 'angular2-in-memory-web-api'içinde const barrelsaşağıda gibi sistem config.ts dosyasında:

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

Ve 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'aşağıdaki gibi ekleyin .

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,

});

Kullanarak yeniden oluşturun npm start. Bu benim için sorunu çözdü.


0

Daktilo tanımlarını eklemeyi deneyin:

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

... bağımlılık adını belirterek:

angular2-in-memory-web-api

Sonra içinde "angular2-bellek-web api" için giriş noktası eklemek /systemjs.config.js

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

Yazılarını yazdığın gibi kurdum. Bu, typings klasörünün içeriğini değiştirdi (tarayıcıya ve ana alt klasörlere "\ definitions \ in-memory-backend.service \ index.d.ts" eklendi ve browser.d.ts ve main.d.ts dosyalarına referans eklendi ). "Bağımlılık adını belirterek" ne demek istiyorsun? Giriş noktasını belirttiğiniz gibi ekledim. Ama hatam hala devam ediyor.
toni

"Sudo typings install ..." komutunu çalıştırdığınızda, yazdıklarınız size "Bağımlılık adı nedir?" Diye sormalıdır. ve sonra "angular2-in-memory-web-api" girebilirsiniz.
user1014932

Cevabım angular2-in-memory-web-api v0.0.7 btw'ye uygulandı.
user1014932

0

Aynı sorunu yaşadım, systemjs.config dosyasında değiştim:

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

Bu satırla:

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

0

Bu satırı, yukarıda önerildiği gibi değiştirmek, Angular 2 Heroes Tutorial'da benim için çalıştı:

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

0

Ben kopyalama çözüldü index.jsve index.d.tskarşı core.jsve core.d.ts, yani iç node_modules/angular2-in-memory-web-apiklasörü. Git çöz.


0

Ana cevap bana yardımcı oldu: değişim

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

-e

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

0

app \ main.ts içinde basitçe değiştirin:

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

to:

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

daha sonra index.js parametresini ekleyin

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

systemjs.config.js'de

benim için çalışıyor.


0

Bu tarih itibariyle en son düzeltme,

  1. "angular2-in-memory-web-api" nin tüm örneklerini "angular-in-memory-web-api" ile değiştirin.
  2. Package.json bağımlılık sürümünü "angular-in-memory-web-api": "0.0.20"olarak "angular-in-memory-web-api": "0.1.0" ve ile "zone.js": "^0.6.23"değiştirin"zone.js": "^0.6.25"
  3. Systemjs.config.js'de, index.js için yolu değiştirin. Şöyle görünmeli:
    'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

0

En son (şu anda 0.1.14) itibarıyla, bu, CHANGELOG

Eşlemeyi systemjs.config.jsşu şekilde değiştirmelisiniz:

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

sonra şuradan sil packages:

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

0

Ben ithal ediyordu çünkü bu hata var InMemoryWebApiModuledan angular2-in-memory-web-apiben Aslında 2. kaldırıldı Benim package.json dosyasında iki girdileri vardı; biri öyleydi angular2-in-memory-web-apive ikincisi öyleydi angular-in-memory-web-api. Kullanmak angular-in-memory-web-apibenim için sorunu çözdü. Yani içe aktarmanız şu şekilde olmalıdır:

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

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

Cli-angular'ı kullanarak ilgili hiçbir şeyi değiştirmenize gerek yoktur system.config.js.


0

Benim için sadece açısal kahramanlar turu dizininden bir yükleme yapmak benim için çalışıyor

C: \ nodejs \ angular-tour-of-heroes> npm bellek içi açısal web api yükleme --save



0

Benzer bir sorunla karşılaştım. Sadece tüm örneği indirdim öğretici bir parçası 7 (son bölüm) sonuna yakın ve onu koştu. İşe yaradı.

Elbette önce her şeyi kurmanız ve derlemeniz gerekir.

> npm install
> npm start

Ayrıca app.component.ts içinde 'app-root'u' uygulamam 'olarak değiştirdim.


0

Angular2 uygulamanızı oluşturmak için angular2-in-memory-web-api dahil olmak üzere açısal cli kullanıyorsanız üç adımdan oluşur:

  1. api'yi system-config.ts dosyasına (src alt dizininin içinde) aşağıdaki gibi ekleyin:

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

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

bahsedilen Shard gibi açısal-cli-build.js dosyasındaki vendorNpmFiles dizisine;

  1. Elbette, traneHead tarafından açıklandığı gibi package.json'a ekleyin; 2.0.0-rc.3 için aşağıdaki sürümü kullanıyorum:

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

"Projenize material2 ekleme" bağlantısını üçüncü taraf kitaplıkları ekleme sürecini oldukça açık bir şekilde açıkladığını görüyorum .


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

InMemoryDataServiceSınıf herhangi API altında gelmiyor. Bir hizmet sınıfı oluşturmamız ve ardından bu hizmet sınıfını app.module.ts dosyasına aktarmamız gerekiyor.


-1

Toni, Angular2-in-memory-web-api için yazımları eklemelisin.

Bunları TS dosyanıza ekleyin.

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.