Tutorial Angular2 (Tour of Heroes): Tidak dapat menemukan modul 'angular2-in-memory-web-api'


99

Saya telah mengikuti Tutorial . Setelah mengubah app/maint.tsdi bab Http saya mendapatkan kesalahan saat memulai aplikasi melalui baris perintah:

app / main.ts (5,51): kesalahan TS2307: Tidak dapat menemukan modul 'angular2-in-memory-web-api'.

(Visual Studio Code memberi saya kesalahan yang sama dalam main.ts - garis bawah bergelombang merah.)

Ini milik saya 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);

Ini milik saya 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
]);

Jawaban:


66

Bagi saya, satu-satunya solusi adalah meningkatkan angular2-in-memory-web-apike 0.0.10.

di package.jsonset

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

di blok dependecies, dan di systemjs.config.jsset

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

di dalam packagesobjek.


4
Itu memperbaiki kesalahan modul. Setelah itu saya mendapat 404 kesalahan - Saya perlu menentukan 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }di file systemjs.config.js (lihat jawaban oleh @GrantTaylor).
toni

4
Catatan khusus, jika Anda menggunakan angular-cli untuk mengembangkan aplikasi Anda, maka Anda harus menambahkan 'angular2-in-memory-web-api/**/*.+(js|js.map)'ke vendorNpmFilesarray di file angular-cli-build.js. Aftewards, Anda harus menunjukkan Anda peta sistem-config seperti: 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'. Dan kemudian jalankan kembali ng serve(atau npm start) sehingga file angular2-in-memory-web-api berakhir di folder dist / vendor.
ofShard

4
Jika Anda menggunakan sudut 2 Eclipse Plugin, baris berikut masuk package.json, di dependenciesbagian: "angular-in-memory-web-api": "0.1.1". Saya harus lari npm installdari folder proyek setelah itu.
João Mendes

1
Saya masih menghadapi masalah ini :( bahkan setelah mengikuti langkah
Hassan Tariq

5
Saya bahkan tidak memiliki file systemjs.config.js di mana pun dalam proyek saya. Saya menggunakan Angular4, meskipun.
bleistift2

101

Adapun proyek yang dibuat menggunakan Alat CLI saat ini, itu berhasil untuk saya dengan menginstal

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

lalu melakukan impor sebagai

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

Package.json saya

> "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
Terima kasih, saya juga harus mengimpor InMemoryDbService sebagai: import {InMemoryDbService} dari 'angular-in-memory-web-api / in-memory-backend.service';
Baris Atamer

4
Setelah menjalankan npm installperintah, saya mendapatkan versi 0.3.2. Dengan versi itu, saya bisa import { InMemoryWebApiModule } from 'angular-in-memory-web-api';seperti yang dijelaskan dalam tur.
comecme

Seperti yang ditunjukkan @comecme, setelah berlari npm install, import { InMemoryWebApiModule } from 'angular-in-memory-web-api'berhasil.
ajay_whiz

21

Inilah yang berhasil untuk saya:

Saya perhatikan bahwa package.json memiliki versi berikut:

"angular 2 -dalam-memori-web-api": "0.0.20"

Catat angka " 2 " di namanya.

Namun saat mereferensikan InMemoryWebApiModule itu menggunakan 'angular-in-memory-web-api' tanpa 2 di namanya. Jadi saya menambahkannya dan menyelesaikan masalah:

impor {InMemoryWebApiModule} dari 'angular2-in-memory-web-api';

Catatan : Saya menemukan ini di bagian pemberitahuan https://github.com/angular/in-memory-web-api

Mulai v.0.1.0, paket npm telah diubah namanya dari angular2-in-memory-web-api menjadi namanya saat ini, angular-in-memory-web-api. Semua versi setelah 0.0.21 dikirimkan dengan nama ini. Pastikan untuk memperbarui package.json dan pernyataan impor Anda.


18

Angular 4 Perubahan

Mulai 17 Oktober 2017, tutorial gagal menyebutkan bahwa angular-in-memory-web-apitidak termasuk dalam build CLI standar, dan harus diinstal secara terpisah. Ini dapat dengan mudah dilakukan dengan npm:

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

Ini secara otomatis menangani perubahan yang diperlukan untuk package.json, jadi Anda tidak perlu melakukan pengeditan sendiri.

Titik-titik kebingungan

Utas ini cukup membingungkan karena CLI Angular telah berubah secara signifikan sejak utas ini dimulai; masalah dengan banyak API yang berkembang pesat.

  • angular-in-memory-web-apitelah diganti namanya; itu menjatuhkan 2 dari sudut 2 menjadi sederhanaangular
  • CLI Angular tidak lagi menggunakan SystemJS (diganti dengan Webpack), jadi systemjs.config.jstidak ada lagi.
  • npm's package.jsontidak harus diedit secara langsung; gunakan CLI.

Larutan

Pada Oktober 2017, perbaikan terbaik adalah menginstalnya sendiri menggunakan npm, seperti yang saya sebutkan di atas:

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

Semoga beruntung di luar sana!


Anda juga mungkin perlu memperbarui file package.json dengan zone.js ke 0.8.4 kemudian menjalankan pembaruan npm dan kemudian mencoba menginstal di atas.
Jason

1
Sedang menghadapi masalah baru di sini Tidak dapat menemukan modul './in-memory-data.service'.
Kannan T

@kannan - 1. Apakah Anda menginstal angular-in-memory-web-apidengan npm? 2. Apakah ada entri untuk angular-in-memory-web-apiAnda package.json? 3. coba bunuh dan mulai ulang CLI Angular: Ctrl+Cuntuk membunuh; ng serveuntuk memulai kembali). Terkadang CLI bertingkah aneh (Ditto for the Angular plugin for VSCode)
Master of Ducks

