在Angular2的英雄之旅中找不到模塊'./in-memory-data-service'

Question

我正在嘗試通過英雄應用程序的Angular2遊覽，並在Http section of the tutorial上遇到錯誤。

起初我得到的錯誤：

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

但固定，使用information from this question。

然而，在這同一步驟，我還發現了以下錯誤：

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

我三重檢查，我相信我的兩個內存數據，service.ts文件和我的應用程序。 module.ts文件與本教程中列出的完全相同（在此特定時間點）。

現在我內存數據，service.ts文件看起來像這樣：

CODE：

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

我app.module.ts文件看起來像這樣：

編號：

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

我不確定這是否是由於package.json或systemjs.config中某些依賴項設置不正確，或者存在一個我正在幫助的簡單錯誤。

編輯

我systemjs.config.js文件看起來像這樣：

CODE：

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

我的文件結構目前看起來是這樣的：

文件結構：

app/app.module.ts 
app/in-memory-data-service.ts 

index.html 
systemjs.config.js 

謝謝。

Answer 1

只要確保你所有的基地覆蓋

在你的package.json，應符合在this頁的一個。

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

此外，您systemjs.config文件看起來很不錯呢！

在您的app.module中。TS，確保您in-memory-data-service導入文件相匹配，因爲在他們的榜樣，他們有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 

所以，你的文件應該被命名爲內存數據，service.ts。在我看來，有一個命名錯字或某種文件結構問題。

看起來你解決了package.json問題，並且你得到的錯誤是說它找不到那個模塊，現在可能是因爲你在文件名中有一個拼寫錯誤或者導入行中的文件路徑是錯誤的。

Answer 2

我的項目使用當前的CLI工具創建的，我安裝了這個：

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

這對我的作品。

Answer 3

做它的全球安裝，使用須藤如果u有權限問題

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

Answer 4

ng generate service InMemoryData --module=app 

將創建src/app/in-memory-data.service.ts文件。然後添加教程中列出的代碼，它將起作用。 AFAIK他們甚至不意味着在教程中，所以不要感到不好。其實他們說的是

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

這是亂碼和錯誤。

Answer 5

對於Angular5教程和angular-in-memory-web-api@0.5.3：

添加 「內存-data.service.ts」 新文件到您的根目錄下有此內容：

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