Impossible de trouver le module './dans la mémoire des données-service " dans la tour des héros pour Angular2

Je suis en train de travailler à travers les Angular2 tour des héros de l'app, et je suis en cours d'exécution dans les bugs sur le Http section du tutoriel.

J'ai d'abord été l'obtention de l'erreur:

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

Mais d'une correction à l'aide de la les informations de cette question.

Cependant, à cette même étape, je suis également l'erreur suivante:

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

J'ai triple vérifié et je crois que mes deux dans la mémoire des données de service.fichier ts et mon application.le module.fichier ts sont exactement les mêmes que ceux énumérés dans le tutoriel (à ce point particulier dans le temps).

Maintenant mon dans la mémoire des données de service.ts fichier ressemble à ceci:

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

Mon app.le module.ts fichier ressemble à ceci:

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

Je ne sais pas si cela est dû à une sorte de dépendance dans le paquet.json ou systemjs.config qui n'est pas réglé de façon appropriée, ou si il y a une simple erreur, je l'aide.

MODIFIER

Mon systemjs.config.js fichier ressemble à ceci:

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

Mon fichier de structure actuellement ressemble à ceci:

Structure De Fichier:

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

index.html
systemjs.config.js

Merci.

OriginalL'auteur Jonathan Bechtel | 2016-10-05