angulaire2-dans-mémoire-web-api 404 erreur

Question

J'essaye de construire l'application de 5 min dans l'angle 2 par ce guide: https://angular.io/docs/ts/latest/tutorial/toh-pt6.html.

Dans la partie http, j'ai ajouté un faux serveur mais j'obtiens une erreur 404 car l'angulaire2-in-memory-web-api.

http://localhost:4200/vendor/angular2-in-memory-web-api/in-memory-backend.service.js 
Failed to load resource: the server responded with a status of 404 (Not Found) 

je tente de suivre cette réponse: Angular2 Tutorial (Tour of Heroes): Cannot find module 'angular2-in-memory-web-api'

Mais il n'a pas utilisé-cli angulaire + Je n'ai pas la moindre idée où ajouter les dépendances dont ils ont parlé là-bas.

Mes main.ts:

// Imports for loading & configuring the in-memory web api 
import { XHRBackend } from '@angular/http'; 

import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api'; 
import { InMemoryDataService }    from './app/in-memory-data.service'; 

// The usual bootstrapping imports 
import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { enableProdMode } from '@angular/core'; 
import { AppComponent, environment } from './app/'; 
import { APP_ROUTER_PROVIDERS } from './app/app.routes'; 
import { HTTP_PROVIDERS } from '@angular/http'; 
if (environment.production) { 
    enableProdMode(); 
} 

bootstrap(AppComponent, [ 
    APP_ROUTER_PROVIDERS, 
    HTTP_PROVIDERS, 
    { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server 
    { provide: SEED_DATA, useClass: InMemoryDataService }  // in-mem server data 
]); 

Ceci est mon package.json:

{ 
    "name": "angular2-projects", 
    "version": "0.0.0", 
    "license": "MIT", 
    "angular-cli": {}, 
    "scripts": { 
    "start": "ng serve", 
    "postinstall": "typings install", 
    "lint": "tslint \"src/**/*.ts\"", 
    "test": "ng test", 
    "pree2e": "webdriver-manager update", 
    "e2e": "protractor" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.4", 
    "@angular/compiler": "2.0.0-rc.4", 
    "@angular/core": "2.0.0-rc.4", 
    "@angular/forms": "0.2.0", 
    "@angular/http": "2.0.0-rc.4", 
    "@angular/platform-browser": "2.0.0-rc.4", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.4", 
    "@angupackage.lar/router": "3.0.0-beta.1", 
    "@angular/router-deprecated": "2.0.0-rc.2", 
    "es6-shim": "0.35.1", 
    "reflect-metadata": "0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "systemjs": "0.19.26", 
    "zone.js": "0.6.12" 
    }, 
    "devDependencies": { 
    "angular-cli": "1.0.0-beta.9", 
    "codelyzer": "0.0.20", 
    "ember-cli-inject-live-reload": "1.4.0", 
    "jasmine-core": "2.4.1", 
    "jasmine-spec-reporter": "2.5.0", 
    "karma": "0.13.22", 
    "karma-chrome-launcher": "0.2.3", 
    "karma-jasmine": "0.3.8", 
    "protractor": "3.3.0", 
    "ts-node": "0.5.5", 
    "tslint": "3.11.0", 
    "typescript": "1.8.10", 
    "typings": "0.8.1" 
    } 
} 

Que dois-je faire pour cette erreur aller?

Answer 1

D'abord, vous devez npm i angular2-in-memory-web-api --save

Puis, en main.ts:

import{InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api'

dans src/system-config.js:

const barrels: string[] = [ 
    // Angular specific barrels. 
    '@angular/core', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/forms', 
    '@angular/http', 
    '@angular/router', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 


    // Thirdparty barrels. 
    'rxjs', 
    'angular2-in-memory-web-api', 

    // App specific barrels. 
    'app', 
    'app/shared', 
    /** @cli-barrel */ 
]; 



    // Apply the CLI SystemJS configuration. 
    System.config({ 
     map: { 
     '@angular': 'vendor/@angular', 
     'rxjs': 'vendor/rxjs', 
     'main': 'main.js', 
     'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api' 
     }, 

et ajoutez ceci à angular-cli-build.js dans vos projets répertoire racine :

'angular2-in-memory-web-api/**/**/*.js'` 

Enfin, redémarrez le serveur et exécutez ng build avant ng serve.

Answer 2

Ajout de la réponse pour les dernières versions de angular2-in-memory-web-api depuis que j'ai essayé pendant des heures de trouver des erreurs 404 aussi.

1) Tout d'abord angular2 en mémoire web-api est maintenant dépréciée pour les nouveaux angular-in-memory-web-api, cela signifie que vous devez vous assurer de changer votre package.json avoir dernière version:

"angular2-in-memory-web-api": "0.0.6", 

aurait besoin de changer quelque chose comme:

"angular-in-memory-web-api": "^0.1.3", 

2) Rappelez-vous de modifier systemjs.config.js (if in angular page tutorial for example as my case):

'angular-in-memory-web-api': 'node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 

3) Dans votre module importe changement à la dernière version:

import { InMemoryWebApiModule } from 'angular-in-memory-web-api/in-memory-web-api.module'; 

doit changer à la nouvelle déclaration:

import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; 

4) Relancez npm install et tha application devrait fonctionner avec la dernière version sans aucun problème. Cela a résolu le problème de moi.

Answer 3

vous avez manqué l'application.configuration du module pour api web en mémoire, voici la section du tutoriel: angular-toh-simulating-the-web-api

Answer 4

Répondant à un ancien message, mais ma solution était différente, donc je pensais que je vais le poster ici. J'obtenais exactement la même erreur mentionnée en utilisant le dernier paquet et en utilisant angulaire (4 et ci-dessus).

La raison était dans mon app.module.ts j'avais importé le InMemoryWebApiModule avant HttpModule. mettre le InMemoryWebApiModule après HttpModule (et il devrait être comme ça sans aucun doute) a fait l'affaire.

Faux -

importations: [
BrowserModule,
FormsModule,
InMemoryWebApiModule.forRoot (InMemoryDataService),
HttpModule,
JsonpModule,
]>

Corriger -

importations: [ BrowserModule, FormsModule, HttpModule, JsonpModule, InMemoryWebApiModule.forRoot (InMemoryDataService) // cela doit être importé après httpModule ]