@MasterofDucks Bro menyelesaikan kemarin ini masalahnya adalah saya belum membuat file itu sebabnya. terima kasih atas bantuan Anda :)
Kannan T

15

Ini bekerja untuk saya:

Dalam set blok dependensi package.json (gunakan "angular" bukan "angular2")

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

Lalu lari

 npm install

ATAU

cukup jalankan saja (pilihan saya)

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

14

Saat ini saya sedang melakukan tutorial dan mengalami masalah serupa. Apa yang tampaknya telah tetap bagi saya adalah mendefinisikan file utama untuk 'angular2-in-memory-web-api'dalam packagesvariabel di systemjs.config.js:

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

Sebelum saya menambahkan ini, ada kesalahan 404 yang dicatat di /node_modules/angular2-in-memory-web-api/tempat yang tampaknya mencoba memuat file JavaScript. Sekarang itu memuat /node_modules/angular2-in-memory-web-api/index.jsdan file lain dalam modul ini.


2
Saat ini tampaknya ada beberapa kesalahan dengan bagian HTTP dari tutorial Tour of Heroes.
Grant Taylor

Ini tidak membantu dengan kesalahan saya (dengan kesalahan yang dimaksud).
toni

Pertama-tama saya harus memperbarui ´angular2-in-memory-web-api´ (lihat jawaban oleh @traneHead), dan kemudian menerapkan jawaban ini.
toni

Terima kasih, memecahkan masalah saya. Saya tidak perlu menaikkan hingga 0,0.10 seperti yang dijelaskan orang lain.
Radek Skokan

10

Ini memecahkan masalah 404

Dari Angular in-memory-web-api Documentation

Selalu impor InMemoryWebApiModule setelah HttpModule untuk memastikan bahwa penyedia XHRBackend dari InMemoryWebApiModule menggantikan yang lainnya.

Impor modul harus mencantumkan InMemoryWebApiModule setelah HttpModule

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

1
Ini juga penting bahwa itu datang setelah mengimpor rute seperti AppRoutingModule di demo Angular2. Saya memiliki AppRoutingModule setelah InMemoryWebApiModule.forRoot (InMemoryDataService) dan itu merusak segalanya.
Tandai

