Angular 找不到模块'/内存数据服务'；安格拉尔英雄之旅2

我正在尝试使用Angular2英雄之旅应用程序，但在应用程序中遇到了bug

起初，我得到了一个错误：

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

但修复了使用

但是，在同一步骤中，我还得到以下错误：

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

我已经检查了三次，我相信我的in-memory-data-service.ts文件和app.module.ts文件与教程中列出的完全相同（此时）

现在，我的内存数据服务.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};
  }
}

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

(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

我的app.module.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};
  }
}

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

(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

我不确定这是否是由于package.json或systemjs.config中的某种依赖项设置不正确所致，或者我正在帮助解决一个简单的错误

编辑

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

代码：

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

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

(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

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

文件结构：

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

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

(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

---

谢谢。

只要确保你所有的基地都被覆盖就行了

在您的package.json中，应该与第页上的匹配

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

在你的app.module.ts中，确保你的

内存数据服务

导入与你的文件匹配，因为在它们的示例中，它们有

内存数据服务

// 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

//用于加载和配置内存中web api的导入
从“角度内存web api”导入{inMemoryWebAPI模块}；
从“./内存数据服务”导入{InMemoryDataService}；// 我的项目是使用当前的CLI工具创建的，我安装了：

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

它适合我。
执行全局安装，如果您有权限问题，请使用sudo

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

将创建
src/app/in-memory data.service.ts
文件。然后添加教程中列出的代码，就可以了。好了，他们甚至没有暗示在教程中，所以不要感到难过。其实他们说的是

forRoot（）配置方法接受一个InMemoryDataService类，该类初始化内存中的数据库

英雄之旅示例创建了这样一个类src/app/in-memory-data.service.ts

这是胡言乱语和错误的。
对于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 };
}
}

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

ng generate service InMemoryData --module=app  

根据用户建议

但这里也有很多答案都是从这个问题上复制和粘贴的

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

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

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

请注意“dataDOTservice”，而不是连字符。在我们新手看来，这就像是教程中的一个错误，与OP的问题或这里的一些答案不匹配。点是正确的，连字符是错误的
 有角度的6扇窗户

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

to（注意data.service对data service的更改）

然后将文件重命名为in-memory-data-service.ts，这样就行了。
若要解决此问题，请尝试此步骤

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

别忘了添加
private heroesUrl='api/heroes'；//在
hero.service.ts

hero.service.ts

。。。
导出类服务{
建造师(
私有http:HttpClient，
私有消息服务：消息服务，
) { }
private heroesUrl='api/heroes'；//指向web api的URL
/**从服务器获取英雄*/
getHeroes（）：可观察{
返回this.http.get（this.heroesUrl）
}
getHero（id:number）：可观察{
...
/**使用MessageService记录HeroService消息*/
私有日志（消息：字符串）{
...

通过运行
ng服务器
刷新应用程序，然后尽情享受吧
在《英雄之旅》（角度教程示例）之后

必须运行以下命令：

ng generate service InMemoryData

我在2020年遇到这个错误。我在另一个终端上运行服务器和ng命令

重新启动服务器就成功了。（CTRL+C，ng serve）
我通过运行以下命令解决了这个问题：

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

如果您正在使用npm，请运行此命令：

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

同样的问题。我通过停止
ng-serve
，运行
ng-build
，然后再次运行
ng-serve
。
对于那些正在阅读旧文章的人，请尝试使用ng-serve重新运行应用程序

ng在MemoryData中生成服务--module=app是以前的解决方案；但是，您会遇到以下错误：

未知选项：'--模块'

默认情况下，Angular在@Injectable decorator内设置providedIn属性。这负责注册服务，因此--module不再是一个实际的解决方案

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

那么，
ng serve
我不认为它与package.json有任何关系，但您也可以显示您的systemjs.config文件吗？另外，它看起来与您的文件结构有关，因此您可能需要详细说明一下well@Sasquatch3o3-谢谢你的反馈。我继续并更新了你需要的信息提问。如果你还有其他问题，请告诉我。当然，我现在正在查看是否能找到任何东西，谢谢更新！我也有同样的问题，直到我找到解决方案…在英雄角之旅应用程序的下一步：-）现在是2020年，他们已经修复了那个打字错误，但我仍然有这个错误…我不得不停止整个anglar服务器和重启，它工作了…好吧，看起来你是索尔