title: Angular 5 (tour of heroes) tutorial: Cannot find module '@angular-in-memory-web-api' error
body: <p>I found a similar <a href="https://stackoverflow.com/questions/37377529/angular2-tutorial-tour-of-heroes-cannot-find-module-angular2-in-memory-web-a">question</a> but it was for angular2 &amp; the commands in the answers seems angular2 specific or telling to run the same cmd I am running, so I am asking this question here.</p>
  <p>I am following the Angular 5 tour of heroes <a href="https://angular.io/tutorial/toh-pt6#enable-http-services" rel="nofollow noreferrer">tutorial</a> &amp; in the section of HTTP, I got the error below:</p>
  <blockquote>
  <p>Failed to compile.</p>
  <p>src/app/app.module.ts(13,48): error TS2307: Cannot find module '@angular-in-memory-web-api'.</p>
  </blockquote>
  <p>After running the cmd, I got some warnings but it confirmed installation:</p>
  <pre><code>λ npm install angular-in-memory-web-api --save
  npm WARN ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {&quot;os&quot;:&quot;darwin&quot;,&quot;arch&quot;:&quot;any&quot;} (current: {&quot;os&quot;:&quot;win32&quot;,&quot;arch&quot;:&quot;x64&quot;})
  
  + angular-in-memory-web-api@0.5.3
  added 1 package in 25.102s
  </code></pre>
  <p>My package.json file is showing the dependency correctly:</p>
  <pre><code>    {
    &quot;name&quot;: &quot;hello-world&quot;,
    &quot;version&quot;: &quot;0.0.0&quot;,
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;scripts&quot;: {
      &quot;ng&quot;: &quot;ng&quot;,
      &quot;start&quot;: &quot;ng serve&quot;,
      &quot;build&quot;: &quot;ng build --prod&quot;,
      &quot;test&quot;: &quot;ng test&quot;,
      &quot;lint&quot;: &quot;ng lint&quot;,
      &quot;e2e&quot;: &quot;ng e2e&quot;
    },
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@angular/animations&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/common&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/compiler&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/core&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/forms&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/http&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/platform-browser&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/router&quot;: &quot;^5.2.0&quot;,
      &quot;angular-in-memory-web-api&quot;: &quot;^0.5.3&quot;,
      &quot;core-js&quot;: &quot;^2.4.1&quot;,
      &quot;rxjs&quot;: &quot;^5.5.6&quot;,
      &quot;zone.js&quot;: &quot;^0.8.19&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular/cli&quot;: &quot;~1.7.0&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/language-service&quot;: &quot;^5.2.0&quot;,
      &quot;@types/jasmine&quot;: &quot;~2.8.3&quot;,
      &quot;@types/jasminewd2&quot;: &quot;~2.0.2&quot;,
      &quot;@types/node&quot;: &quot;~6.0.60&quot;,
      &quot;codelyzer&quot;: &quot;^4.0.1&quot;,
      &quot;jasmine-core&quot;: &quot;~2.8.0&quot;,
      &quot;jasmine-spec-reporter&quot;: &quot;~4.2.1&quot;,
      &quot;karma&quot;: &quot;~2.0.0&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;~2.2.0&quot;,
      &quot;karma-coverage-istanbul-reporter&quot;: &quot;^1.2.1&quot;,
      &quot;karma-jasmine&quot;: &quot;~1.1.0&quot;,
      &quot;karma-jasmine-html-reporter&quot;: &quot;^0.2.2&quot;,
      &quot;protractor&quot;: &quot;~5.1.2&quot;,
      &quot;ts-node&quot;: &quot;~4.1.0&quot;,
      &quot;tslint&quot;: &quot;~5.9.1&quot;,
      &quot;typescript&quot;: &quot;~2.5.3&quot;
    }
  }
  </code></pre>
  <p>app.module.ts file:</p>
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms'; // &lt;-- NgModel lives here
  import { AppComponent } from './app.component';
  import { HeroesComponent } from './heroes/heroes.component';
  import { HeroDetailComponent } from './hero-detail/hero-detail.component';
  import { HeroService } from './hero.service';
  import { MessagesComponent } from './messages/messages.component';
  import { MessageService } from './message.service';
  import { AppRoutingModule } from './app-routing.module';
  import { DashboardComponent } from './dashboard/dashboard.component';
  import { HttpClientModule } from '@angular/common/http';
  import { HttpClientInMemoryWebApiModule } from '@angular-in-memory-web-api';
  import { InMemoryDataService } from './in-memory-data.service';
  
  
  @NgModule({
    declarations: [
      AppComponent,
      HeroesComponent,
      HeroDetailComponent,
      MessagesComponent,
      DashboardComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      AppRoutingModule,
      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: [HeroService, MessageService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>I tried restarting VS code &amp; re-running the cmd above but it didn't help.</p>