कोणीय 2-इन-मेमोरी-वेब-एपीआई 404 त्रुटि

Question

मैं इस गाइड द्वारा कोणीय 2 में 5 मिनट ऐप बनाने की कोशिश कर रहा हूं: https://angular.io/docs/ts/latest/tutorial/toh-pt6.html।

http भाग में, मैं एक नकली सर्वर जोड़ा है, लेकिन मैं क्योंकि 404 त्रुटि angular2-इन-स्मृति-वेब-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) 

मैं इस उत्तर का पालन करने की कोशिश कर रहा था: Angular2 Tutorial (Tour of Heroes): Cannot find module 'angular2-in-memory-web-api'

लेकिन वह कोणीय CLI का उपयोग नहीं किया + मैं जहां उन निर्भरता वे के बारे में बात की थी वहाँ जोड़ने के लिए एक सुराग नहीं है।

मेरे 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 
]); 

यह मेरा 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" 
    } 
} 

क्या मुझे लगता है कि त्रुटि दूर जाना बनाने के लिए क्या करना होगा?

Answer 1

सबसे पहले, आप main.ts में npm i angular2-in-memory-web-api --save

तब की जरूरत है:

src/system-config.js में

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

:

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

और अपनी परियोजनाओं को रूट निर्देशिका में angular-cli-build.js में जोड़ना :

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

अंत में सर्वर को पुनरारंभ करें और से पहले ng build चलाएं। angular2-इन-स्मृति-वेब-api के बाद से मैं किया गया है घंटे के साथ-साथ 404 त्रुटियों खोजने की कोशिश कर के नवीनतम संस्करण के लिए

Answer 2

जोड़ा जा रहा है जवाब।

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

:

1) सभी angular2-इन-स्मृति-वेब-api सबसे पहले अब नई angular-in-memory-web-api के लिए हटाई गई है, यह आप नवीनतम संस्करण है करने के लिए अपने package.json बदलने के लिए सुनिश्चित करने की आवश्यकता का मतलब की तरह कुछ करने के लिए बदलने के लिए की आवश्यकता होगी:

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

2) 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) अपने मॉड्यूल आयात में नवीनतम संस्करण के लिए बदलने के लिए:

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

जरूरतों नई घोषणा करने के लिए बदलने के लिए:

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

4) तो फिर npm install को फिर से चलाएं और था एप्लिकेशन नवीनतम संस्करण के साथ चलाना चाहिए बिना किसी ग्लिच के। इस समस्या ने मुझे हल किया।

Answer 3

आपने ऐप छोड़ा।इन-मेमोरी वेब एपीआई के लिए मॉड्यूल कॉन्फ़िगरेशन, यहां ट्यूटोरियल का अनुभाग है: angular-toh-simulating-the-web-api

Answer 4

पुरानी पोस्ट का जवाब देना, हालांकि मेरा समाधान अलग था इसलिए मैंने सोचा कि मैं इसे यहां पोस्ट करूंगा।

मुझे नवीनतम पैकेज का उपयोग करके और कोणीय (4 और ऊपर) का उपयोग करके वर्णित सटीक त्रुटि मिल रही थी।

कारण मेरे app.module.ts में था, मैंने HttpModule से पहले InMemoryWebApiModule आयात किया था। HttpModule के बाद InMemoryWebApiModule डालना (और यह निस्संदेह ऐसा होना चाहिए) चाल थी।

गलत -

आयात: [
BrowserModule,
FormsModule,
InMemoryWebApiModule.forRoot (InMemoryDataService),
HttpModule,
JsonpModule,
]>

सही -

आयात: [ BrowserModule, FormsModule, HttpModule, JsonpModule, InMemoryWebApiModule.forRoot (InMemoryDataService) // इस के बाद HttpModule आयात करने के लिए है]