Hướng dẫn Angular2 (Tour of Heroes): Không thể tìm thấy mô-đun 'angle2-in-memory-web-api'


99

Tôi đã làm theo Hướng dẫn . Sau khi thay đổi app/maint.tstrong chương Http, tôi gặp lỗi khi khởi động ứng dụng qua dòng lệnh:

app / main.ts (5,51): lỗi TS2307: Không thể tìm thấy mô-đun 'angle2-in-memory-web-api'.

(Visual Studio Code cho tôi cùng một lỗi trong main.ts - gạch dưới gợn sóng màu đỏ.)

Đây là của tôi 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);

Đây là của tôi 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
]);

Câu trả lời:


66

Đối với tôi, giải pháp duy nhất là nâng cấp angular2-in-memory-web-apilên 0.0.10.

Trong package.jsonbộ

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

trong khối phụ thuộc và trong systemjs.config.jsbộ

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

trong packagesđối tượng.


4
Điều đó đã sửa lỗi mô-đun. Sau đó, tôi gặp lỗi 404 - tôi cần chỉ định 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }trong tệp systemjs.config.js (xem câu trả lời của @GrantTaylor).
toni

4
Đặc biệt lưu ý, nếu bạn đang sử dụng angle-cli để phát triển ứng dụng của mình thì bạn phải thêm 'angular2-in-memory-web-api/**/*.+(js|js.map)'vào vendorNpmFilesmảng trong tệp angle-cli-build.js. Aftewards, bạn phải trỏ bản đồ system-config của bạn như sau: 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'. Và sau đó chạy lại ng serve(hoặc npm start) để các tệp angle2-in-memory-web-api kết thúc trong thư mục dist / nhà cung cấp.
ofShard

4
Nếu bạn đang sử dụng góc 2 plugin của Eclipse, dòng sau đi trong package.json, trong dependenciesphần: "angular-in-memory-web-api": "0.1.1". Tuy nhiên, tôi đã phải chạy npm installtừ thư mục dự án sau đó.
João Mendes

1
Tôi vẫn đang phải đối mặt với vấn đề này :( thậm chí sau khi làm theo các bước cần thiết
Hassan Tariq

5
Tôi thậm chí không có tệp systemjs.config.js ở bất kỳ đâu trong dự án của mình. Tuy nhiên, tôi đang sử dụng Angular4.
bleistift2

101

Đối với các dự án được tạo bằng Công cụ CLI hiện tại, nó hoạt động với tôi bằng cách cài đặt

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

và sau đó thực hiện nhập dưới dạng

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

My 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
Cảm ơn, tôi cũng phải nhập InMemoryDbService dưới dạng: nhập {InMemoryDbService} từ 'angle-in-memory-web-api / in-memory-backend.service';
Baris Atamer

4
Sau khi chạy npm installlệnh, tôi nhận được phiên bản 0.3.2. Với phiên bản đó, tôi có thể giống import { InMemoryWebApiModule } from 'angular-in-memory-web-api';như mô tả trong chuyến tham quan.
comecme

Như @comecme đã chỉ ra, sau khi chạy npm install, import { InMemoryWebApiModule } from 'angular-in-memory-web-api'hoạt động.
ajay_whiz

21

Đây là những gì đã làm việc cho tôi:

Tôi nhận thấy rằng package.json có phiên bản sau:

"angle 2 -in-memory-web-api": "0.0.20"

Lưu ý " 2 " trong tên.

Tuy nhiên, khi tham chiếu InMemoryWebApiModule, nó đang sử dụng 'angle-in-memory-web-api' mà không có 2 trong tên. Vì vậy, tôi đã thêm nó và nó đã giải quyết được sự cố:

nhập {InMemoryWebApiModule} từ 'angle2-in-memory-web-api';

Lưu ý : Tôi tìm thấy điều này trong phần thông báo của https://github.com/angular/in-memory-web-api

Kể từ v.0.1.0, gói npm đã được đổi tên từ angle2-in-memory-web-api thành tên hiện tại của nó là angle-in-memory-web-api. Tất cả các phiên bản sau 0.0.21 đều được xuất xưởng dưới tên này. Đảm bảo cập nhật các câu lệnh package.json và import của bạn.


18

Angular 4 thay đổi

Kể từ ngày 17 tháng 10 năm 2017, hướng dẫn không đề cập đến điều đó angular-in-memory-web-apikhông được bao gồm trong bản dựng CLI tiêu chuẩn và phải được cài đặt riêng. Điều này có thể dễ dàng thực hiện với npm:

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

Điều này tự động xử lý các thay đổi cần thiết đối với package.json, vì vậy bạn không cần phải tự mình thực hiện các chỉnh sửa.

Điểm nhầm lẫn

Chủ đề này khá khó hiểu vì Angular CLI đã thay đổi đáng kể kể từ khi chủ đề này được bắt đầu; một vấn đề với nhiều API phát triển nhanh chóng.

  • angular-in-memory-web-apiđã được đổi tên; nó giảm 2 từ góc 2 xuống đơn giảnangular
  • Angular CLI không còn sử dụng SystemJS (được thay thế bằng Webpack) nên systemjs.config.jskhông còn tồn tại.
  • npm's package.jsonkhông nên chỉnh sửa trực tiếp; sử dụng CLI.

Giải pháp

Kể từ tháng 10 năm 2017, cách khắc phục tốt nhất là chỉ cần tự cài đặt nó bằng cách sử dụng npm, như tôi đã đề cập ở trên:

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

Chúc bạn may mắn!


Ngoài ra, bạn có thể cần cập nhật tệp package.json với zone.js lên 0.8.4, sau đó chạy cập nhật npm và sau đó thử cài đặt ở trên.
Jason

1
Tôi đang gặp sự cố mới ở đây Không thể tìm thấy mô-đun './in-memory-data.service'.
Kannan T

@kannan - 1. Bạn đã cài đặt angular-in-memory-web-apivới npm? 2. Có một mục cho angular-in-memory-web-apitrong của bạn package.json? 3. thử giết và khởi động lại Angular CLI: Ctrl+Cđể giết; ng servekhởi động lại). Đôi khi CLI hành động kỳ lạ (Ditto cho plugin góc cho VSCode)
Thạc sĩ Vịt

