2016-10-21 12 views
14

Witam Mam problem z api kąta-w-pamięci-web-api. Próbowałem użyć angular2-in-memory-web-api w SystemJS i innych rozwiązań, ale bez rezultatu. Używam oficjalnego szablonu szybkiego startu. Dziękuję za pomocStrefa Angular 2 + kątowa w pamięci-web-api GET http: // localhost: 3000/traceur 404 (nie odnaleziony)

lista błędów

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 

Moi consignJS

/** 
* 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": {} 
} 

App Moduł

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 { } 

Odpowiedz

29

Wersja 0.1.13 z angular2-in-memory-web-api uległa zmianie i wygląda na to, że samouczek nie został jeszcze zaktualizowany.

Według zmian:

In systemjs.config.js you should change the mapping to:

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

then delete from packages:

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

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

Problem został również złożony https://github.com/angular/in-memory-web-api/issues/58

Mówi zaktualizować app.module.ts zmieniając

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

do

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

+0

ohh bardzo dziękuję !! :) –

+0

dzięki, chodziłem orzechy –

+0

dziękuję bardzo! –

0

z jakiegoś powodu, ja wciąż otrzymuję ten sam błąd, nawet po wykonaniu @ odpowiedź Joel i wydawania na github.

W przypadku, gdy ktoś stoi ten sam problem, wykonaj poniższe czynności:

dodać poniższy wiersz do „mapy” obiektu w systemjs.config.js plik

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

Zasadniczo tutaj wskazuje się na plik umd.js, który znajduje się w folderze node_modules.

w pakietach obiekt z systemjs.config.js pliku dodaj poniższą linię

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

Zmiany te działają tylko na wersjach wyższych niż 0.1.13, dlatego prosimy o sprawdzenie w swoim pakiecie . json jeśli "kanciasty-in-memory-web-api" ma także wersję większa lub równa 0.1.13, czyli

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

Nadzieja to pomaga!

0

Dla osób po tutorialu, po tym, jak zastosowałem się do odpowiedzi Joela, pozwoliło mi to bezpośrednio rozwiązać inny problem, podając mi następujący błąd.

ctorParameters.map is not a function at ReflectionCapabilities.parameters 

To niech mi tej odpowiedzi: Updating angular-in-memory-wep-api

musiałem zaktualizować "kątowy-in-memory-web-API" od 0.1.13 do 0.2.0 w packages.json

2

Nawet po próbowałem wszystko wcześniej wspomniano nadal mam ten błąd:

"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>]

Wtedy zdałem sobie sprawę, że tylko o ccurs podczas testów z karmą (nie ... Nie próbuję uruchomić serwera, jeśli testy zakończą się niepowodzeniem).

Ten pracował dla mnie:

  • systemjs.config.js jak opisane przez innych tutaj (i w międzyczasie ustalone w oryginalnej próbki kodu): '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 }, ]

dodatkowo Musiałem ustawić dostawcę dla { provide: APP_BASE_HREF, useValue: "/" }, ponieważ karma nie używa on index.html

wreszcie przeszły wszystkie testy i mogę zrobić mój "start" npm :-)

Powiązane problemy