InMemoryWebApi：Angular 2 RC6 + Webpack。 无法解析InMemoryBackEndService的所有参数

Question

I can't figure out, why I can't retrive mocked data in inMemoryWebApi. I made all configuraion well, across angular.io, but I still get same error. Even when I delete url and leave empty space, error is same.

Error:

Error: Can't resolve all parameters for InMemoryBackendService: (?, ?).

I am using webpack, maybe this is a reason. Should I declare somewhere in Webpack, configuration for inMemoryWebApi? Or maybe in helpers.js?

I had added it into vendor.ts, which is taken by webpack.common.js

Vendor.ts:

// Angular 2
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
import 'angular2-in-memory-web-api';
import 'reflect-metadata';

// RxJS
import 'rxjs';

//Other vendors
import 'bootstrap-css-only';

Helpers.js:

var path = require('path');
var _root = path.resolve(__dirname, '..');
function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [_root].concat(args));
}
exports.root = root;

AppModule:

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

import { AlertModule, DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap';

// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';
import { InMemoryData } from './in-memory-data';

import { AppComponent }   from './app.component';
import { AppService } from './app.service';
import { routing } from './app.routing';

@NgModule({
  imports: [
    BrowserModule,
    AlertModule,
    FormsModule,
    HttpModule,
    DatepickerModule,
    InMemoryWebApiModule.forRoot(InMemoryData)
    //routing
  ],
  declarations: [AppComponent],
  providers: [
    AppService
  ],
  bootstrap: [AppComponent]
})

export class AppModule {

}

webpack.common:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts'
    },


    resolve: {
        extensions: ['', '.js', '.ts']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['ts', 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file?name=assets/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'raw'
            },
            {
                test: /\.scss$/,
                exclude: helpers.root('src', 'app'),
                loaders: ['raw', 'sass']
            }
        ]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

InMemoryData:

import { InMemoryDbService } from 'angular2-in-memory-web-api';

export class InMemoryData implements InMemoryDbService {
    createDb() {
        let memcache = {
            id: 1,
            cif: "11676096",
            name: 'Barbara'
        };
    return { memcache }
  }
}

Service:

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';

import { OfferModel } from './app.offers.model';
import { MemcacheModel } from './app.memcache.model';

import 'rxjs/add/operator/toPromise';

@Injectable()

export class AppService {

    private memcacheUrl = "app/memcache";

    constructor( public http: Http ) {

    }

    getMemcache(): Promise<MemcacheModel> {
        return this.http.get( this.memcacheUrl )
            .toPromise()
            .then( response => response.json().data as MemcacheModel )
            .catch( this.handleError );
    }

    handleError( error: any ) {
        console.log( 'An error has occured: ', error );
        return Promise.reject( error.message || error );
    }

}

Last time I used systemJS, where 'in-memory-web-api' was configured. Please for hint, how to fix this error, and move forward with it.

Thanks and regards Bosper

Answer 1

尝试使用Angular2 Webpack Starter实现in-memory-web-api时出现相同的错误和解决方案！