将服务从 Angular2 重写为 Angular6 “模块‘AppModule’声明的意外模块‘HttpClientModule’

Posted 2023-02-24

【中文标题】将服务从 Angular2 重写为 Angular6 “模块‘AppModule’声明的意外模块‘HttpClientModule’

【英文标题】：Rewriting services from Angular2 to Angular6 "Unexpected module 'HttpClientModule' declared by the module 'AppModule'

【发布时间】：2018-11-26 21:23:48

【问题描述】：

我试图重写一个在 Angular 2 中运行良好的服务，我尝试用 Angular 6 重写。

这里是服务：

import  Injectable  from '@angular/core';
import  HttpClient, HttpHeaders  from '@angular/common/http';
import  environment  from '../../environments/environment';
import Cluster from "./cluster";
import map from "rxjs/internal/operators";


@Injectable(
  providedIn: 'root'
)
export class FullDataService 
  private headers = new Headers('Content-Type': 'application/json');

  constructor(private http: HttpClient) 

  getClusters() 
    const url = environment.apiUrl + '/api/v1/clusters';
    return this.http.get(url).pipe(map(res => <Cluster[]>res));
  

这是我的 app.models.ts：

import  BrowserModule  from '@angular/platform-browser';
import  HttpClientModule, HttpClient  from '@angular/common/http';
import  NgModule  from '@angular/core';
import * as $ from 'jquery';

import  ContentHeaderComponent from './content-header/content-header.component';
import  ContentHeaderService from './content-header/content-header.service';

import  AppComponent  from './app.component';
import  HomeComponent  from './home/home.component';
import  AppRoutingModule  from './app-routing.module';
import  FullDataComponent  from './full-data/full-data.component';
import FullDataService from "./full-data/full-data.service";


@NgModule(
  declarations: [
    AppComponent,
    HttpClientModule,
    HomeComponent,
    ContentHeaderComponent,
    FullDataComponent,
    HttpClient,
   HttpClientModule
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    ContentHeaderService,
    FullDataService,
  ],
  bootstrap: [AppComponent]
)
export class AppModule  

$(document).ready(function() 
    $('#base-header .toggle-menu').click(function() 
        $('#base-sidebar').toggleClass('sidebar--hidden');
    );

    $('nav .sidebar__drawer > a').click(function() 
        $(this).parent().toggleClass('sidebar__drawer--opened');
    );
);

当我尝试在浏览器中加载我的应用程序时，我在控制台日志中收到此错误：

compiler.js:215 Uncaught Error: Unexpected module 'HttpClientModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
    at syntaxError (compiler.js:215)
    at compiler.js:10524
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10506)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:22567)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:22508)
    at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
    at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule (core.js:4199)
    at Object../src/main.ts (main.ts:11)

我做错了什么？

谢谢！

更新：感谢您的帮助。现在我在服务运行时收到此错误消息：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是怎么回事？

【参考方案1】：

从声明中删除 HttpClientModule ，它应该在导入下

 declarations: [
    AppComponent,
    HttpClientModule,
    HomeComponent,
    ContentHeaderComponent,
    FullDataComponent,
    HttpClient,
    HttpClientModule // remove this from here
  ],

【讨论】：

你能告诉我为什么我得到“请求的资源上没有'Access-Control-Allow-Origin'标头。”现在出错了？ :) 请。

你需要在服务器端添加CORS

我该怎么做？我试试***.com/questions/35760943/…

【参考方案2】：

HttpClientModule 应该添加在导入数组而不是声明数组中。

imports array用于导入BrowserModule、AppRoutingModule、HttpClientModule等模块

声明数组用于您的 AppComponent、HomeComponent、 ContentHeaderComponent、FullDataComponent、HttpClient

@NgModule(
  declarations: [
    AppComponent,
    HomeComponent,
    ContentHeaderComponent,
    FullDataComponent,
    HttpClient
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    ContentHeaderService,
    FullDataService,
  ],
  bootstrap: [AppComponent]
)

对于请求的资源上不存在“Access-Control-Allow-Origin”标头。

尝试在服务器端添加header

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Content-Type: application/json; Charset=UTF-8');