Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Angular2 angular-in-memory-web-api で モック と urlアクセスを共存させる方法

More than 3 years have passed since last update.

angular-in-memory-web-api とは

WebAPI からのデータ取得部分のモックです。
Angular2 で提供されています。
Angular 公式の TUTORIAL に出てきます。
https://angular.io/docs/ts/latest/tutorial/toh-pt6.html

ざっくり使い方

  • import
app.module.ts
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';

@NgModule({
    imports: [
        InMemoryWebApiModule.forRoot(InMemoryDataService),
    ],
})
  • モックデータは変数にjsonを設定。その変数をpathと紐づける形で定義します。
in-memory-data.service.ts
import { InMemoryDbService } from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
    createDb() {
        let timesheets = [{  },{  }];

        return {'timesheets':timesheets};
    }
}
  • request 部分のコードは実際WebAPIへアクセスする時の形で記述します。但し、urlはangular-in-memory-web-api 用のpathを指定する必要があります。
timesheets.service.ts
export class TimesheetsService {
    private timesheetsUrl = 'api/timesheets';  // URL to web api

    constructor(private http: Http) { }

    getTimesheets(): Promise<Timesheets[]> {
        return this.http.get(this.timesheetsUrl)
            .toPromise()
            .then(this.extractData)
            .catch(this.handleError);
    }
}

問題

一部のAPIについてのみ実際のurlアクセスを行いたい場合に、urlを変更するだけでは 404 - Not Found となってしまった。

解決方法

Config を設定する必要があります。
passThruUnknownUrl:true を指定します。

app.module.ts
@NgModule({
    imports: [
        InMemoryWebApiModule.forRoot(InMemoryDataService, { passThruUnknownUrl: true }),
    ],
})

https://github.com/angular/in-memory-web-api#passthru


日本語で言及している記述が見つけられなかったので書いてみました。

endk
システム開発の隙間や狭間にあるタスクを落穂拾いしています
stylez
WEB・業務システム、インフラ構築・運用監視まで、幅広い開発実績と経験豊富なエンジニアによる自社開発体制で、スピーディかつ高クオリティのシステム開発を手掛けています。AWSをはじめ各種クラウドやベンダーパートナーとして総合的なITサービスや、独自移行ツールを使ったマイグレーション、サーバーレスなシステム構築、コンテナを利用したDevOpsコンサルティングなどを提供しています。
https://www.stylez.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away