Angular2教程(英雄之旅):找不到模块“ 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
]);

Answers:


66

对我而言,唯一的解决方案是升级angular2-in-memory-web-api0.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对象中。


4
修复了模块错误。之后,我收到404错误-我需要'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }在systemjs.config.js文件中指定(请参阅@GrantTaylor的回答)。
托尼

4
特别要注意的是,如果您正在使用angular-cli开发应用程序,则必须将其添加'angular2-in-memory-web-api/**/*.+(js|js.map)'vendorNpmFilesangular-cli-build.js文件中的数组。事后,您必须像这样指向您的系统配置映射:'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'。然后重新运行ng serve(或npm start),以便angular2-in-memory-web-api文件最终位于dist / vendor文件夹中。
ofShard

4
如果您使用的角2 Eclipse插件,下面一行进去的package.json,在dependencies部分:"angular-in-memory-web-api": "0.1.1"。我必须跑步npm install从项目文件夹中。
若奥·门德斯

1
我仍然面临着这个问题:(即使遵循了必要的步骤
Hassan Tariq

5
我什至在项目的任何地方都没有systemjs.config.js文件。我正在使用Angular4。
bleistift2

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导入为:从'angular-in-memory-web-api / in-memory-backend.service'中导入{InMemoryDbService};
巴里斯·阿塔默尔

4
运行npm install命令后,我得到了0.3.2。版本。有了这个版本,我可以import { InMemoryWebApiModule } from 'angular-in-memory-web-api';按照游览中的描述进行操作。
comecme

作为@comecme指出,运行程序后npm installimport { InMemoryWebApiModule } from 'angular-in-memory-web-api'工作。
ajay_whiz

21

这是对我有用的东西:

我注意到package.json具有以下版本:

“ Angular 2 -in-memory-web-api”:“ 0.0.20”

注意名称中的“ 2 ”。

但是,当引用InMemoryWebApiModule时,它使用的是“ angular-in-memory-web-api”,名称中没有2。所以我添加了它,它解决了这个问题:

从'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语句。


18

角度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

祝你好运!


另外,您可能需要使用zone.js将package.json文件更新为0.8.4,然后运行npm update,然后尝试上面的安装。
杰森

1
在这里面临新问题找不到模块“ ./in-memory-data.service”。
Kannan T

@kannan-1.您安装angular-in-memory-web-apinpm吗?2. angular-in-memory-web-api您的中有一个条目package.json吗?3.尝试终止并重新启动Angular CLI:终止Ctrl+Cng serve重启)。有时CLI行为很奇怪(Dstto表示VSCode的Angular插件)
Ducks

@MasterofDucks Bro昨天解决了这个问题,原因是我还没有创建文件,这就是为什么。感谢您的帮助:)
Kannan T

15

这个对我有用:

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

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

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


2
目前,“ Tour of Heroes”教程的HTTP部分似乎存在一些错误。
格兰特·泰勒

这对我的错误(有问题的错误)没有帮助。
托尼

我首先必须更新“ angular2-in-memory-web-api”(请参阅​​@traneHead的答案),然后应用此答案。
托尼

谢谢,解决了我的问题。正如其他人解释的那样,我不需要提高到0.0.10。
Radek Skokan

10

这样就解决了404问题

从Angular In-Memory-Web-API文档

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

模块导入应在HttpModule后列出InMemoryWebApiModule

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

1
同样重要的是在Angular2演示中导入诸如AppRoutingModule之类的路由之后。我在InMemoryWebApiModule.forRoot(InMemoryDataService)之后有了AppRoutingModule,它破坏了所有内容。
标记

6

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

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

工作对我来说使用新的快速入门指南有角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工具创建的项目,该项目不会将软件包作为依赖项列出,并且对于使用Quickstart种子创建的项目(将软件包作为依赖项列出)可能无法解决问题。 。


我的问题是,ng serve在安装此程序时它仍在运行。必须关闭它并重新启动。
Jorn.Beyers

4

我正在使用角度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
AnderSon's

3

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

为我工作:D


关于导致此问题的计数有何建议?或者他们可以验证或更改以消除问题的配置方式?也许“ package.json”的内容可能会有所帮助。
Joshua Briefman'1

3

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

npm i angular-in-memory-web-api

只是该命令,没有任何其他要求。

希望可以节省别人的时间


2

如果您使用的是角度cli,则会出现此错误。

'angular2-in-memory-web-api'const barrelssystem-config.ts文件中添加以下内容:

 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

尝试添加打字稿定义:

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

...指定依赖项名称:

angular2-in-memory-web-api

然后添加切入点在“angular2,内存,网络API” /systemjs.config.js

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

我像您写的那样安装了打字。这就改变了类型文件夹的内容(在浏览器和主子文件夹中添加了“ \ definitions \ in-memory-backend.service \ index.d.ts”,并在browser.d.ts和main.d.ts文件中添加了引用。 )。“指定依赖项名称”是什么意思?我添加了您指定的入口点。但是我的错误仍然存​​在。
托尼

当您运行“ sudo Types install ...”时,键入内容应询问您“依赖项名称是什么?” 然后您可以输入“ angular2-in-memory-web-api”。
user1014932

我的答案适用于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

我解决了它复制index.js,并index.d.tscore.jscore.d.ts,也就是里面node_modules/angular2-in-memory-web-api的文件夹。去弄清楚。


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. 用“ angular-in-memory-web-api”替换“ angular2-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

我收到此错误是因为我InMemoryWebApiModule从导入中angular2-in-memory-web-api删除了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




0

我遇到了类似的问题。我刚刚下载了整个示例在教程的第7部分(最后一部分)末尾并运行了它。有效。

当然,您需要首先安装和编译所有内容。

> npm install
> npm start

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


0

如果使用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)' 
    

到提及的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”
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.