CODEWITHSUNDEEP
angulartypescriptmockingwebserverangular2-routing
gstackoverflow
gstackoverflow

Reputation: 36984

Cannot configure "angular2-in-memory-web-api"

I want to repeat example from youtube tutorial but I miss something: 

  zone.js:1561 GET http://localhost:3000/api/todos 404 (Not Found)

my code:

Rmain.ts:

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { XHRBackend } from "@angular/http";
import { InMemoryBackendService, SEED_DATA } from "angular2-in-memory-web-api";

import { AppModule } from "./app.module";
import { TodoSeedData } from "./components/shared/todo.data";

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, [
    {provide: XHRBackend, useClass: InMemoryBackendService},
    {provide: SEED_DATA, useClass: TodoSeedData}
]);

system.conig.js:

(function (global) {
    System.config({
        paths: {
            'npm:': 'node_modules/'
        },
        map: {
            app: 'app',

            '@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',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',

            'rxjs': 'npm:rxjs',
        },
        packages: {
            app: {
                main: './Rmain.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular2-in-memory-web-api': {main: 'index.js', defaultExtension: 'js'}
        }
    });
})(this);

todoService.ts:

import { Injectable } from "@angular/core";

import { ITodo } from "./todo.model"
import { VERSION } from "@angular/core";
import { Http } from "@angular/http"
import 'rxjs/add/operator/toPromise'
import {Headers} from "@angular/http";

@Injectable()
export class TodoService {
     getTodos():Promise<ITodo[]> {
            return this.http.get("api/todos")
                .toPromise()
                .then(res=>res.json().data)
                .catch(this.handleError);
      }
   ...
}

inside component:

ngOnInit():void {
        this.todoService.getTodos().then((todos:ITodo[]) => this.todos = todos);
}

Looks like miss something. Please point me to error.

Thanks in advance.

Upvotes: 1

Views: 209

Answers (1)

Roman C
Roman C

Reputation: 1

Looks like missing routes for your api

@NgModule({
 imports: [
   HttpModule,
   InMemoryWebApiModule.forRoot(InMemoryBackendService),
   ...
 ],

Upvotes: 1

Related Questions