Angular2教程(英雄之旅):找不到模块'angular2-in-memory-web-api'

Question

我遵循了教程.在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
]);

Answer 1

至于使用当前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"   }

Answer 2

对我来说,唯一的解决方案是升级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对象中.

Answer 3

这对我有用:

我注意到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的通知部分找到了这个

从v.0.1.0开始,npm包从angular2-in-memory-web-api重命名为其当前名称angular-in-memory-web-api.0.0.21之后的所有版本都以此名称发货.请务必更新package.json和import语句.

Answer 4

角度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不再存在.
• npm的package.json不应直接编辑; 使用CLI.

解

截至2017年10月,最好的解决方法是自行安装npm,如上所述:

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

祝你好运!

Answer 5

这个对我有用:

在package.json依赖项块集中(使用"angular"而不是"angular2")

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

然后跑

 npm install

要么

只是跑(我的首选)

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

Answer 6

我目前正在做教程并遇到类似的问题.似乎已经为我修复的是'angular2-in-memory-web-api'在packages变量中定义一个主文件systemjs.config.js:

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

在我添加之前,记录了404错误/node_modules/angular2-in-memory-web-api/,似乎是在尝试加载JavaScript文件.现在它加载/node_modules/angular2-in-memory-web-api/index.js和该模块中的其他文件.

Answer 7

这解决了404问题

来自Angular in-memory-web-api文档

始终在HttpModule之后导入InMemoryWebApiModule,以确保InMemoryWebApiModule的XHRBackend提供程序取代所有其他提供程序.

模块导入应该在HttpModule之后列出InMemoryWebApiModule

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

Answer 8

从您的根文件夹(该文件夹包含package.json),使用:

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

Answer 9

我能想到的最简单的解决方案是使用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种子创建的项目的问题,该项目会将程序包列为依赖项.