Không thể tìm thấy mô-đun './in-memory-data-service' trong chuyến tham quan các anh hùng cho Angular2

Question

Tôi đang cố gắng làm việc qua chuyến tham quan Angular2 của ứng dụng anh hùng và đang chạy vào các lỗi trên Http section of the tutorial.

Lúc đầu, tôi đã nhận được báo lỗi:

Cannot find module 'angular2-in-memory-web-api' 

Nhưng cố định rằng việc sử dụng các information from this question.

Tuy nhiên, ở bước này cùng tôi cũng đang nhận được lỗi sau:

app/app.module.ts(10,38): error TS2307: Cannot find module './in-memory-data-service'. 

Tôi đã ba kiểm tra và tôi tin rằng cả hai tập tin trong bộ nhớ dữ liệu-service.ts tôi và ứng dụng của tôi. tập tin module.ts là chính xác giống như được liệt kê trong hướng dẫn (tại thời điểm cụ thể này).

Ngay bây giờ trong bộ nhớ dữ liệu-service.ts tập tin của tôi trông như thế này:

Mã sản phẩm:

import { InMemoryDbService } from 'angular2-in-memory-web-api'; 
export class InMemoryDataService implements InMemoryDbService { 
createDb() { 
let heroes = [ 
    {id: 11, name: 'Mr. Nice'}, 
    {id: 12, name: 'Narco'}, 
    {id: 13, name: 'Bombasto'}, 
    {id: 14, name: 'Celeritas'}, 
    {id: 15, name: 'Magneta'}, 
    {id: 16, name: 'RubberMan'}, 
    {id: 17, name: 'Dynama'}, 
    {id: 18, name: 'Dr IQ'}, 
    {id: 19, name: 'Magma'}, 
    {id: 20, name: 'Tornado'} 
]; 
return {heroes}; 
    } 
} 

My app.module.ts tập tin trông như thế này :

CODE:

import './rxjs-extensions'; 

import { NgModule }    from '@angular/core'; 
import { BrowserModule }  from '@angular/platform-browser'; 
import { FormsModule }   from '@angular/forms'; 
import { HttpModule }   from '@angular/http'; 

//Imports for loading & configuring the in-memory web API 
import { InMemoryWebApiModule } from 'angular2-in-memory-web-api'; 
import { InMemoryDataService } from './in-memory-data-service'; 

import { AppComponent }   from './app.component'; 
import { DashboardComponent } from './dashboard.component'; 
import { HeroesComponent }  from './heroes.component'; 
import { HeroDetailComponent } from './hero-detail.component'; 
import { HeroService }   from './hero.service'; 
import { routing }    from './app.routing'; 

@NgModule({ 
    imports:  [ 
        BrowserModule, 
        FormsModule, 
        HttpModule, 
        InMemoryWebApiModule.forRoot(InMemoryDataService), 
        routing 
        ], 
    declarations: [ 
        AppComponent, 
        DashboardComponent, 
        HeroDetailComponent, 
        HeroesComponent 
        ], 
    providers:  [ 
        HeroService 
        ], 
bootstrap:  [ AppComponent ] 
}) 

export class AppModule { 
} 

Tôi không chắc liệu điều này có phải do một số loại phụ thuộc trong package.json hoặc systemjs.config không được đặt thích hợp hay không hoặc nếu có lỗi đơn giản tôi đang trợ giúp.

EDIT

systemjs.config.js My tập tin trông như thế này:

Mã sản phẩm:

(function (global) { 
System.config({ 
paths: { 
    // paths serve as alias 
    'npm:': 'node_modules/' 
}, 
// map tells the System loader where to look for things 
map: { 
    // our app is within the app folder 
    app: 'app', 
    // angular bundles 
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
    // other libraries 
    'rxjs':      'npm:rxjs', 
    'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 
}, 
// packages tells the System loader how to load when no filename and/or no extension 
packages: { 
    app: { 
    main: './main.js', 
    defaultExtension: 'js' 
    }, 
    rxjs: { 
    defaultExtension: 'js' 
    }, 
    'angular2-in-memory-web-api': { 
    main: 'index.js', 
    defaultExtension: 'js' 
    } 
} 
}); 
})(this); 

cấu trúc tập tin của tôi hiện trông như thế này:

Cấu trúc tệp:

Cảm ơn bạn.

Answer 1

Chỉ cần chắc chắn rằng tất cả các căn cứ của bạn được bảo hiểm

Trong bạn package.json, phải phù hợp với một trong những ngày this trang.

"angular-in-memory-web-api": "~0.1.1", 

Ngoài ra, systemjs.config tập tin của bạn có vẻ tốt quá!

Trong ứng dụng app.module của bạn.ts, hãy chắc chắn rằng nhập khẩu in-memory-data-service của bạn phù hợp với hồ sơ của bạn bởi vì trong ví dụ của họ, họ có in-memory-data.service

// Imports for loading & configuring the in-memory web api 
import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; 
import { InMemoryDataService } from './in-memory-data-service'; // <-- Make sure this matches the file name 

Vì vậy, tập tin của bạn nên được đặt tên là trong bộ nhớ dữ liệu-service.ts. Dường như với tôi rằng có một lỗi đánh máy hoặc một số loại vấn đề cấu trúc tập tin.

Có vẻ như bạn đã giải quyết được vấn đề package.json và lỗi mà bạn đang nhận được nói rằng nó không thể tìm thấy mô-đun đó, bây giờ có thể là do bạn có lỗi đánh máy hoặc tên đường dẫn đến tệp sai trong dòng nhập.

Answer 2

dự án của tôi được tạo ra sử dụng CLI cụ hiện tại, và tôi cài đặt này:

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

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

Answer 3

Do đó toàn cầu cài đặt, sử dụng sudo nếu u có quyền vấn đề

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

Answer 4

ng generate service InMemoryData --module=app 

sẽ tạo ra các tập tin src/app/in-memory-data.service.ts. Sau đó, thêm mã được liệt kê trong hướng dẫn và nó sẽ hoạt động. AFAIK họ thậm chí không ngụ ý rằng trong hướng dẫn nên không cảm thấy xấu. Trên thực tế, điều họ nói là

The forRoot() configuration method takes an InMemoryDataService class that primes the in-memory database.

The Tour of Heroes sample creates such a class src/app/in-memory-data.service.ts

Điều gì là sai và sai.

Answer 5

Đối Angular5 hướng dẫn và angular-in-memory-web-api@0.5.3:

Thêm tập tin mới "trong bộ nhớ-data.service.ts" vào thư mục gốc của bạn với nội dung này:

import { InMemoryDbService } from 'angular-in-memory-web-api'; 

export class InMemoryDataService implements InMemoryDbService { 
createDb() { 
    let heroes = [ 
     { id: 1, name: 'Windstorm' }, 
     { id: 2, name: 'Bombasto' }, 
     { id: 3, name: 'Magneta' }, 
     { id: 4, name: 'Tornado' } 
    ]; 
    return { heroes }; 
} 
}