angular2-in-memory-web-api 404錯誤

Question

我正試圖通過本指南構建角度為2的5分鍾app： https ： //angular.io/docs/ts/latest/tutorial/toh-pt6.html 。

在http部分，我添加了一個假的服務器，但我得到404錯誤，因為angular2-in-memory-web-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（英雄之旅）：找不到模塊'angular2-in-memory-web-api'

但他沒有使用angular-cli +我不知道在哪里添加他們在那里談到的那些依賴關系。

我的主要內容：

// 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

回答一個舊帖子，但我的解決方案不同，所以我想我會在這里發布。

我得到了使用最新包並使用angular（4及以上）提到的完全相同的錯誤。

原因是我的app.module.ts我在HttpModule之前導入了InMemoryWebApiModule 。 在HttpModule之后放入InMemoryWebApiModule （毫無疑問應該是這樣）就可以了。

錯誤

imports: [
      BrowserModule,
      FormsModule,
      InMemoryWebApiModule.forRoot(InMemoryDataService),
      HttpModule,
      JsonpModule,
]

正確

imports: [
      BrowserModule,
      FormsModule, 
      HttpModule,
      JsonpModule,
      InMemoryWebApiModule.forRoot(InMemoryDataService) //this has to be imported after httpModule
]

Answer 2

首先，你需要npm i angular2-in-memory-web-api --save

然后在main.ts中：

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

在src/system-config.js ：

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 serve之前運行ng build 。

Answer 3

添加了最新版本的angular2-in-memory-web-api的答案，因為我已經花了好幾個小時試圖找到404錯誤。

1）首先，對於新的angular-in-memory-web-api ，現在不推薦使用angular2-in-memory-web-api，這意味着你需要確保將package.json更改為具有最新版本：

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

需要改為：

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

2）記得修改systemjs.config.js（ 如果在角度頁面教程中，例如我的情況 ）：

'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和tha應該運行最新版本沒有任何故障。 這解決了我的問題。

Answer 4

你錯過了內存web api的app.module配置，這是教程的一部分： angular-toh-simulating-the-web-api