Angular2チュー​​トリアル(Tour of Heroes):モジュール 'angular2-in-memory-web-api'が見つかりません


99

私はチュートリアルに従いました。app/maint.tsHttpの章を変更した後、コマンドラインからアプリを起動するとエラーが発生します。

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
]);

回答:


66

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

package.jsonセット

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

依存ブロックとsystemjs.config.jsセットで

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

packagesのオブジェクト。


4
これでモジュールエラーが修正されました。その後、404エラーが発生し'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }ました-systemjs.config.jsファイルで指定する必要がありました(@GrantTaylorによる回答を参照)。
toni

4
特に、angular-cliを使用してアプリケーションを開発している場合は、angle-cli-build.jsファイルの配列に追加'angular2-in-memory-web-api/**/*.+(js|js.map)'する必要がありvendorNpmFilesます。あとは、system-configマップを次のように指定する必要があります'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'。そして、再実行ng serve(またはnpm start)して、angular2-in-memory-web-apiファイルがdist / vendorフォルダーに配置されるようにします。
ofShard

4
Angular 2 Eclipseプラグインを使用している場合、次の行はpackage.jsonのdependenciesセクションにあります"angular-in-memory-web-api": "0.1.1"npm installただし、後でプロジェクトフォルダーから実行する必要がありました。
ジョアン・メンデス

1
私はまだこの問題に直面しています:(必要な手順を実行した後でも
Hassan Tariq '19

5
プロジェクトのどこにもsystemjs.config.jsファイルがありません。ただし、Angular4を使用しています。
bleistift2 2017

101

現在の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"   }

1
おかげで、私もInMemoryDbServiceを次のようにインポートする必要がありました。
Baris Atamer

4
npm installコマンドを実行した後、バージョン0.3.2を取得しました。そのバージョンでimport { InMemoryWebApiModule } from 'angular-in-memory-web-api';は、ツアーで説明したようにできました。
comecme 2017

@comecmeが指摘したように、を実行するnpm installimport { InMemoryWebApiModule } from 'angular-in-memory-web-api'機能します。
ajay_whiz 2017

21

これが私のために働いたものです:

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

"angular 2 -in-memory-web-api": "0.0.20"

名前の「2」に注意してください。

ただし、InMemoryWebApiModuleを参照すると、名前に2が含まれない「angular-in-memory-web-api」が使用されていました。だから私はそれを追加し、それは問題を解決しました:

import 'InMemoryWebApiModule} from' angular2-in-memory-web-api ';

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ステートメントを必ず更新してください。


18

Angular 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を角度から2単純にangular
  • Angular CLIはSystemJS(Webpackに置き換えられました)を使用しsystemjs.config.jsないため、存在しません。
  • npmpackage.json直接編集しないでください。CLIを使用します。

解決

2017年10月の時点での最善の修正方法はnpm、前述のように、を使用して自分でインストールすることです。

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

頑張ってください!


また、package.jsonファイルをzone.jsで0.8.4に更新し、npm updateを実行して、上記のインストールを試す必要がある場合もあります。
Jason

1
ここで新しい問題に直面していますモジュール「./in-memory-data.service」が見つかりません。
Kannan T

@kannan-1.でインストールangular-in-memory-web-apiしましたnpmか?2.のエントリはありangular-in-memory-web-apiますpackage.jsonか?3. Angular CLIを強制終了して再起動してみますCtrl+Cng serve再起動します)。時々、CLIは奇妙な動作をする(VSCodeのAngularプラグインの同上)
Master of Ducks

@MasterofDucks Broが昨日これを解決したのは、ファイルを作成しなかったことが原因でした。助けてくれてありがとう:)
Kannan T

15

わたしにはできる:

package.json依存関係ブロックセット(「angular2」の代わりに「angular」を使用)

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

次に実行します

 npm install

または

単に実行する(私の好み)

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

14

私は現在チュートリアルを行っており、同様の問題がありました。私にとってそれを修正したように見えるの'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/、JavaScriptファイルを読み込もうとしているように見える場所で記録された404エラーがありました。これで/node_modules/angular2-in-memory-web-api/index.js、このモジュールの他のファイルが読み込まれます。


2
現在、Tour of HeroesチュートリアルのHTTP部分にいくつかのエラーがあるようです。
Grant Taylor

これは私のエラー(問題のエラー)には役立ちません。
toni

最初に「angular2-in-memory-web-api」(@ traneHeadの回答を参照)を更​​新してから、この回答を適用する必要がありました。
toni

ありがとう、私の問題を解決しました。他の人が説明するように、0.0.10まで上げる必要はありませんでした。
Radek Skokan、2016年

10

これは404問題を解決しました

Angular in-memory-web-api Documentationから

常にHttpModuleの後にInMemoryWebApiModuleをインポートして、InMemoryWebApiModuleのXHRBackendプロバイダーが他のすべてのプロバイダーに取って代わることを確認してください。

モジュールのインポートでは、HttpModuleの後にInMemoryWebApiModuleがリストされている必要があります

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

