2016-09-12 1 views
1

Je n'arrive pas à comprendre pourquoi je ne peux pas récupérer les données mockées dans inMemoryWebApi. J'ai bien fait toutes les configurations, à travers angular.io, mais j'ai toujours la même erreur. Même lorsque je supprime l'URL et laisse l'espace vide, l'erreur est la même.InMemoryWebApi: Angulaire 2 RC6 + Webpack. Impossible de résoudre tous les paramètres pour InMemoryBackEndService

Erreur:

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

J'utilise webpack, peut-être cela est une raison. Dois-je déclarer quelque part dans Webpack, configuration pour inMemoryWebApi? Ou peut-être dans helpers.js?

je l'avais ajouté dans vendor.ts, qui est prise par 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.commo n:

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); 
    } 

} 

La dernière fois que je systemJS, où 'en mémoire Web-api' a été configuré. S'il vous plaît pour l'indice, comment réparer cette erreur, et aller de l'avant avec elle.

Merci et salutations Bosper

+0

Est-ce que la classe 'MemcacheModel' (ou interface) a ces 3 champs:' id', 'cif' et' name'? – mrgoos

+0

Résolu en supprimant l'importation 'angular2-in-memory-web-api' des fournisseurs. J'ai eu deux importations, c'était un problème. –

Répondre

0

même erreur et pas de solution lorsque vous essayez de mettre en œuvre en mémoire Web-api avec Angular2 Webpack Starter!

+0

J'ai vérifié AngularClass, et cela a fonctionné très bien pour moi. Dans mon cas, je n'ai pas utilisé de graines AngularClass. J'ai fait la connexion avec ng2 et webpack + ng2-bootstrap et momentJS manuellement. PS. ce n'était pas la réponse, mieux le changer pour commenter :) –

+0

Est-ce que quelqu'un a résolu ceci? J'ai le même problème. S'il vous plaît partager la résolution. Merci – Keith