1. 技术文章
  2. Cannot find module './in-memory-data-service' in tour of heroes for Angular2

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

由 北城余情 提交于 2019-12-03 09:28:47

Just make sure all your bases are covered

In your package.json, should match the one on this page.

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

Also, your systemjs.config file looks good too!

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

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.

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.

ng generate service InMemoryData --module=app

Will create the src/app/in-memory-data.service.ts file. Then add the code listed in the tutorial and it will work. AFAIK they don't even imply that in the tutorial so don't feel bad. In fact what they say is

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

Which is gibberish and wrong.

My projects created using current CLI Tools, and I installed this:

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

It works for me.

For Angular5 tutorial and angular-in-memory-web-api@0.5.3:

Add new file "in-memory-data.service.ts" to your root directory with this contents:

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

To resolve this issue I did 

ng generate service InMemoryData --module=app

as suggested by user user875234

But also a lot of answers here have copied and pasted from the question 

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

Which is wrong. It should be as it appears in the Heroes tutorial 

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

Notice the "dataDOTservice", not a hyphen. It looks to us newbies like a mistake in the tutorial, and it doesn't match OP's question or some answers here. The dot is correct, the hyphen is wrong.

In the tour of heroes (Angular tutorial sample) after

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

you must run the command:

ng generate service InMemoryData

Do it global install , use sudo if u have permissions problems

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

Angular 6 - Windows I got

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'

When I change 

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

to (notice data.service changes to data-service) 

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

and rename file to in-memory-data-service.ts it works.

to solve it, try this step

  1. run ng generate service InMemoryData --module=app with your angular cli, then replace the code listed in the tutorial, and save it.
  2. go to app.module.ts, and add some code in it, so the code like this.

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: [],
   ...
  1. Don't forget to add private heroesUrl = 'api/heroes'; // URL to web api in hero.service.ts

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) {
   ...
  1. Refresh your app by running ng sever, and Enjoy!.
标签
angular
typescript
angular2-http
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!