2016-10-21 5 views
14

हाय मुझे कोणीय-इन-मेमोरी-वेब-एपीआई में समस्या है। मैंने SystemJS में कोणीय 2-इन-मेमोरी-वेब-एपीआई और अन्य समाधानों का उपयोग करने की कोशिश की लेकिन बिना किसी परिणाम के। मैं आधिकारिक क्विकस्टार्ट टेम्पलेट का उपयोग कर रहा हूँ। आप मदद के लिए धन्यवादकोणीय 2 + कोणीय-इन-मेमोरी-वेब-एपीआई ज़ोन प्राप्त करें http: // localhost: 3000/traceur 404 (नहीं मिला)

त्रुटि सूची

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 

मेरे 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": {} 
} 

अनुप्रयोग मॉड्यूल

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

उत्तर

29

angular2-in-memory-web-api के संस्करण 0.1.13 में कुछ तोड़ने वाले बदलाव हुए और ऐसा लगता है कि ट्यूटोरियल अभी तक अपडेट नहीं किया गया है।

बदलाव का के अनुसार:

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

लिंक चांग https://github.com/angular/in-memory-web-api/blob/master/CHANGELOG.md#0113-2016-10-20

एक मुद्दा भी https://github.com/angular/in-memory-web-api/issues/58

यह

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

बदलकर app.module.ts अद्यतन करने के लिए कहते हैं दायर की गई है करने के लिए

को

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

+0

ओह बहुत बहुत धन्यवाद !! :) –

+0

धन्यवाद, मैं पागल हो रहा था –

+0

बहुत बहुत धन्यवाद! –

0

किसी कारण के लिए, मैं अभी भी निम्न @ जोएल के जवाब और GitHub पर जारी होने के बाद भी एक ही त्रुटि हो रही थी।

मामले में

अगर कोई एक ही मुद्दे का सामना करना पड़ रहा है, नीचे दिए गए चरणों का पालन करें:

"मानचित्र" वस्तु के लिए नीचे पंक्ति जोड़ें systemjs.config.js में फ़ाइल

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

अनिवार्य रूप से, यहां आप umd.js फ़ाइल को इंगित कर रहे हैं जो आपके node_modules फ़ोल्डर में मौजूद है।

संकुल में systemjs.config.js फ़ाइल की वस्तु, केवल 0.1.13 से अधिक संस्करणों पर नीचे लाइन

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

इन परिवर्तनों को काम जोड़ने के लिए, इसलिए अपने पैकेज में सत्यापित करें। json अगर "कोणीय-इन-स्मृति-वेब-api" एक संस्करण की तुलना में अधिक से अधिक या 0.1.13 के बराबर यानी है,,

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

आशा इस मदद करता है!

0

ट्यूटोरियल के बाद उन लोगों के लिए, जोएल के जवाब का पालन करने के बाद, यह मुझे एक और समस्या के लिए सीधे मुझे निम्नलिखित त्रुटि देने देता है।

ctorParameters.map is not a function at ReflectionCapabilities.parameters 

यह मेरे इस जवाब देने के लिए करते हैं: Updating angular-in-memory-wep-api

मैं "कोणीय-इन-स्मृति-वेब-api" 0.1.13 से 0.2.0 के लिए packages.json में

2
अद्यतन करने के लिए किया था

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

तब मुझे एहसास हुआ कि यह केवल o:

के बाद भी मैं सब कुछ उल्लेख किया इससे पहले कि मैं अभी भी यह त्रुटि आई की कोशिश की परीक्षण के दौरान ccurs कर्म के साथ (नहीं ... परीक्षण विफल होने पर मैं सर्वर शुरू करने की कोशिश नहीं करता)।

यह मेरे लिए काम किया:

  • systemjs.config.js के रूप में दूसरों को यहाँ द्वारा वर्णित (और इस बीच तय मूल नमूना कोड में): '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 }, ]

अतिरिक्त मुझे { provide: APP_BASE_HREF, useValue: "/" } के लिए प्रदाता सेट करना पड़ा क्योंकि कर्म टी का उपयोग नहीं करता है वह index.html

अंततः सभी परीक्षण पास हुए और मैं अपना "एनपीएम शुरू" कर सकता हूं :-)

संबंधित मुद्दे