在Angular2的英雄之旅中找不到模块'./内存数据服务' [英] Cannot find module './in-memory-data-service' in tour of heroes for Angular2

问题描述

我正在尝试完成Angular2英雄之旅应用程序，并且在教程的HTTP部分.

I am trying to work through the Angular2 tour of heroes app, and am running into bugs on the Http section of the tutorial.

起初我得到了错误:

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

但是使用但是，在同一步骤中，我还遇到以下错误:

However, at this same step I'm also getting the following error:

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

我已经进行了三遍检查，我相信我的in-memory-data-service.ts文件和app.module.ts文件都与教程中列出的完全相同(在这个特定时间点).

I've triple checked and I believe both my in-memory-data-service.ts file and my app.module.ts file are exactly the same as listed in the tutorial (at this particular point in time).

现在，我的 in-memory-data-service.ts 文件如下所示:

Right now my in-memory-data-service.ts file looks like this:

代码:

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中的某种依赖关系设置不正确造成的，还是我正在帮助的一个简单错误.

I'm not sure if this is due to some sort of dependency in package.json or systemjs.config that's not set appropriately, or if there's a simple mistake I'm helping.

编辑

我的 systemjs.config.js 文件如下所示:

代码:

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

我的文件结构当前如下所示:

My file structure currently looks like this:

文件结构:

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

index.html
systemjs.config.js

谢谢.

推荐答案

只需确保所有基础都已覆盖

Just make sure all your bases are covered

在您的 package.json 中，应与此页面.

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

此外，您的 systemjs.config 文件也看起来不错！

Also, your systemjs.config file looks good too!

在您的 app.module.ts 中，确保您的in-memory-data-service导入与您的文件匹配，因为在他们的示例中，它们具有in-memory-data.service

In your app.module.ts, make sure that your in-memory-data-service import matches your file because in their example they have 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

因此，您的文件应命名为 in-memory-data-service.ts .在我看来，有一个打字错误或某种文件结构问题.

So your file should be named in-memory-data-service.ts. It looks like to me that there is a naming typo or some sort of file structure issue.

看来您解决了package.json问题，并且收到的错误是它找不到该模块，这可能是因为文件名或路径中有错字导入行中的文件错误.

It looks like you solved the package.json issue, and the error that you are getting is saying that it can't find that module, now that could be because you have a typo in the name of the file or the path to the file is wrong in the import line.

这篇关于在Angular2的英雄之旅中找不到模块'./内存数据服务'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！