typescript 在 ionic 2 中导入 angular2/http 出现错误“找不到模块”

importing angular2/http in ionic 2 has error "cannot find module"

提问by Morteza

I'm started learning ionic 2 and I have a problem with importing dependency in my app.ts file.

我开始学习 ionic 2 并且在我的 app.ts 文件中导入依赖项时遇到问题。

when i want use:

当我想使用时：

"import {Http} from "angular2/http";

its show me, error with this subject:

它告诉我，这个主题的错误：

[ts] cannot find module 'angular2/http'.

this is my package.json's content:

这是我的 package.json 的内容：

"dependencies": {
"@angular/common": "^2.0.0-rc.1",
"@angular/compiler": "^2.0.0-rc.1",
"@angular/core": "^2.0.0-rc.1",
"@angular/http": "^2.0.0-rc.1",
"@angular/platform-browser": "^2.0.0-rc.1",
"@angular/platform-browser-dynamic": "^2.0.0-rc.1",
"@angular/router": "^2.0.0-rc.1",
"es6-shim": "^0.35.0",
"ionic-angular": "2.0.0-beta.7",
"ionic-native": "^1.1.0",
"ionicons": "3.0.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12"
}

回答by Morteza

ok, i found a solution,

好的，我找到了解决方案，

in Ionic 2, Beta 7, we should use:

在 Ionic 2, Beta 7 中，我们应该使用：

import {Http} from '@angular/http';

从 '@angular/http' 导入 {Http}；

回答by sebaferreras

Just in case if this could be useful to someone, there are some other changes you would need to do in order to upgrade to Ionic 2 beta 7(or beta 8 now).

以防万一这对某人有用，您还需要做一些其他更改才能升级到Ionic 2 beta 7（或现在的 beta 8）。

You can take a look at the recommended steps (and breaking changeslike that one) here.

您可以在此处查看推荐的步骤（以及类似的重大更改）。

=========

==========

EDIT:

编辑：

As Bond - Java Bondsuggests, these are the breaking changes in case of the link goes dead:

正如Bond - Java Bond 所建议的那样，这些是链接失效时的重大更改：

2.0.0-beta.7 (2016-05-19) BREAKING CHANGES

2.0.0-beta.7 (2016-05-19) 重大变化

Angular Update to 2.0.0-rc.1

角度更新到 2.0.0-rc.1

Angular has been updated to 2.0.0-rc.1, follow these steps to update Angular.

Angular 已更新至 2.0.0-rc.1，请按照以下步骤更新 Angular。

1. Edit your package.jsonand remove the angular2entry:

   "angular2": "2.0.0-beta.15"
   

2. Then, run the following command from a terminal to update Ionic and Angular, or take a look at the starter's package.json changes and update each version:

   npm install --save [email protected] @angular/core @angular/compiler @angular/common @angular/platform-browser @angular/platform-browser-dynamic @angular/router @angular/http [email protected] [email protected] reflect-metadata
   

3. Run the following command from a terminal to update the gulp task for ionic-gulp-scripts-copy:

   npm install --save-dev [email protected]
   

4. Then, change any imports in your application from angular2to @angular. For example, the following.

   import {ViewChild} from 'angular2/core';
   import {Http} from 'angular2/http';
   

   becomes

   import {ViewChild} from '@angular/core';
   import {Http} from '@angular/http';
   

5. Remove the import for angular2-polyfillsin index.html:

   <script src="build/js/angular2-polyfills.js"></script>
   

   and replace it with the following scripts:

   <script src="build/js/zone.js"></script>
   <script src="build/js/Reflect.js"></script>
   

6. Replace all template variables in ngForwith let. For example:

   *ngFor="#session of group.sessions"
   

   becomes

   *ngFor="let session of group.sessions"
   

7. Replace all template variables in virtualScroll. For example:

   *virtualItem="#item"
   

   becomes

   *virtualItem="let item"
   

8. View the Angular Changelogfor more in depth changes.

1. 编辑package.json并删除angular2条目：

   "angular2": "2.0.0-beta.15"
   

2. 然后，从终端运行以下命令来更新 Ionic 和 Angular，或者查看 starter 的 package.json 更改并更新每个版本：

   npm install --save [email protected] @angular/core @angular/compiler @angular/common @angular/platform-browser @angular/platform-browser-dynamic @angular/router @angular/http [email protected] [email protected] reflect-metadata
   

3. 从终端运行以下命令以更新 gulp 任务ionic-gulp-scripts-copy：

   npm install --save-dev [email protected]
   

4. 然后，将应用程序中的所有导入从 更改angular2为@angular。例如，以下。

   import {ViewChild} from 'angular2/core';
   import {Http} from 'angular2/http';
   

   变成

   import {ViewChild} from '@angular/core';
   import {Http} from '@angular/http';
   

5. 删除angular2-polyfillsin的导入index.html：

   <script src="build/js/angular2-polyfills.js"></script>
   

   并将其替换为以下脚本：

   <script src="build/js/zone.js"></script>
   <script src="build/js/Reflect.js"></script>
   

6. 在更换所有的模板变量ngFor用let。例如：

   *ngFor="#session of group.sessions"
   

   变成

   *ngFor="let session of group.sessions"
   

7. 替换virtualScroll. 例如：

   *virtualItem="#item"
   

   变成

   *virtualItem="let item"
   

8. 查看Angular Changelog以获取更深入的更改。