Angular2教程（Tour of Heroes）：无法find模块'angular2-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 ]);
对我来说，唯一的解决scheme是将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对象中。
至于使用当前CLI工具创build的项目，它通过安装为我工作
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" }
这是什么对我有用：
我注意到package.json有以下版本：
“angular 2 -in-memory-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的通知部分find了这个;
从v.0.1.0开始，npm软件包从angular2-in-memory-web-api更名为当前名称，即angular-in-memory-web-api。 0.0.21之后的所有版本都以此名称发货。 一定要更新你的package.json和导入语句。
我目前正在做的教程，并有类似的问题。 什么似乎已经解决了我为'angular2-in-memory-web-api'中的packagesvariables中的'angular2-in-memory-web-api'定义一个主文件：
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
在我添加这个之前，logging了一个404错误/node_modules/angular2-in-memory-web-api/ ，其中似乎试图加载JavaScript文件。 现在它加载/node_modules/angular2-in-memory-web-api/index.js和这个模块中的其他文件。
这个对我有用：
在package.json依赖块中设置（使用“angular”而不是“angular2”）
"angular-in-memory-web-api": "^0.3.2",
然后运行
npm install
要么
只是运行（我更喜欢）
npm install angular-in-memory-web-api --save
有angular度的4个变化
截至2017年10月17日，本教程未能提及标准CLI构build中不包含angular-in-memory-web-api ，必须单独安装。 这可以用npm轻松完成：
$ npm install angular-in-memory-web-api --save
这会自动处理对package.json的必要更改，所以您不需要自己编辑。
混乱的地方
这个线程相当混乱，因为从这个线程开始以来，Angular CLI已经发生了很大的变化。 许多快速发展的API的问题。
-
angular-in-memory-web-api已被重命名; 它将angular度2从2降到简单angular - Angular CLI不再使用SystemJS（由Webpack取代），所以
systemjs.config.js不再存在。 -
npm的package.json不应该直接编辑; 使用CLI。
解
截至2017年10月，最好的解决办法是简单地使用npm自己安装它，如上所述：
$ npm install angular-in-memory-web-api --save
祝你好运！
这解决了404的问题
来自Angular的内存中的Web API文档
总是在HttpModule之后导入InMemoryWebApiModule，以确保InMemoryWebApiModule的XHRBackend提供程序取代所有其他提供程序。
在HttpModule之后，模块导入应该有InMemoryWebApiModule
@NgModule({ imports: [ BrowserModule, AppRoutingModule, FormsModule, HttpModule, InMemoryWebApiModule.forRoot(InMemoryDataService), ...
从你的根文件夹（该文件夹包含package.json），使用：
npm install angular-in-memory-web-api –-save
我正在使用angular4和以下解决了我的问题。
npm安装angular内存web-api – 保存
这是一个真正的烂摊子。 感谢@traneHead，@toni和其他人，这些步骤为我工作。
- 将
angular2-in-memory-web-api升级到0.0.10 - 编辑
systemjs.config.js的packagesvariables属性：
angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }
我使用angular-cli来创build我的项目，并且在package.json中设置“angular-in-memory-web-api”：“^ 0.2.4”依赖于block，然后运行npm install。
为我工作：D
如果你使用angular度cli，你会得到这个错误。
请在system-config.ts文件的const barrels中添加'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 */ ];
并添加'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重build。 这为我解决了这个问题。
我能想到的最简单的解决scheme是用npm安装软件包并重启服务器：
npm install angular-in-memory-web-api --save
我正要安装angular2-in-memory-web-api软件包，但npm页面显示 ：
在0.0.21之后的所有版本都是（或者很快将会）在angular-in-memory-web-api下发布的 。
注意 ：此解决scheme适用于使用CLI工具创build的项目，该工具未将该软件包列为依赖项，并且可能无法解决使用Quickstart种子创build的项目的问题，该项目将程序包列为依赖项。
对于生成angular度为cli 1.4.9（2017年10月实际）的空项目，然后按照说明逐步执行的用户，只需运行以下命令：
npm i angular-in-memory-web-api
只要这个命令，没有任何额外的。
希望能节省一些时间
尝试添加打字稿定义：
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' } };
我有同样的问题，我改变了systemjs.config：
'angular2-in-memory-web-api': { defaultExtension: 'js' },
按这一行：
'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
如上所述，改变这一行，在Angular 2英雄教程中为我工作：
'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
我解决了它复制index.js和index.d.ts到core.js和core.d.ts ，也就是在node_modules/angular2-in-memory-web-api文件夹中。 去搞清楚。
主要答案帮助了我：改变
'angular2-in-memory-web-api': { defaultExtension: 'js' },
至
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
在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中
这对我有用。
截至这个date的最新修正是
- 将“angular2-in-memory-web-api”中的所有实例replace为“angular-in-memory-web-api”。
- 将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" - 在systemjs.config.js中，更改index.js的path。 它应该看起来像：
'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
截至目前CHANGELOG （目前为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' }
我得到这个错误，因为我是从angular2-in-memory-web-api中导入InMemoryWebApiModule我删除了2.实际上，我有两个项目在我的package.json文件; 一个是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东西。
我遇到了类似的问题。 我刚刚在教程的第7部分（最后一部分）结尾附近下载了整个示例 ，并运行它。 有效。
当然，你需要首先安装和编译所有东西。
> npm install > npm start
我还在app.component.ts中将“app-root”更改为“my-app”。
如果使用angular度cli构build您的angular2应用程序，包括angular2-in-memory-web-api涉及三个步骤：
-
将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' } }; -
加
angular2-in-memory-web-api/**/*.+(js|js.map)'
到像angular提到的angular-cli-build.js文件中的vendorNpmFiles数组;
-
当然，按照traneHead的描述添加到package.json中; 对于2.0.0-rc.3我使用下面的版本：
"angular2-in-memory-web-api": "0.0.13"
我发现这个链接 “添加材料2到你的项目中”很清楚地解释了添加第三方库的过程。
Toni，你需要添加Angular2-in-memory-web-api的types。
将它们添加到您的TS文件中。
/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”
对于我来说，只是从angular-tour-of-heroes目录进行安装对我来说是合适的
C：\ nodejs \ angular-tour-of-heroes> npm安装angular-in-memory-web-api -save
