Question

我正在尝试为Angular（而不是js！）完成着名的英雄之旅教程，但是使用angular-cli来创建项目。一切都很好，直到使用angular-in-memory-web-api的部分。是的我确实使用了命令＆＃34; npm install angular-in-memory-web-api --save＆＃34;并且依赖关系现在在我的package.json中。

运行应用程序时完全没有错误。没有编译错误。 js控制台中没有运行时错误。什么都没发生。就好像没有响应来自＆＃34; api服务器＆＃34;。

我甚至添加了一些console.debug以确保＆＃34; createDb（）＆＃34;和我的＆＃34; getHeroes（）＆＃34;功能被执行。

知道在哪里看？这是我的一些文件。

的package.json：

{
"name": "angular-tour-of-heroe",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "angular-in-memory-web-api": "latest",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.6",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import {AppRoutingModule} from "./app-routing/app-routing.module";

// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
// import { InMemoryWebApiModule } from 'angular-in-memory-web-api/in-memory-web-api.module';
import {InMemoryDataService} from "./in-memory-data.service";

import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroService } from "./hero.service";
import { DashboardComponent } from './dashboard/dashboard.component';



@NgModule({
  declarations: [
    AppComponent,
    HeroDetailComponent,
    HeroesComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService)
  ],
  providers: [HeroService],
  bootstrap: [AppComponent]
})
export class AppModule { }

内存-data.service.ts：

import { InMemoryDbService } from 'angular-in-memory-web-api';
// import { InMemoryDbService } from 'angular-in-memory-web-api/in-memory-backend.service';

export class InMemoryDataService implements InMemoryDbService {
  createDb() {

    console.debug("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};
  }
}

hero.service.ts：

import { Injectable } from '@angular/core';
import {Hero} from "./hero";
import {Http} from "@angular/http";
import "rxjs/add/operator/toPromise";

@Injectable()
export class HeroService {

  private heroesUrl = 'api/heroes';  // URL to web api

  constructor(private http: Http) { }

  getHeroes(): Promise<Hero[]> {

    console.debug("getHeroes method");

    return new Promise(resolve => {
      return this.http.get(this.heroesUrl)
        .toPromise()
        .then(response => response.json().data as Hero[])
        .catch(this.handleError);
    });
  }

  getHero(id: number): Promise<Hero> {

    return this.getHeroes()
      .then(heroes => heroes.find( hero => hero.id === id));
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }
}

Answer 1

问题是由我的IDE（IntelliJ）代替＆＃34;返回this.http ...＆＃34;通过＆＃34;返回新的承诺（......＆＃34; !!

我的getHeroes函数应该是：

getHeroes(): Promise<Hero[]> {

    console.debug("getHeroes method");

    return this.http.get(this.heroesUrl)
      .toPromise()
      .then(response => response.json() as Hero[])
      .catch(this.handleError);
  }

Answer 2

我也面临同样的问题，但原因不同。

最初我的工作区没有＆＃34; angular-in-memory-web-api＆＃34;我使用＆＃34; npm install angular-in-memory-web-api --save＆＃34;安装它。命令。这安装了angular-in-memory-web-api模块版本0.5.0。

运行应用程序时，控制台中没有任何错误的编译错误。甚至我可以看到在调试模式下调用http.get函数并返回控件而没有任何错误。但是响应中没有包含InMemoryDBService的数据。

在网上经历了很多解决方案后，我尝试了一个奇怪的事情。

我在package.json中将angular-in-memory-web-api的版本从版本0.5.0降级到0.3.0。
从node_modules中删除了现有的angular-in-memory-web-api文件夹，并发出命令npm install angular-in-memory-web-api。这创造了一个新的 node_modules中名为angular-in-memory-web-api的文件夹。

奇迹发生了，我能够在浏览器屏幕上看到数据。：）

Answer 3

截至今天的教程有点令人困惑。 in-memory-web-api在版本0.5.0（https://github.com/angular/in-memory-web-api/blob/master/CHANGELOG.md/#050-2017-10-05）中引入了一个重大变化。 Api结果不再包装，因此必须将每个response.json().data更改为response.json()。

或者，可以使用参数恢复api的旧行为。

InMemoryWebApiModule.forRoot(InMemoryDataService, { dataEncapsulation: true }),

Answer 4

使用＆＃34; angular-in-memory-web-api＆＃34;：＆＃34; ~0.5.0＆＃34; 在你的package.json中。

从node_modules中删除angular-in-memory-web-api。

做<div id="scrollable"> <div id="visCont"> <img src="https://media.glamour.com/photos/5a0399bd8948116a5c05be65/master/w_644,c_limit/kaley-cuoco-the-big-bang-theory-penny-season-11-2017.jpg"> </img> </div> <div id="invisibleContent"> <p> text </p> </div> </div> #scrollable { overflow-y:auto; } #visCont { top: 6710000px; position:absolute; } #invisibleContent { top: 6720000px; position:absolute; }

运行你的项目。

Answer 5

在你的 HeroService 中

private heroesUrl = 'api/heroes';

应该改为

private heroesUrl = 'http://localhost:8080/api/heroes';

angular-in-memory-web-api没有响应

5 个答案: