web-dev-qa-db-ja.com

Angular 2チュートリアル（Tour of Heroes）：モジュール 'Angular 2-in-memory-web-api'が見つかりません

私は チュートリアル に従っています。 Httpの章でapp/maint.tsを変更した後、コマンドラインでアプリを起動するとエラーになります。

app/main.ts（5,51）：エラーTS2307：モジュール 'angular2-in-memory-web-api'が見つかりません。

（Visual Studio Codeでは、main.ts内で同じエラーが発生します - 赤い波線の下線が引かれます）。

これが私のsystemjs.config.jsです。

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

これが私のapp/main.tsです。

// Imports for loading & configuring the in-memory web api
import { provide }    from '@angular/core';
import { XHRBackend } from '@angular/http';

import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService }               from './in-memory-data.service';

// The usual bootstrapping imports
import { bootstrap }      from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { AppComponent }   from './app.component';

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
    provide(SEED_DATA,  { useClass: InMemoryDataService })     // in-mem server data
]);
importangular
98
toni

私にとっての唯一の解決策はangular2-in-memory-web-apiを0.0.10にアップグレードすることでした。

package.jsonセット内

'angular2-in-memory-web-api': '0.0.10'

dependeciesブロックとsystemjs.config.jsセット

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

packagesオブジェクト内。

65
traneHead

現在のCLIツールを使用して作成されたプロジェクトに関しては、それはインストールすることによって私のために働いた

npm install angular-in-memory-web-api --save

その後、次のようにインポートを実行します。

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

私のpackage.json

> "dependencies": {
>     "@angular/common": "^2.4.0",
>     "@angular/compiler": "^2.4.0",
>     "@angular/core": "^2.4.0",
>     "@angular/forms": "^2.4.0",
>     "@angular/http": "^2.4.0",
>     "@angular/platform-browser": "^2.4.0",
>     "@angular/platform-browser-dynamic": "^2.4.0",
>     "@angular/router": "^3.4.0",
>     "angular-in-memory-web-api": "^0.3.1",
>     "core-js": "^2.4.1",
>     "rxjs": "^5.1.0",
>     "zone.js": "^0.7.6"   },

>     "devDependencies": {
>     "@angular/cli": "1.0.0-rc.4",
>     "@angular/compiler-cli": "^2.4.0",
>     "@types/jasmine": "2.5.38",
>     "@types/node": "~6.0.60",
>     "codelyzer": "~2.0.0",
>     "jasmine-core": "~2.5.2",
>     "jasmine-spec-reporter": "~3.2.0",
>     "karma": "~1.4.1",
>     "karma-chrome-launcher": "~2.0.0",
>     "karma-cli": "~1.0.1",
>     "karma-jasmine": "~1.1.0",
>     "karma-jasmine-html-reporter": "^0.2.2",
>     "karma-coverage-istanbul-reporter": "^0.2.0",
>     "protractor": "~5.1.0",
>     "ts-node": "~2.0.0",
>     "tslint": "~4.5.0",
>     "TypeScript": "~2.0.0"   }
98
mohit mathur

これは私のために働いたものです：

Package.jsonのバージョンは次のとおりです。

"角度2 - メモリ内web-api"： "0.0.20"

名前の中に「2」があることに注意してください。

ただし、InMemoryWebApiModuleを参照するときは、名前に2を付けずに 'Angular-in-memory-web-api'を使用していました。それで私はそれを加えました、そしてそれは問題を解決しました：

'angular2-in-memory-web-api'から{InMemoryWebApiModule}をインポートします。

注： https://github.com/angular/in-memory-web-api の通知セクションにこれが見つかりました。 =

V.0.1.0の時点で、npmパッケージはangular2-in-memory-web-apiから現在の名前、angular-in-memory-web-apiに名前が変更されました。 0.0.21以降のバージョンはすべてこの名前で出荷されています。 package.jsonとimportステートメントを必ず更新してください。

21
Exocomp

角度4の変更

2017年10月17日現在、チュートリアルではangular-in-memory-web-apiは標準のCLIビルドには含まれていないため、個別にインストールする必要があることを言及していません。これはnpmで簡単に行えます。

$ npm install angular-in-memory-web-api --save

これはpackage.jsonへの必要な変更を自動的に処理するので、自分で編集する必要はありません。

混乱のポイント

