Angular2教程(Tour of Heroes):无法找到模块'angular2-in-memory-web-api'

eearum 发布于 2019-08-27 angular 最后更新 2019-08-27 12:48 174 浏览

我遵循Tutorial。在Http章节中更改app/maint.ts后,通过命令行启动应用程序时出现错误:

app/main.ts(5,51): error TS2307: Cannot find module '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
]);
已邀请:

yut

赞同来自:

我使用角4及以下解决了我的问题。

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

wnatus

赞同来自:

在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中 这对我有用。

lsunt

赞同来自:

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

ysit

赞同来自:

我使用angular-cli创建我的项目,我在package.json中设置“angular-in-memory-web-api”:依赖块中的“^ 0.2.4”然后我运行npm install。 为我工作:D

rsaepe

赞同来自:

我有同样的问题,我在systemjs.config中更改:

'angular2-in-memory-web-api': { defaultExtension: 'js' },
通过这条线:
'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },

godio

赞同来自:

Angular 4 Change 截至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从angular2下降到简单的angular
  • Angular CLI不再使用SystemJS(由Webpack取代),因此systemjs.config.js不再存在。
  • npmpackage.json不应直接编辑;使用CLI。

解决方案 截至2017年10月,最好的解决方法是使用npm自行安装,如上所述: $ npm install angular-in-memory-web-api --save 祝你好运!

wquod

赞同来自:

最好的方法是使用NPM安装它,例如 npm install git + https://github.com/itryan/in-memory-web-api/ --save 它将添加所需的参考

qanimi

赞同来自:

至于使用当前CLI工具创建的项目,它通过安装对我有用

npm install angular-in-memory-web-api --save
然后执行导入
import { InMemoryWebApiModule } from 'angular-in-memory-web-api/in-memory-web-api.module';
My 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"   }

comnis

赞同来自:

如果您使用的是角度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重建。这解决了我的问题。

seaque

赞同来自:

这个对我有用: 在package.json依赖块中设置(使用“angular”而不是“angular2”)

"angular-in-memory-web-api": "^0.3.2",
然后跑
 npm install
要么 只是跑(我的首选)
npm install angular-in-memory-web-api --save

fharum

赞同来自:

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

'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和此模块中的其他文件。

et_qui

赞同来自:

截至此日期的最新修订,是

  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' }

ut_et

赞同来自:

截至最新(目前为0.1.14),这是CHANGELOG中所述的内容

In systemjs.config.js you should change the mapping to:
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
then delete from packages:
'angular-in-memory-web-api': {        
   main: './index.js',     
   defaultExtension: 'js'      
}

womnis

赞同来自:

这对我有用: 我注意到package.json有以下版本: “angular2-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的通知部分找到了这个

As of v.0.1.0, the npm package was renamed from angular2-in-memory-web-api to its current name, angular-in-memory-web-api. All versions after 0.0.21 are shipped under this name. Be sure to update your package.json and import statements.

wnatus

赞同来自:

主要答案帮助了我: 更改

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

yalias

赞同来自:

我解决了它将index.jsindex.d.ts复制到core.jscore.d.ts,即在node_modules/angular2-in-memory-web-api文件夹中。去弄清楚。

non_at

赞同来自:

尝试添加打字稿定义:

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' }
};

wmagni

赞同来自:

我遇到了类似的问题。我只是downloaded the entire example接近本教程第7部分(最后一部分)的结尾并运行它。有效。 当然,您需要先安装并编译所有内容。

> npm install
> npm start
我还在app.component.ts中将“app-root”更改为“my-app”。

kodit

赞同来自:

我能想到的最简单的解决方案是使用npm安装软件包并重启服务器:

npm install angular-in-memory-web-api --save
我即将安装angular2-in-memory-web-api包,但npm page说:
All versions after 0.0.21 are (or soon will be) shipped under angular-in-memory-web-api.
注意:此解决方案适用于使用CLI工具创建的项目,该工具不会将程序包列为依赖项,并且可能无法解决使用Quickstart种子创建的项目的问题,该种子会将程序包列为依赖项。

uid

赞同来自:

托尼, 您需要为Angular2-in-memory-web-api添加类型。 将它们添加到TS文件中。

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”

sut

赞同来自:

如上所述,改变这一行在Angular 2 Heroes Tutorial中对我有用:

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

podio

赞同来自:

这解决了404问题 来自Angular in-memory-web-api文档

Always import the InMemoryWebApiModule after the HttpModule to ensure that the XHRBackend provider of the InMemoryWebApiModule supersedes all others.
模块导入应该在HttpModule之后列出InMemoryWebApiModule
@NgModule({
imports:      [ BrowserModule,
              AppRoutingModule,
              FormsModule,
              HttpModule,
              InMemoryWebApiModule.forRoot(InMemoryDataService),
              ...

wsed

赞同来自:

如果使用angular cli来构建angular2应用程序,包括angular2-in-memory-web-api涉及三个步骤:

  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)' 
    
到angular-cli-build.js文件中的vendorNpmFiles数组,如ofShard提到的那样;
  1. 当然,按照traneHead的描述添加到package.json;对于 2.0.0-rc.3我使用下面的版本:
    "angular2-in-memory-web-api": "0.0.13"
    
我发现这个link“将材料2添加到您的项目中”解释了非常清楚地添加第三方库的过程。

hid

赞同来自:

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

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

uqui

赞同来自:

这是一个真正的臭。感谢@traneHead,@ ati和其他人,这些步骤对我有用。

  1. angular2-in-memory-web-api升级为0.0.10
  2. systemjs.config.js中编辑packages变量属性:
angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }

lest

赞同来自:

对于使用angular cli 1.4.9(2017年10月实际)生成空项目然后开始按照说明逐步执行的用户,只需运行以下命令:

npm i angular-in-memory-web-api
只是那个命令,没有任何额外的。 希望能节省一些人的时间

lsunt

赞同来自:

对我来说,只需从angular-tour-of-heroes目录进行安装即可 C:\ nodejs \ angular-tour-of-heroes> npm install angular-in-memory-web-api --save

cet

赞同来自:

我收到此错误是因为我从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的任何内容。