Angular 4 Change

Question

我已经关注了Tutorial。在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
]);

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 set

中

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

<{1>}对象中的

。

Answer 3

这对我有用：

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

＆＃34; angular 2 -in-memory-web-api＆＃34;：＆＃34; 0.0.20＆＃34;

注意＆＃34; 2 ＆＃34;在名称中。

然而，当引用InMemoryWebApiModule时，它正在使用＆＃39; angular-in-memory-web-api＆＃39;没有名字中的2。所以我添加了它并解决了这个问题：

从＆＃39; angular2-in-memory-web-api＆＃39;中导入{InMemoryWebApiModule};

注意：我在https://github.com/angular/in-memory-web-api

的通知部分找到了此信息

从v.0.1.0开始，重命名了npm包 angular2-in-memory-web-api到现在的名字，角在记忆的Web-API。 0.0.21之后的所有版本都在下面发货这个名字。请务必更新package.json和import语句。

Answer 4

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 从角度 2 下降到简单的angular
Angular CLI不再使用SystemJS（由Webpack取代），因此systemjs.config.js不再存在。
npm＆＃39; package.json不应直接编辑;使用CLI。

解决方案

截至2017年10月，最好的解决方法是使用npm自行安装，如上所述：

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

祝你好运！

Answer 5

它对我有用：

在package.json依赖项块集中（使用＆＃34; angular＆＃34;而不是＆＃34; angular2＆＃34;）

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

然后运行

 npm install

OR

只需运行（我的首选）

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

Answer 6

我目前正在做教程并遇到类似的问题。似乎已经为我修复的是在'angular2-in-memory-web-api'的{{1}}变量中为packages定义主文件：

systemjs.config.js

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

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 page说：

0.0.21之后的所有版本都会（或很快将）发货的角内存的Web-API

注意：此解决方案适用于使用CLI工具创建的项目，该工具不会将程序包列为依赖项，并且可能无法解决使用快速入门创建的项目的问题seed，它将包列为依赖项。

Answer 10

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

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

Answer 11

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

将angular2-in-memory-web-api升级为0.0.10
在systemjs.config.js中编辑packages变量属性：

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

Answer 12

对于使用angular cli 1.4.9（2017年10月实际）生成空项目然后开始按照说明逐步操作的用户，只需运行以下命令：

npm i angular-in-memory-web-api

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

希望节省某人的时间

Answer 13

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

为我工作：D

Answer 14

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

请在system-config.ts文件的'angular2-in-memory-web-api'中添加const barrels，如下所示：

 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重建。这解决了我的问题。

Answer 15

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

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

它将添加所需的参考

Answer 16

对我来说，只需从angular-tour-of-heroes目录进行安装即可。

C：\ nodejs \ angular-tour-of-heroes＆gt; npm install angular-in-memory-web-api --save

Answer 17

我遇到了类似的问题。我只是downloaded the entire example接近本教程第7部分（最后一部分）的结尾并运行它。它奏效了。

当然，您需要先安装并编译所有内容。

<?php
    if (isset($_POST['placeorder']))
    {
        $email=$_SESSION["email"];
        $con=mysqli_connect("localhost", "root", "");
        mysqli_select_db($con,"login"); 
        $qry="INSERT INTO orders ( customer_id , customer_name, customer_email) VALUES ((SELECT user_id from users where email='$email'), (SELECT name from users where email='$email'), '$email' )" ;
        $result=mysqli_query($con,$qry) or die(mysqli_error($con));
        if($result)
        {                              
            for ($i=0; $i<count($_POST['ID']); $i++){
                $product_code = $_POST['ID'][$i];
                $gender = $_POST['gender'][$i];
                $price = $_POST['grandtotal'][$i];        
                $quantity = $_POST['qty'][$i];                                
                $description = $_POST['description'][$i];        
                $qry="INSERT INTO ordered_product ( order_id , product_code, product_description, Product_gender, Product_quantity, Product_price) VALUES ((SELECT LAST_INSERT_ID()), '$product_code', '$description', '$gender', '$quantity', '$price' ) ";
                $result=mysqli_query($con,$qry) ;
                if($result)        
                {
                    echo '<script>alert("Your order has been placed")</script>';
                    echo '<script>window.location="portfolionew.php"</script>';
               } else {
        die("Error While Adding Stock ! Please Try Again .");
      }                    
    }}}        
    ?>

我也改变了“app-root＆＃39;到我的应用程序＆＃39;在app.component.ts。

Answer 18

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

Answer 19

import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService }               from './in-memory-data.service';

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

Answer 20

截至最新（目前为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'      
}

Answer 21

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

替换＆＃34; angular2-in-memory-web-api＆＃34;的所有实例与＆＃34; angular-in-memory-web-api＆＃34;。
将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的路径。它应该看起来像：
'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

Answer 22

如果使用angular cli构建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-cli-build.js文件中的vendorNpmFiles数组，如ofShard提到的那样;

当然，按照traneHead的描述添加到package.json;对于 2.0.0-rc.3我使用下面的版本：
```
"angular2-in-memory-web-api": "0.0.13"
```

我发现这个link“将材料2添加到您的项目中”解释了非常清楚地添加第三方库的过程。

Answer 23

在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中的

它为我工作。

Answer 24

主要答案帮助了我：变化

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

到

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

Answer 25

我解决了将index.js和index.d.ts复制到core.js和core.d.ts，即node_modules/angular2-in-memory-web-api文件夹内的问题。去弄清楚。

Answer 26

如上所述，改变这一行在Angular 2 Heroes Tutorial：

中对我有用

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

Answer 27

我有同样的问题，我在systemjs.config中更改了：

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

通过这一行：

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

Answer 28

尝试添加打字稿定义：

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

Answer 29

托尼，您需要为Angular2-in-memory-web-api添加类型。

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

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

Angular2教程（英雄之旅）：找不到模块'angular2-in-memory-web-api'

29 个答案:

Angular 4 Change

困惑点

解决方案