@MasterofDucks Bro đã giải quyết vấn đề này ngày hôm qua, vấn đề là tôi chưa tạo tệp đó là lý do tại sao. cảm ơn vì sự giúp đỡ của bạn :)
Kannan T

15

Nó hoạt động cho tôi:

Trong tập hợp khối phụ thuộc package.json (sử dụng "angle" thay vì "angle2")

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

Sau đó chạy

 npm install

HOẶC LÀ

đơn giản chỉ cần chạy (thích hợp của tôi)

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

14

Tôi hiện đang thực hiện hướng dẫn và gặp sự cố tương tự. Những gì có vẻ như đã cố định nó đối với tôi là việc xác định một tập tin chính cho 'angular2-in-memory-web-api'trong packagesbiến trong systemjs.config.js:

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

Trước khi tôi thêm điều này, có một lỗi 404 được ghi lại cho /node_modules/angular2-in-memory-web-api/vị trí có vẻ như nó đang cố tải một tệp JavaScript. Bây giờ nó tải /node_modules/angular2-in-memory-web-api/index.jsvà các tệp khác trong mô-đun này.


2
Hiện tại có vẻ như có một số lỗi với phần HTTP của hướng dẫn Tour of Heroes.
Grant Taylor

Điều này không giúp ích cho lỗi của tôi (với lỗi được đề cập).
toni

Trước tiên, tôi phải cập nhật ´angular2-in-memory-web-api´ (xem câu trả lời của @traneHead), sau đó áp dụng câu trả lời này.
toni

Cảm ơn, đã giải quyết vấn đề của tôi. Tôi không cần phải tăng lên đến 0,0.10 như những người khác giải thích.
Radek Skokan

10

Điều này đã giải quyết vấn đề 404

Từ Tài liệu Angular in-memory-web-api

Luôn nhập InMemoryWebApiModule sau HttpModule để đảm bảo rằng nhà cung cấp XHRBackend của InMemoryWebApiModule thay thế tất cả những thứ khác.

Nhập mô-đun phải có InMemoryWebApiModule được liệt kê sau HttpModule

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

1
Điều quan trọng nữa là nó xuất hiện sau khi nhập các tuyến như AppRoutingModule trong bản demo Angular2. Tôi đã có AppRoutingModule sau InMemoryWebApiModule.forRoot (InMemoryDataService) và nó phá vỡ mọi thứ.
Đánh dấu