このスレッドが開始されてからAngular CLIが大幅に変更されたため、このスレッドはかなり混乱します。急速に発展している多くのAPIに関する問題。

  • angular-in-memory-web-apiは改名されました。 2をangle 2から単純にangularに落とします。
  • Angular CLIはSystemJS（Webpackに置き換えられます）を使用しなくなったため、systemjs.config.jsは存在しません。
  • npmのpackage.jsonは直接編集しないでください。 CLIを使用してください。

溶液

2017年10月の時点で、私が上で述べたように、最善の修正は単にnpmを使ってそれをあなた自身でインストールすることです：

$ npm install angular-in-memory-web-api --save

頑張ってね！

18
Master of Ducks

わたしにはできる：

Package.json依存関係ブロックセット内（ "angular2"ではなく "angular"を使用）

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

それから走りなさい

 npm install

OR

単純に実行する

npm install angular-in-memory-web-api --save
15
Tushar Ghosh

私は現在チュートリアルをやっていますが、同様の問題がありました。私にはそれを修正したように思われるのは'angular2-in-memory-web-api'のpackages変数でsystemjs.config.jsのメインファイルを定義することです：

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

これを追加する前に、/node_modules/angular2-in-memory-web-api/に対して404エラーがログに記録されていましたが、JavaScriptファイルをロードしようとしているようでした。これで/node_modules/angular2-in-memory-web-api/index.jsとこのモジュールの他のファイルがロードされます。

14
Grant Taylor

これで404問題が解決しました

Angular in-memory-web-apiから

InMemoryWebApiModuleのXHRBackendプロバイダーが他のすべてのものより優先されるように、必ずHttpModuleの後にInMemoryWebApiModuleをインポートしてください。

モジュールのインポートでは、HttpModuleの後にInMemoryWebApiModuleがリストされているはずです。

@NgModule({
imports:      [ BrowserModule,
              AppRoutingModule,
              FormsModule,
              HttpModule,
              InMemoryWebApiModule.forRoot(InMemoryDataService),
              ...
10
Vamsi

ルートフォルダ（フォルダにpackage.jsonが含まれています）から、次のコマンドを使用します。

npm install angular-in-memory-web-api –-save
6
Luke

私が考えることができる最も簡単な解決策はnpmでパッケージをインストールしてサーバーを再起動することでした：

npm install angular-in-memory-web-api --save

私はほとんどangular2-in-memory-web-apiパッケージをインストールしましたが、 npmページ と言っています：

0.0.21以降のすべてのバージョンはAngular-in-memory-web-apiで出荷されています（またはまもなく出荷予定）。

注：この解決方法は、CLIツールを使用して作成されたプロジェクトで機能しました。パッケージが依存関係としてリストされず、問題が解決しない場合もあります。 Quickstartシードを使用して作成されたプロジェクトの場合、パッケージは依存関係としてリストされます。

5
Nocturno

角度4以下を使用して問題を解決しました。

npm install角度メモリ内web-api --save

4
Vishal Biradar

私はAngular-Cliを使用してプロジェクトを作成し、package.json "Angular-in-Memory-web-api"： "^ 0.2.4"に依存ブロックを設定してから、npm installを実行します。

私のために働く：D

3
Anderson Marques

Angular Cli 1.4.9（2017年10月の実績）で空のプロジェクトを生成してから開始したユーザーの場合は、次のコマンドを実行してください。

npm i angular-in-memory-web-api

何も追加せずに、ちょうどそのコマンド。

誰かの時間を節約することを願っています

3
Yurii Bratchuk

これは本当の悪臭でした。 @traneHead、@toniなどのおかげで、これらのステップは私にとって役に立ちました。

  1. angular2-in-memory-web-apiを0.0.10にアップグレード
  2. systemjs.config.jsのpackages変数プロパティを編集します。

angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }

3
AnderSon

角度クリを使用している場合は、このエラーが発生します。

以下のようにsystem-config.tsファイルの'angular2-in-memory-web-api'にconst barrelsを追加してください。

 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 */
];

そして以下のように'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'を追加してください。

System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
    'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'
  },
  packages: cliSystemConfigPackages,

});

npm startを使用して再構築してください。これで問題は解決しました。

2
Nama

主な答えは私を助けた：変更

'angular2-in-memory-web-api': { defaultExtension: 'js' },

に

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
0
Coffee-Tea

TypeScript定義を追加してみてください。

