Rewriting services from Angular2 to Angular6 "Unexpected module 'HttpClientModule' declared by the module 'AppModule'

Question

I was trying to rewrite an service that worked just fine in Angular 2 and I have tried to rewrite with Angular 6.

Here's the service:

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

Here's my 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');
    });
});

When I try to load my app in a browser I get this error in the console log:

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)

What am I doing wrong?

Thanks!

UPDATE: Thanks for the help with there. Now I am getting this error message when I service runs:

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

What's up with that?

Answer 1

Remove HttpClientModule from declarations , it should be under imports

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

Answer 2

HttpClientModule should be added at imports array not declarations array.

imports array is for importing modules such as BrowserModule, AppRoutingModule, HttpClientModule

declarations array is for your AppComponent, HomeComponent, ContentHeaderComponent, FullDataComponent, HttpClient

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

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

Try to add header in server side

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