102

我已经按照教程。在 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
]);
4

29 回答 29

102

至于使用当前 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"   }
于 2017-03-23T08:37:38.533 回答
69

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

于 2016-05-23T11:54:20.917 回答
21

这对我有用:

我注意到 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 语句。

于 2016-09-27T00:50:32.877 回答
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不再存在。
  • npm'spackage.json不应该直接编辑;使用 CLI。

解决方案

截至 2017 年 10 月,最好的解决方法是简单地使用 自己安装它npm,正如我上面提到的:

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

祝你好运!

于 2017-10-17T11:48:09.997 回答
15

这个对我有用:

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

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

然后运行

 npm install

或者

只需运行(我更喜欢)

npm install angular-in-memory-web-api --save
于 2017-05-05T09:08:09.233 回答
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了这个模块中的其他文件。

于 2016-05-22T19:06:27.440 回答
10

这解决了404问题

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

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

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

@NgModule({
imports:      [ BrowserModule,
              AppRoutingModule,
              FormsModule,
              HttpModule,
              InMemoryWebApiModule.forRoot(InMemoryDataService),
              ...
于 2017-01-29T11:33:27.500 回答
6

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

npm install angular-in-memory-web-api –-save
于 2017-07-25T13:16:22.870 回答
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 种子创建的项目的问题,该种子将包列为依赖项.

于 2017-03-22T14:55:58.010 回答
4

我正在使用 angular 4 及以下解决了我的问题。

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

于 2017-07-11T11:01:15.753 回答
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' }

于 2016-05-24T00:35:51.667 回答
3

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

为我工作:D

于 2017-01-07T02:50:42.313 回答
3

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

npm i angular-in-memory-web-api

只是那个命令,没有任何额外的东西。

希望可以节省某人的时间

于 2017-10-25T16:04:00.110 回答
2

如果您使用 angular 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。这为我解决了这个问题。

于 2016-07-29T06:32:51.383 回答
0

尝试添加打字稿定义:

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' }
};
于 2016-05-22T20:05:56.340 回答
0

我有同样的问题,我改变了 systemjs.config :

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

通过这一行:

'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
于 2016-05-23T10:58:43.927 回答
0

如上所述,更改此行在 Angular 2 Heroes 教程中对我有用:

'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
于 2016-05-23T18:37:49.630 回答
0

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

于 2016-05-25T03:34:51.080 回答
0

主要答案帮助了我:改变

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

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
于 2016-06-02T12:47:28.153 回答
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

这对我有用。

于 2016-06-10T20:33:19.303 回答
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)' 
    

到 angular-cli-build.js 文件中的 vendorNpmFiles 数组,如 ofShard 提到的;

  1. 当然,按照traneHead的描述添加到package.json中;对于 2.0.0-rc.3,我使用以下版本:

    "angular2-in-memory-web-api": "0.0.13"
    

我发现这个链接“Adding material2 to your project”非常清楚地解释了添加第三方库的过程。

于 2016-07-23T22:15:00.287 回答
0

截至此日期的最新修复是

  1. 将“angular2-in-memory-web-api”的所有实例替换为“angular-in-memory-web-api”。
  2. 将package.json 依赖版本从"angular-in-memory-web-api": "0.0.20"to"angular-in-memory-web-api": "0.1.0""zone.js": "^0.6.23"to"zone.js": "^0.6.25"
  3. 在 systemjs.config.js 中,更改 index.js 的路径。它应该看起来像:
    'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
于 2016-10-23T06:10:14.137 回答
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'      
}
于 2016-11-01T01:34:05.510 回答
0

我收到此错误是因为我InMemoryWebApiModuleangular2-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.

于 2017-03-29T11:27:05.720 回答
0

对我来说,从 angular-tour-of-heroes 目录进行安装对我有用

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

于 2017-07-04T08:51:37.457 回答
0

最好的方法是使用 NPM 安装它,例如

npm install git+ https://github.com/itryan/in-memory-web-api/ --save

它将添加所需的参考

于 2017-07-28T02:47:42.887 回答
0

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

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

> npm install
> npm start

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

于 2017-08-10T10:07:46.340 回答
0
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService }               from './in-memory-data.service';

该类InMemoryDataService不属于任何 API。我们需要创建一个服务类,然后将该服务类导入 app.module.ts 文件。

于 2018-04-11T12:00:25.160 回答
-1

Toni,您需要为 Angular2-in-memory-web-api 添加类型。

将它们添加到您的 TS 文件中。

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”
于 2016-05-22T18:31:40.560 回答