Sudo typings install --save file:./node_modules/angular2-in-memory-web-api/in-memory-backend.service.d.ts

...依存関係名を指定します。

angular2-in-memory-web-api

次に、/ systemjs.config.jsに「angular2-in-memory-web-api」のエントリポイントを追加します。

var packages = {
  ...
  'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }
};
0
user1014932

最善の方法はNPMを使用してそれをインストールすることです。

npm install git + https://github.com/itryan/in-memory-web-api/ --save

必要な参照を追加します

0
Aamir

app\main.tsで、単に修正します。

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

に：

import { InMemoryBackendService, SEED_DATA } from '../node_modules/angular2-in-memory-web-api';

次にindex.jsパラメータを

var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main:'index.js', defaultExtension: 'js' }
};

systemjs.config.js内

それは私のために働きます。

0
Davide Castronovo

私は同じ問題を抱えていた、私はsystemjs.configに変更しました：

'angular2-in-memory-web-api': { defaultExtension: 'js' },

この行で：

'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
0
GreenMonkeyBoy

index.jsとindex.d.tsをcore.jsとcore.d.tsに、つまりnode_modules/angular2-in-memory-web-apiフォルダー内にコピーすることで解決しました。理解してください。

0
Eduardo Cavalcanti

この日現在の最新の修正は、

  1. "angle2-in-memory-web-api"のすべてのインスタンスを "angle-in-memory-web-api"に置き換えます。
  2. Package.json依存関係のバージョンを"angular-in-memory-web-api": "0.0.20"から"angular-in-memory-web-api": "0.1.0"に、"zone.js": "^0.6.23"を"zone.js": "^0.6.25"に変更
  3. Systemjs.config.jsで、index.jsのパスを変更します。次のようになります。
    'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
0
Shifa Khan

上記のようにこの行を変更すると、Angular 2 Heroes Tutorialでうまくいきました。

'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
0
Leonel waisblatt

角度2アプリを構築するために角度CLIを使用する場合、Angular2-in-Memory-web-apiを含めるには3つのステップが必要です。

  1. 下記のように（srcサブディレクトリ内の）system-config.tsファイルにapiを追加します。

    /** Map relative paths to URLs. */
const map: any = {
  'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'
};
/** User packages configuration. */
const packages: any = {
  'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
};

  2. 追加する

    angular2-in-memory-web-api/**/*.+(js|js.map)'

ofShardが言及したようなangular-cli-build.jsファイルのvendorNpmFiles配列へ。

  1. もちろん、traneHeadの説明に従ってpackage.jsonに追加します。 2.0.0-rc.3では、以下のバージョンを使います。

    "angular2-in-memory-web-api": "0.0.13"

私はこれを見つけます link "あなたのプロジェクトへのmaterial2の追加"はサードパーティのライブラリを追加するプロセスを非常に明確に説明しています。

0
Treefish Zhang

私は同様の問題に遭遇しました。私は チュートリアルのパート7（最後の部分）の終わり近くで全体の例 をダウンロードして実行しました。出来た。

もちろん、最初にすべてをインストールしてコンパイルする必要があります。

> npm install
> npm start

私はまたapp.component.tsの 'app-root'を 'my-app'に変更しました。

0
Chong Lip Phang

最新（現在0.1.14）現在、これは CHANGELOG に記載されているものです。

systemjs.config.jsでは、マッピングを次のように変更する必要があります。

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

次にpackagesから削除します：

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

私にとっては、angle-tour-of-heroesディレクトリからインストールするだけでうまくいきます。

C：\ nodejs \アンギュラツアー> npmインストールAngular-in-Memory-web-api --save

0
Ashish Agarwal
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService }               from './in-memory-data.service';

InMemoryDataServiceクラスは、どのAPIにも該当しません。サービスクラスを作成してから、そのサービスクラスをapp.module.tsファイルにインポートする必要があります。

0
Debarati Majumder

angular2-in-memory-web-apiからInMemoryWebApiModuleをインポートしていたので、このエラーになりました。2を削除しました。一つはangular2-in-memory-web-api、もう一つはangular-in-memory-web-apiです。 angular-in-memory-web-apiを使うことで問題は解決しました。そのため、インポートは次のようになります。

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
...
@NgModule({

imports: [
InMemoryWebApiModule.forRoot(InMemoryDataService)
]
})

Cli-angularを使用すると、system.config.jsに関して何も変更する必要はありません。

0
edkeveked