如何将 Angular HttpModule 导入到根 NgModule

Posted 2023-03-29

【中文标题】如何将 Angular HttpModule 导入到根 NgModule

【英文标题】：How to import angular HttpModule to the root NgModule

【发布时间】：2017-03-10 09:03:40

【问题描述】：

我从 ionic v2、angular2 和 typeScript 开始。所以我正在尝试设置一个离子登录页面，该页面检索登录凭据并联系远程 api 进行身份验证。我显然需要有角度的 Http 客户端。

src/app/app.component.ts 看起来像：

import  Component  from '@angular/core';
import  Platform  from 'ionic-angular';
import  StatusBar, Splashscreen  from 'ionic-native';


import  LoginPage  from '../pages/login/login';


@Component(
  templateUrl: 'app.html'
)
export class MyApp 
  rootPage = LoginPage;

  constructor(platform: Platform) 
    platform.ready().then(() => 

      StatusBar.styleDefault();
      Splashscreen.hide();
    );
  
  

src/app/app.module.ts 看起来像：

import  NgModule, ErrorHandler  from '@angular/core';
import  IonicApp, IonicModule, IonicErrorHandler  from 'ionic-angular';
import  MyApp  from './app.component';
import  LoginPage  from '../pages/login/login';
import  AuthService  from '../providers/auth-service';
import  HttpModule, JsonpModule  from '@angular/http';

@NgModule(
  declarations: [
    MyApp,
    LoginPage,
    HttpModule,
    JsonpModule,

  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    LoginPage
  ],
  providers: [provide: ErrorHandler, useClass: IonicErrorHandler,AuthService]
)
export class AppModule 

当然，任何其他必要的文件（page/login/login.* 和 provider/auth-service.ts）都已定义，因此不会出现丢失文件或服务错误。

问题：

当我通过ionic serve 构建应用程序时，该过程完成且没有错误，但是在浏览器中启动应用程序时，我收到此错误：

模块“AppModule”声明的意外模块“HttpModule” 不过，我只是按照this tutorial from the official documentation 的指示进行操作。 几个小时以来，我一直在谷歌搜索，但没有找到解决方法。 谁能告诉我我做错了什么？

【问题讨论】：

移动 HttpModule 到 imports 数组。还有JsonpModule阅读更多angular.io/docs/ts/latest/cookbook/…

@yurzui，谢谢，抱歉这个愚蠢的问题！

【参考方案1】：

你应该导入 HttpModule 如下，

imports: [   
    HttpModule,
    JsonpModule
    ...
    ...

注意：与 JsonpModule 相同。并且不要忘记将它们从 declarations 数组中删除。

【讨论】：

谢谢，对于这么愚蠢的问题，我很抱歉，但我必须将答案标记为真实，这是你的。

发生了！没关系！！

我的一条评论。导入 HttpModule VsCode 时使用错误的包（如 import HttpModule from '@angular/http/src/http_module';）导入它。也应该修复软件包import HttpModule from '@angular/http'; 以便它可以工作。

【参考方案2】：

就 Ionic 2 而言，您根本不需要单独导入 HttpModule。 IonicModule 在链接中为您这样做：

exports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,

您可以直接使用组件。表单类似。

【参考方案3】：

declarations 属性用于声明您在此模块中拥有的每个组件和管道，允许您在模块中使用它们。

要在当前模块中使用另一个模块，您必须使用imports 属性，如下所示：

@NgModule(
  declarations: [
    MyApp,
    LoginPage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    HttpModule,
    JsonpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    LoginPage
  ],
  providers: [provide: ErrorHandler, useClass: IonicErrorHandler,AuthService]
)

【讨论】：

从技术上讲，您的答案不正确，因为您也忘记移动“JsonpModule”...因此我有义务将@micronyks 标记为正确。

哎呀，确实，他编辑了他的答案，而我没有，因为我没有看到这个：/ 编辑：编辑它但是无论如何，如果你得到你想要的一切都很好：D

我看到了你的回答，我不知道，今天学到了一些东西，谢谢;)