6

Từ thư mục gốc của bạn (thư mục chứa package.json), sử dụng:

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

đã làm việc cho tôi bằng cách sử dụng hướng dẫn bắt đầu nhanh mới với Angular-cli
OST

@OST Anh bạn thậm chí đang sử dụng angle-cli nhưng gặp lỗi này Không thể tìm thấy mô-đun './in-memory-data.service'.
Kannan T

5

Giải pháp đơn giản nhất mà tôi có thể nghĩ đến là cài đặt gói với npm và khởi động lại máy chủ:

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

Tôi gần như đã cài đặt gói angle2-in-memory-web-api , nhưng trang npm cho biết:

Tất cả các phiên bản sau 0.0.21 đều (hoặc sẽ sớm được) xuất xưởng theo góc-trong-bộ-nhớ-web-api .

Lưu ý : Giải pháp này hoạt động đối với một dự án được tạo bằng các công cụ CLI, không liệt kê gói dưới dạng phụ thuộc và có thể không giải quyết được vấn đề đối với các dự án được tạo bằng hạt giống Quickstart, công cụ này liệt kê gói là phụ thuộc .


Vấn đề của tôi ng servelà vẫn chạy trong khi cài đặt này. Đã phải tắt nó và khởi động lại.
Jorn.Beyers

4

Tôi đang sử dụng góc 4 trở xuống đã giải quyết được vấn đề của mình.

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


xin chào thậm chí tôi đang sử dụng angle 4, tôi đã làm như bạn đã nói nhưng đang gặp phải vấn đề mới ở đây Không thể tìm thấy mô-đun './in-memory-data.service'.
Kannan T

3

Đây là một kẻ hôi thối thực sự. Cảm ơn @traneHead, @toni và những người khác, các bước này đã hiệu quả với tôi.

  1. Nâng cấp angular2-in-memory-web-apilên0.0.10
  2. Chỉnh sửa thuộc tính biến gói trong systemjs.config.js:

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


Video này cũng có thể hữu ích: Hướng dẫn Angular2 - HTTP
AnderSon

3

Tôi tạo dự án của mình bằng cách sử dụng angle-cli và tôi đặt trong package.json "angle-in-memory-web-api": "^ 0.2.4" trong khối phụ thuộc và sau đó tôi chạy npm install.

Làm việc cho tôi: D


Bất kỳ khuyến nghị nào về số lượng đang gây ra vấn đề này? Hoặc những gì họ có thể cấu hình họ có thể xác minh hoặc thay đổi để loại bỏ vấn đề? Có lẽ nội dung của "package.json" của bạn có thể hữu ích.
Joshua Briefman,

3

Đối với những người dùng đã tạo một dự án trống với góc cli 1.4.9 (Thực tế vào tháng 10 năm 2017) và sau đó bắt đầu làm theo hướng dẫn từng bước, chỉ cần chạy lệnh sau:

npm i angular-in-memory-web-api

Chỉ lệnh đó, không có bất cứ điều gì bổ sung.

Hy vọng điều đó tiết kiệm thời gian của ai đó


2

Nếu bạn đang sử dụng cli góc, bạn sẽ gặp lỗi này.

Vui lòng thêm 'angular2-in-memory-web-api'vào const barrelstrong tệp system-config.ts như sau:

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

Và thêm 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'như bên dưới.

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,

});

Xây dựng lại bằng cách sử dụng npm start. Điều này đã giải quyết vấn đề cho tôi.


0

Hãy thử thêm các định nghĩa kiểu chữ:

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

... xác định tên phụ thuộc:

angular2-in-memory-web-api

Sau đó, thêm điểm nhập cho "angle2-in-memory-web-api" trong /systemjs.config.js

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

Tôi đã cài đặt kiểu chữ như bạn đã viết. Điều đó đã thay đổi nội dung của thư mục đánh máy (đã thêm "\ định nghĩa \ in-memory-backend.service \ index.d.ts" vào trình duyệt và các thư mục con chính, đồng thời thêm tham chiếu trong các tệp browser.d.ts và main.d.ts ). Ý bạn là gì khi "chỉ định tên phụ thuộc" ?. Tôi đã thêm điểm vào như bạn chỉ định. Nhưng lỗi của tôi vẫn còn.
toni

