Angulaire 2 + angulaire dans la mémoire-web-api zone GET http: // localhost: 3000 / traceur 404 (introuvable)

Bonjour, j'ai un problème avec angular-in-memory-web-api. J'ai essayé d'utiliser angular2-in-memory-web-api dans SystemJS et une autre solution, mais sans résultat. J'utilise le modèle de démarrage rapide officiel. Merci pour l'aide

Liste des erreurs

zone.js:1382 GET http://localhost:3000/traceur 404 (Not Found) dashboard:19 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur Error: XHR error (404 Not Found) loading http://localhost:3000/traceur at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29) at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35) at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33) Error loading http://localhost:3000/traceur Unable to load transpiler to transpile http://localhost:3000/node_modules/angular-in-memory-web-api/in-memory-web-api.module.js Error loading http://localhost:3000/node_modules/angular-in-memory-web-api/in-memory-web-api.module.js as "angular-in-memory-web-api/in-memory-web-api.module" from http://localhost:3000/app/app.module.js at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29) at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35) at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33) Error loading http://localhost:3000/traceur Unable to load transpiler to transpile http://localhost:3000/node_modules/angular-in-memory-web-api/in-memory-web-api.module.js Error loading http://localhost:3000/node_modules/angular-in-memory-web-api/in-memory-web-api.module.js as "angular-in-memory-web-api/in-memory-web-api.module" from http://localhost:3000/app/app.module.js 

Mon dossierJS

 /** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@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', '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, 'angular-in-memory-web-api': { main: './index.js', defaultExtension: 'js' } } }); })(this); 

Package.json

 { "name": "angular-quickstart", "version": "1.0.0", "description": "QuickStart package.json from the documentation, supplemented with testing support", "scripts": { "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", "docker-build": "docker build -t ng2-quickstart .", "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart", "pree2e": "npm run webdriver:update", "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first", "lint": "tslint ./app/**/*.ts -t verbose", "lite": "lite-server", "postinstall": "typings install", "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"", "test-once": "tsc && karma start karma.conf.js --single-run", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings", "webdriver:update": "webdriver-manager update" }, "keywords": [], "author": "", "licenses": [ { "type": "MIT", "url": "https://github.com/angular/angular.io/blob/master/LICENSE" } ], "dependencies": { "@angular/common": "~2.1.0", "@angular/compiler": "~2.1.0", "@angular/core": "~2.1.0", "@angular/forms": "~2.1.0", "@angular/http": "~2.1.0", "@angular/platform-browser": "~2.1.0", "@angular/platform-browser-dynamic": "~2.1.0", "@angular/router": "~3.1.0", "@angular/upgrade": "~2.1.0", "angular2-in-memory-web-api": "~0.1.5", "bootstrap": "^3.3.7", "systemjs": "0.19.39", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rxjs": "5.0.0-beta.12", "zone.js": "^0.6.25" }, "devDependencies": { "concurrently": "^3.0.0", "lite-server": "^2.2.2", "typescript": "^2.0.3", "typings": "^1.4.0", "canonical-path": "0.0.2", "http-server": "^0.9.0", "tslint": "^3.15.1", "lodash": "^4.16.2", "jasmine-core": "~2.5.2", "karma": "^1.3.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-htmlfile-reporter": "^0.3.4", "karma-jasmine": "^1.0.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "^3.3.0", "rimraf": "^2.5.4" }, "repository": {} } 

Module d'application

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import {HttpModule} from "@angular/http"; import { AppRoutingModule } from './app-routing.module'; import { InMemoryWebApiModule } from 'angular-in-memory-web-api/in-memory-web-api.module'; import { InMemoryDataService } from './in-memory-data.service'; import { AppComponent } from './app.component'; import { DashboardComponent } from './dashboard.component'; import { HeroDetailComponent } from './hero-detail.component'; import { HeroesComponent } from './heroes.component'; import { HeroService } from './hero.service'; @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, InMemoryWebApiModule.forRoot(InMemoryDataService), AppRoutingModule ], declarations: [ AppComponent, DashboardComponent, HeroDetailComponent, HeroesComponent ], providers: [ HeroService ], bootstrap: [ AppComponent ] }) export class AppModule { } 

La version 0.1.13 de angular2-in-memory-web-api eu quelques changements de rupture et il semble que le tutoriel n'a pas encore été mis à jour.

Selon le changelog:

Dans systemjs.config.js, vous devez modifier le mappage pour:

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

Puis supprimer des packages:

'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}

Lien vers le chang https://github.com/angular/in-memory-web-api/blob/master/CHANGELOG.md#0113-2016-10-20

Un problème a également été déposé https://github.com/angular/in-memory-web-api/issues/58

Il dit de mettre à jour l' app.module.ts en changeant

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

à

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

Même après avoir essayé tout ce qui précède, j'ai encore cette erreur:

"originalStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js\n\tError: XHR error (404 Not Found) loading node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js\n\t at XMLHttpRequest.wrapFn [as _onreadystatechange] (node_modules/zone.js/dist/zone.js:889:29) [<root>]\n\t at Zone.runTask (node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>]

Puis je me suis rendu compte que cela ne se produit que pendant les tests avec le karma (non … Je n'essaie pas de démarrer le serveur si les tests échouent).

Cela a fonctionné pour moi:

  • Systemjs.config.js comme décrit par d'autres ici (et pendant ce temps réparé dans le code exemple original): 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',

  • Karma.conf.js: files: [ (...) 'node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', (...) { pattern: 'node_modules/angular-in-memory-web-api/**/*.js', included: false, watched: false }, ]

En plus, je devais configurer un fournisseur pour { provide: APP_BASE_HREF, useValue: "/" } car le karma n'utilise pas l'index.html

Enfin, tous les tests ont été passés et je peux faire mon "npm start" 🙂

Pour une raison quelconque, j'avais toujours la même erreur même après avoir suivi la réponse de @ joel et le problème sur github.

Si quelqu'un est confronté au même problème, suivez les étapes ci-dessous:

Ajoutez la ligne ci-dessous à l'objet "map" dans le fichier systemjs.config.js

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

Essentiellement, ici, vous indiquez le fichier umd.js qui est présent dans votre dossier node_modules.

Dans l'objet packages du fichier systemjs.config.js , ajoutez la ligne ci-dessous

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

Ces changements ne fonctionnent que sur des versions supérieures à 0.1.13. Par conséquent, vérifiez dans votre package.json si "angular-in-memory-web-api" a une version supérieure ou égale à 0.1.13, c'est-à-dire,

 "angular-in-memory-web-api": "~0.1.13", 

J'espère que cela t'aides!

Pour ceux qui suivent le didacticiel, après avoir suivi la réponse de Joel, il m'a laissé directement à un autre problème en me donnant l'erreur suivante.

 ctorParameters.map is not a function at ReflectionCapabilities.parameters 

Cela m'a permis de répondre à cette question: Mise à jour de la mémoire angulaire dans la mémoire-wep-api

J'ai dû mettre à jour le "angular-in-memory-web-api" de 0.1.13 à 0.2.0 dans packages.json