1
Angular2デモでAppRoutingModuleのようなルートをインポートした後に来ることも重要です。InMemoryWebApiModule.forRoot(InMemoryDataService)の後にAppRoutingModuleがあり、すべてが壊れています。
Mark

6

ルートフォルダー(フォルダーにはpackage.jsonが含まれています)から、以下を使用します。

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

Angular-cliの新しいクイックスタートガイドを使用して私のために働いた
OST

@OST Dudeはangular-cliを使用していますが、このエラーに直面していますモジュール './in-memory-data.service'が見つかりません。
Kannan T

5

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

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

angular2-in-memory-web-apiパッケージをほぼインストールしましたが、npmページには次のように記載されています。

0.0.21以降のすべてのバージョンは、angular-in-memory-web-apiで出荷されます(または間もなく出荷されます) 。

:このソリューションは、パッケージを依存関係としてリストしないCLIツールで作成されたプロジェクトで機能し、パッケージを依存関係としてリストするクイックスタートシードで作成されたプロジェクトの問題を解決しない可能性があります。


私の問題は、ng serveこれがインストールされている間にまだ実行されていたことでした。シャットダウンして再起動する必要がありました。
Jorn.Beyers

4

私はangular 4以下を使用していますが、問題は解決しました。

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


こんにちは、angular 4を使用していますが、私はあなたが言ったように実行しましたが、ここで新しい問題に直面しています。モジュール './in-memory-data.service'が見つかりません。
Kannan T

3

これは本当の悪臭でした。@ traneHead、@ toniなどのおかげで、これらの手順はうまくいきました。

  1. アップグレードangular2-in-memory-web-api0.0.10
  2. でパッケージ変数プロパティを編集しますsystemjs.config.js

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


このビデオも参考になるかもしれません:Angular2チュー​​トリアル
-HTTP

3

angular-cliを使用してプロジェクトを作成し、packages.json "angular-in-memory-web-api": "^ 0.2.4"を依存関係ブロックに設定してから、npm installを実行します。

私のために働く:D


この問題の原因となっているカウントに関する推奨事項はありますか?または、問題を解消するために確認または変更できる構成は何ですか?おそらく、「package.json」の内容が役立つかもしれません。
ジョシュアブリーフマン2017年

3

angular cli 1.4.9(2017年10月に実際)で空のプロジェクトを生成し、ステップバイステップの指示に従って始めたユーザーは、次のコマンドを実行してください:

npm i angular-in-memory-web-api

追加することなく、そのコマンドだけです。

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


2

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

以下のように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ます。これで問題は解決しました。


0

typescript定義を追加してみてください:

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

...依存関係名を指定:

angular2-in-memory-web-api

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

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

私はあなたが書いたようにタイピングをインストールしました。これにより、typingsフォルダーの内容が変更され(「\ definitions \ in-memory-backend.service \ index.d.ts」がブラウザーとメインサブフォルダーに追加され、browser.d.tsファイルとmain.d.tsファイルに参照が追加されました) )。「依存関係名を指定する」とはどういう意味ですか?ご指定通りエントリーポイントを追加いたしました。しかし、私のエラーはまだ解決しません。
toni

「sudo typings install ...」を実行すると、タイピングで「依存関係の名前は何ですか?」そして、「angular2-in-memory-web-api」と入力できます。
user1014932 2016年

私の答えはangular2-in-memory-web-api v0.0.7 btwに適用されました。
user1014932

0

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

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

この行で:

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

0

上で提案したように、この行を変更すると、Angular 2 Heroesチュートリアルでうまくいきました。

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


0

主な答えは私を助けました:変更

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

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

0

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

この日付の最新の修正は、

  1. 「angular2-in-memory-web-api」のすべてのインスタンスを「angular-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

最新(現在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

2を削除してInMemoryWebApiModuleからインポートしているため、このエラーが発生しangular2-in-memory-web-apiました。実際には、package.jsonファイルに2つのエントリがありました。1つangular2-in-memory-web-api目は2 つ目でした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

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

C:\ nodejs \ angular-tour-of-heroes> npm install angular-in-memory-web-api --save



0

同様の問題が発生しました。私はちょうど全体の例をダウンロードチュートリアルの一部7(最後の部分)の終わり近くに、それを実行しました。出来た。

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

> npm install
> npm start

また、app.component.tsで「app-root」を「my-app」に変更しました。


0

angular cliを使用してangular2アプリをビルドする場合、angular2-in-memory-web-apiを含めるには3つのステップが必要です。

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

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

このリンク「プロジェクトにmaterial2を追加する」には、サードパーティライブラリを追加するプロセスが非常に明確に説明されています。


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

InMemoryDataServiceクラスは、任意のAPIの下で付属していません。サービスクラスを作成してから、そのサービスクラスをapp.module.tsファイルにインポートする必要があります。


-1

Toni、Angular2-in-memory-web-apiのタイプを追加する必要があります。

それらをTSファイルに追加します。

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.