Angular 4：使用功能模塊中SharedModule中導入的模塊和組件

Question

問題是，我有SharedModule和ProtectedModule和我想使用module S和component號第SharedModule在module S和component號第ProtectedModule ;

shared.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule, Http } from '@angular/http';
import { TranslateModule } from '@ngx-translate/core';

import { ComponentsModule } from './components/components.module';
import { DirectivesModule } from './directives/directives.module';
import { PipesModule } from './pipes/pipes.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    Http,
    ComponentsModule,
    DirectivesModule,
    PipesModule
  ],
  exports: [
    CommonModule,
    FormsModule,
    HttpModule,
    Http,
    TranslateModule,
    ComponentsModule,
    DirectivesModule,
    PipesModule
  ],
  declarations: []
})
export class SharedModule { }

protected.module.ts：

import { NgModule } from '@angular/core';

import { SharedModule } from '../shared/shared.module';
import { ProtectedRoutingModule } from './protected-routing.module';
import { ProtectedComponent } from './protected.component';
import { LoginComponent } from './login/login.component';
import { LoginService } from './login/login.service';

@NgModule({
  imports: [
    SharedModule,
    ProtectedRoutingModule
  ],
  declarations: [
    ProtectedComponent,
    LoginComponent
  ],
  exports: [
    SharedModule
  ],
  providers: [
    LoginService
  ]
})
export class ProtectedModule { }

我有login.service.ts ，我想在其中使用導入到ProtectedModule SharedModule中導入的HttpModule和導入到ProtectedModule LoginService 。

login.service.t s：

import { Injectable } from '@angular/core';

@Injectable()
export class LoginService {

  private loginUrl = 'http://localhost/kpittu/index.php/user/authorization';

  constructor(private http: Http) { }

  login(): void {

  }

}

當我在login.service.ts使用HttpModule ，出現錯誤：

“找不到名稱Http”

編輯：

角版本：

@angular/cli: 1.2.0
node: 8.0.0
os: linux x64
@angular/animations: 4.3.6
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.2.0
@angular/compiler-cli: 4.3.6
@angular/language-service: 4.3.6

Answer 1

在login.service.ts缺少導入，請使用以下提到的一種：

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

@Injectable()
export class LoginService {

  private loginUrl = 'http://localhost/kpittu/index.php/user/authorization';

  constructor(private http: Http) { }

  login(): void {

  }

}

編輯

說明：您已導入“ HttpModule”，它允許您使用該模塊的功能。 但是您需要在相應的文件中導入“ Http”。

正確版本的sharedModule ，除非您在此處使用Http，否則無需在此處導入Http。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule} from '@angular/http';
import { TranslateModule } from '@ngx-translate/core';

import { ComponentsModule } from './components/components.module';
import { DirectivesModule } from './directives/directives.module';
import { PipesModule } from './pipes/pipes.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    ComponentsModule,
    DirectivesModule,
    PipesModule
  ],
  exports: [
    CommonModule,
    FormsModule,
    HttpModule,
    TranslateModule,
    ComponentsModule,
    DirectivesModule,
    PipesModule
  ],
  declarations: []
})
export class SharedModule { }