6

Dari folder root Anda (folder berisi package.json), menggunakan:

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

berhasil untuk saya menggunakan panduan ringkas baru dengan Angular-cli
OST

@OST Bung bahkan saya menggunakan angular-cli tetapi saya menghadapi kesalahan ini Tidak dapat menemukan modul './in-memory-data.service'.
Kannan T

5

Solusi paling sederhana yang dapat saya pikirkan adalah menginstal paket dengan npm dan memulai ulang server:

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

Saya hampir menginstal paket angular2-in-memory-web-api , tetapi halaman npm mengatakan:

Semua versi setelah 0.0.21 (atau akan segera) dikirimkan di bawah angular-in-memory-web-api .

Catatan : Solusi ini berfungsi untuk proyek yang dibuat dengan alat CLI, yang tidak mencantumkan paket sebagai dependensi, dan mungkin tidak memecahkan masalah untuk proyek yang dibuat dengan benih Quickstart, yang mencantumkan paket sebagai dependensi .


Masalah saya adalah yang ng servemasih berjalan saat ini sedang dipasang. Harus mematikannya dan memulai ulang.
Jorn.Beyers

4

Saya menggunakan sudut 4 dan di bawahnya memecahkan masalah saya.

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


hai bahkan saya menggunakan sudut 4 saya telah melakukan seperti yang Anda katakan tetapi saya menghadapi masalah baru di sini Tidak dapat menemukan modul './in-memory-data.service'.
Kannan T

3

Ini benar-benar menyebalkan. Terima kasih kepada @traneHead, @toni, dan lainnya, langkah-langkah ini berhasil untuk saya.

  1. Tingkatkan angular2-in-memory-web-apike0.0.10
  2. Edit properti variabel paket di systemjs.config.js:

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


Video ini mungkin juga bermanfaat: Tutorial Angular2 - HTTP
AnderS

3

Saya membuat proyek saya menggunakan angular-cli dan saya mengatur di package.json "angular-in-memory-web-api": "^ 0.2.4" di blok dependensi dan kemudian saya menjalankan npm install.

Bekerja untuk saya: D


Adakah rekomendasi tentang hitungan apa yang menyebabkan masalah ini? Atau konfigurasi apa yang dapat mereka verifikasi atau ubah untuk menghilangkan masalah? Mungkin konten "package.json" Anda bisa membantu.
Joshua Briefman

3

Untuk pengguna yang membuat proyek kosong dengan angular cli 1.4.9 (Sebenarnya pada Oktober 2017) dan kemudian mulai mengikuti petunjuk langkah demi langkah, cukup jalankan perintah berikut:

npm i angular-in-memory-web-api

Hanya perintah itu, tanpa tambahan apa pun.

Harapan itu menghemat waktu seseorang


2

Jika Anda menggunakan cli sudut, Anda akan mendapatkan kesalahan ini.

Harap tambahkan 'angular2-in-memory-web-api'di const barrelsfile system-config.ts seperti di bawah ini:

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

Dan tambahkan 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'seperti di bawah ini.

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,

});

Bangun kembali menggunakan npm start. Ini menyelesaikan masalah saya.


0

Coba tambahkan definisi skrip ketikan:

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

... menentukan nama ketergantungan:

angular2-in-memory-web-api

Kemudian tambahkan titik masuk untuk "angular2-in-memory-web-api" di /systemjs.config.js

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

Saya menginstal ketikan seperti yang Anda tulis. Itu mengubah konten folder ketikan (menambahkan "\ definitions \ in-memory-backend.service \ index.d.ts" ke browser dan subfolder utama, dan menambahkan referensi di file browser.d.ts dan main.d.ts ). Apa yang Anda maksud dengan "menentukan nama dependensi" ?. Saya menambahkan titik masuk seperti yang Anda tentukan. Tapi kesalahan saya masih berlanjut.
toni