Khi bạn chạy "sudo typings install ...", các kiểu gõ sẽ hỏi bạn "Tên phụ thuộc là gì?" và sau đó bạn có thể nhập "angle2-in-memory-web-api".
user1014932

Câu trả lời của tôi được áp dụng cho angle2-in-memory-web-api v0.0.7 btw.
user1014932

0

Tôi đã gặp vấn đề tương tự, tôi đã thay đổi trong systemjs.config:

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

Bởi dòng này:

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

0

Thay đổi dòng này, như đã đề xuất ở trên, phù hợp với tôi trong Hướng dẫn Angular 2 Heroes:

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

0

Tôi đã giải quyết nó sao chép index.jsindex.d.tsđến core.jscore.d.ts, tức là, node_modules/angular2-in-memory-web-apithư mục bên trong . Đi tìm hiểu.


0

Câu trả lời chính đã giúp tôi: thay đổi

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

đến

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

0

trong app \ main.ts chỉ cần sửa đổi:

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

đến:

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

sau đó thêm tham số index.js vào

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

trong systemjs.config.js

nó làm việc cho tôi.


0

Bản sửa lỗi mới nhất kể từ ngày này, là

  1. thay thế tất cả các phiên bản của "angle2-in-memory-web-api" bằng "angle-in-memory-web-api".
  2. Thay đổi phiên bản phụ thuộc package.json từ "angular-in-memory-web-api": "0.0.20"thành "angular-in-memory-web-api": "0.1.0""zone.js": "^0.6.23"thành"zone.js": "^0.6.25"
  3. Trong systemjs.config.js, hãy thay đổi đường dẫn cho index.js. Nó sẽ giống như:
    'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

0

Tính đến mới nhất (hiện tại là 0,1.14), đây là những gì được nêu trong CHANGELOG

Trong systemjs.config.jsbạn nên thay đổi ánh xạ thành:

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

sau đó xóa khỏi packages:

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

0

Tôi gặp lỗi này vì tôi đang nhập InMemoryWebApiModuletừ angular2-in-memory-web-apiTôi đã xóa 2. Thực ra tôi có hai mục nhập trong tệp package.json của mình; một là angular2-in-memory-web-apivà thứ hai là angular-in-memory-web-api. Sử dụng đã angular-in-memory-web-apigiải quyết được vấn đề cho tôi. Vì vậy, quá trình nhập của bạn sẽ như thế này:

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

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

Sử dụng cli-angle, bạn không cần thay đổi bất cứ điều gì liên quan system.config.js.


0

Đối với tôi, chỉ thực hiện cài đặt từ thư mục angle-tour-of-hero hoạt động cho tôi

C: \ nodejs \ angle-tour-of-hero> npm install angle-in-memory-web-api --save



0

Tôi gặp phải một vấn đề tương tự. Tôi vừa tải xuống toàn bộ ví dụ gần cuối phần 7 (phần cuối) của hướng dẫn và chạy nó. Nó đã làm việc.

Tất nhiên, bạn cần cài đặt và biên dịch mọi thứ trước.

> npm install
> npm start

Tôi cũng đã thay đổi 'app-root' thành 'my-app' trong app.component.ts.


0

Nếu sử dụng angle cli để xây dựng ứng dụng angle2 của bạn, bao gồm cả angle2-in-memory-web-api, bao gồm ba bước:

  1. thêm api vào tệp system-config.ts (bên trong thư mục con src) như bên dưới:

    /** 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. Thêm vào

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

đến mảng nhà cung cấpNpmFiles trong tệp angle-cli-build.js như ofShard đã đề cập;

  1. Tất nhiên, hãy thêm vào package.json như được mô tả bởi traneHead; cho 2.0.0-rc.3, tôi sử dụng phiên bản bên dưới:

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

Tôi tìm thấy liên kết này "Thêm material2 vào dự án của bạn" giải thích quá trình thêm thư viện của bên thứ ba khá rõ ràng.


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

Các InMemoryDataServicelớp không phải chịu bất kỳ API. Chúng ta cần tạo một lớp dịch vụ và sau đó nhập lớp dịch vụ đó vào tệp app.module.ts.


-1

Toni, Bạn cần thêm kiểu chữ cho Angular2-in-memory-web-api.

Thêm chúng vào tệp TS của bạn.

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.