I am trying to work through the Angular2 tour of heroes app, and am running into bugs on the Http section of the tutorial.
At first I was getting the error:
Cannot find module 'angular2-in-memory-web-api'
But fixed that using the information from this question.
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'.
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).
Right now my in-memory-data-service.ts file looks like this:
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};
}
}
My app.module.ts file looks like this:
CODE:
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 {
}
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.
EDIT
My systemjs.config.js file looks like this:
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);
My file structure currently looks like this:
File Structure:
app/app.module.ts
app/in-memory-data-service.ts
index.html
systemjs.config.js
Thank you.
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
- run
ng generate service InMemoryData --module=app
with your angular cli, then replace the code listed in the tutorial, and save it. - 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: [],
...
- Don't forget to add
private heroesUrl = 'api/heroes'; // URL to web api
inhero.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) {
...
- Refresh your app by running
ng sever
, and Enjoy!.
来源:https://stackoverflow.com/questions/39877282/cannot-find-module-in-memory-data-service-in-tour-of-heroes-for-angular2