Saat Anda menjalankan "sudo typings install ...", pengetikan akan menanyakan "Apa nama dependensi?" dan kemudian Anda bisa memasukkan "angular2-in-memory-web-api".
user1014932

Jawaban saya diterapkan ke angular2-in-memory-web-api v0.0.7 btw.
user1014932

0

Saya memiliki masalah yang sama, saya berubah di systemjs.config:

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

Dengan baris ini:

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

0

Mengubah baris ini, seperti yang disarankan di atas, berhasil untuk saya di Tutorial Angular 2 Heroes:

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

0

Saya menyelesaikannya dengan menyalin index.jsdan index.d.tske core.jsdan core.d.ts, yaitu, di dalam node_modules/angular2-in-memory-web-apifolder. Cari tahu.


0

Jawaban utama membantu saya: perubahan

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

untuk

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

0

di app \ main.ts cukup memodifikasi:

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

untuk:

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

lalu tambahkan parameter index.js di

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

di systemjs.config.js

itu berhasil untuk saya.


0

Perbaikan terbaru pada tanggal ini, adalah

  1. ganti semua instance "angular2-in-memory-web-api" dengan "angular-in-memory-web-api".
  2. Ubah versi dependensi package.json dari "angular-in-memory-web-api": "0.0.20"menjadi "angular-in-memory-web-api": "0.1.0" dan "zone.js": "^0.6.23"ke"zone.js": "^0.6.25"
  3. Di systemjs.config.js, ubah jalur untuk index.js. Ini akan terlihat seperti:
    'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

0

Sampai saat ini (saat ini 0.1.14), ini adalah yang tercantum di file CHANGELOG

Dalam systemjs.config.jsAnda harus mengubah pemetaan menjadi:

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

lalu hapus dari packages:

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

0

Saya mendapat kesalahan ini karena saya mengimpor InMemoryWebApiModuledari angular2-in-memory-web-apisaya menghapus 2. Sebenarnya saya memiliki dua entri di file package.json saya; yang satu angular2-in-memory-web-apidan yang kedua adalah angular-in-memory-web-api. Menggunakan angular-in-memory-web-apimemecahkan masalah bagi saya. Jadi impor Anda harus seperti ini:

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

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

Menggunakan cli-angular Anda tidak perlu mengubah apapun tentang system.config.js.


0

Bagi saya, hanya melakukan penginstalan dari direktori angular-tour-of-Heroes berhasil untuk saya

C: \ nodejs \ angular-tour-of-Heroes> npm instal angular-in-memory-web-api --save



0

Saya mengalami masalah serupa. Saya baru saja mengunduh seluruh contoh dekat akhir bagian 7 (bagian terakhir) dari tutorial dan menjalankannya. Berhasil.

Tentu saja, Anda perlu menginstal dan mengkompilasi semuanya terlebih dahulu.

> npm install
> npm start

Saya juga mengubah 'app-root' menjadi 'aplikasi-saya' di app.component.ts.


0

Jika menggunakan angular cli untuk membangun aplikasi angular2 Anda, termasuk angular2-in-memory-web-api melibatkan tiga langkah:

  1. tambahkan api ke file system-config.ts (di dalam subdirektori src) seperti di bawah ini:

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

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

ke larik vendorNpmFiles di file angular-cli-build.js seperti ofShard yang disebutkan;

  1. Tentu saja, tambahkan ke package.json seperti yang dijelaskan oleh traneHead; untuk 2.0.0-rc.3 saya menggunakan versi di bawah ini:

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

Saya menemukan tautan ini "Menambahkan material2 ke proyek Anda" menjelaskan proses penambahan pustaka pihak ketiga dengan cukup jelas.


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

The InMemoryDataServicekelas tidak berada di bawah API. Kita perlu membuat kelas layanan dan kemudian mengimpor kelas layanan itu ke file app.module.ts.


-1

Toni, Anda perlu menambahkan pengetikan untuk Angular2-in-memory-web-api.

Tambahkan mereka di file TS Anda.

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.