在 Angular2 的英雄之旅中找不到模块“./in-memory-data-service”

Question

我正在尝试完成 Angular2 英雄之旅应用程序，并且运行遇到了 Http section of the tutorial 上的错误。

起初我收到错误：

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

但修复了使用 .

但是，在同一步骤中，我也遇到了以下错误：

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

我已经三重检查，我相信我的内存数据-service.ts 文件和我的 app.module.ts 文件与教程中列出的完全相同（在这个特定点时间）。

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

代码：

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 文件如下所示：

代码：

(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

所以你的文件应该命名为in-memory-data-service.ts。在我看来，似乎存在命名拼写错误或某种文件结构问题。

看起来你解决了 package.json 问题，你得到的错误是说它找不到那个模块，现在这可能是因为你的名字有错字导入行中的文件或文件路径错误。

Answer 2

我使用当前 CLI 工具创建的项目，我安装了这个：

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

对我有用。

Answer 3

进行全局安装，如果您有权限问题，请使用 sudo

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

Answer 4

ng generate service InMemoryData --module=app

将创建 src/app/in-memory-data.service.ts 文件。然后添加教程中列出的代码，它就会起作用。据我所知，他们甚至没有在教程中暗示这一点，所以不要难过。其实他们说的是

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:

将新文件 "in-memory-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 };
}
}

Answer 6

为了解决这个问题，我做了

ng generate service InMemoryData --module=app

根据用户的建议 user875234

但是这里也有很多答案是从问题

中复制粘贴的

import { InMemoryDataService } from './in-memory-data-service';

这是错误的。它应该和英雄教程中出现的一样

import { InMemoryDataService } from './in-memory-data.service';

注意 "dataDOTservice"，不是连字符。在我们新手看来，它就像教程中的一个错误，并且与 OP 的问题或此处的一些答案不符。点是正确的，连字符是错误的。

Answer 7

Angular 6 - Windows 我得到了

Failed to compile.

./src/app/in-memory-data.service
Module build failed: Error: ENOENT: no such file or directory, open 'e:\visualStudioWorkspace\angular-tour-of-heroes\src\app\in-memory-data.service'

当我改变

import { InMemoryDataService }  from './in-memory-data.service';

至（通知 data.service 数据服务更改）

import { InMemoryDataService }  from './in-memory-data-service';

并将文件重命名为 in-memory-data-service.ts 它有效。

Answer 8

要解决，试试这一步

运行 ng generate service InMemoryData --module=app 使用您的 angular cli，然后替换教程中列出的代码并保存。
转到app.module.ts，并在其中添加一些代码，所以代码是这样的。

app.module.ts

import { HttpClientModule }    from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';

@NgModule({
declarations: [
   ...
],
imports: [
   ...
   HttpClientModule,
   // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
   // and returns simulated server responses.
   // Remove it when a real server is ready to receive requests.
   HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, { dataEncapsulation: false }
   )
],
providers: [],
   ...

不要忘记在hero.service.ts

private heroesUrl = 'api/heroes'; // URL to web api

hero.service.ts

   ...
export class HeroService {

   constructor(
      private http: HttpClient,
      private messageService: MessageService,
   ) { }

   private heroesUrl = 'api/heroes';  // URL to web api

   /** GET heroes from the server */
   getHeroes (): Observable<Hero[]> {
      return this.http.get<Hero[]>(this.heroesUrl)
   }


   getHero(id: number): Observable<Hero> {
   ...

   /** Log a HeroService message with the MessageService */
   private log(message: string) {
   ...

通过运行ning ng sever 刷新您的应用，尽情享受吧！

Answer 9

英雄环游（Angular教程样本）后

import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data-service';

你必须运行命令：

ng generate service InMemoryData

Answer 10

我在 2020 年遇到了这个错误。我是运行服务器，运行在另一个终端中执行 ng 命令。

重启服务器成功了。 (CTRL+C, 服务)

Answer 11

我通过运行以下命令解决了这个问题：

$ yarn add angular-in-memory-web-api

运行如果你使用的是 npm:

$ npm i angular-in-memory-web-api

Answer 12

同样的问题。我通过停止 ng serve、运行、ng build 和 ng serve 来修复它。

Answer 13

对于那些查看旧文章的人，请尝试 this solution 通过使用 ng serve 重新运行应用程序。

ng generate service InMemoryData --module=app 是以前的解决方案；但是，您收到此错误：

未知选项：'--module'

默认情况下，Angular 将 providedIn 属性设置在 @Injectable 装饰器内部。这负责注册服务，因此 --module 不再是一个真正实用的解决方案。

为了重新启动 angular 应用程序，您可以运行在 CLI 中... taskkill /IM "node.exe" /F

那么， ng 服务

在 Angular2 的英雄之旅中找不到模块“./in-memory-data-service”

Cannot find module './in-memory-data-service' in tour of heroes for Angular2

typescript

angular2-http

angular