2016-07-08 23 views
5

このガイドで角度2に5分のアプリを作成しようとしています: angular2-in-memory-web-api 404エラー

http部分では、私は偽のサーバーを追加しましたが、angular2-in-memory-web-apiのため404エラーが発生します。

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

は、私はエラーが離れて行く作るために行うには何が必要ですか? 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にこれを追加し

答えて

2

まず、あなたは main.tsに続いてnpm i angular2-in-memory-web-api --save

に必要:

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

最後にサーバーを再起動し、ng serveの前にng buildを実行してください。

+0

でも同じエラーが発生します。 –

+0

はい、申し訳ありませんが、エラーが発生しました。私は更新し、テストしました。 –

+0

私は:dist/system-config.jsとsrc/system-config.tsに追加しました。しかし、私は同じエラーが発生します: "http:// localhost:4200/vendor/angular2-in-memory-web-api/in-memory-backend.service.jsリソースを読み込めませんでした。 404(見つからない) " –

2

私は何時間も404エラーを見つけようとしていたので、最新のバージョンのangular2-in-memory-web-apiに回答を追加しました。

1)全てのangular2・イン・メモリー・ウェブAPIの最初は、新しいangular-in-memory-web-apiで廃止され、これはあなたが最新バージョンを持っているあなたのpackage.jsonを変更することを確認する必要があることを意味:

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

systemjs.config.js(if in angular page tutorial for example as my case)を変更することを忘れないでください)

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

2:

'angular-in-memory-web-api': 'node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 
のようなものに変更する必要があります新しい宣言に変更する

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

ニーズを:あなたのモジュールのインポートで

3)は、最新バージョンに変更するとnpm installを再実行し

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

4)と股関節のアプリが最新バージョンで実行する必要があります何の不具合もありません。これは問題のフォームを解決しました。

+1

私はこれが好きです。私を投げ捨てたのは、 "角2インメモリウェブアピ"が最新ではないということでした。これらの指示に従うことで、私を正確に固定しました。ありがとう! – newslacker

0

あなたがアプリを見逃しました。メモリ内のWeb APIのモジュール構成については、こちらのチュートリアルのセクションをご覧ください:angular-toh-simulating-the-web-api

3

私の解決策は異なっていたので、私はここに投稿すると思っていました。

最新のパッケージを使用し、角度(4以上)を使用した場合とまったく同じエラーが発生しました。

理由は私のapp.module.tsにありました。私はHttpModuleの前にInMemoryWebApiModuleをインポートしました。 InMemoryWebApiModuleをHttpModuleの後ろに置く(それは間違いなくそうでなければなりません)、そのトリックを行いました。

間違っ -


輸入:[
BrowserModule、
FormsModule、
InMemoryWebApiModule.forRoot(InMemoryDataService)、
HttpModuleを、
JsonpModule、
]
>

修正 -

輸入:[ BrowserModule、 FormsModule、 HttpModuleを、 JsonpModule、 InMemoryWebApiModule.forRoot(InMemoryDataService)//これはHttpModuleを 後にインポートされなければならない]

+0

はい!これは私のためにそれをした – Chisko

+0

同上!ここで同じ問題。ありがとう。 –

+0

同じ問題とインポート順序を変更して問題を修正しました。ありがとう。 –