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?

score 7 · Accepted Answer · edited Jun 18 '18 at 05:17

7

Remove HttpClientModule from declarations , it should be under imports

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

edited Jun 18 '18 at 05:17

Keshav

821
2
12
33

answered Jun 18 '18 at 04:07

Sajeetharan

216,225
63
350
396

Can you tell me why I am getting "No 'Access-Control-Allow-Origin' header is present on the requested resource." errors now? :) Please. – Red Cricket Jun 18 '18 at 04:14
you need to add CORS on server side – Sajeetharan Jun 18 '18 at 04:18
How do I do that? I'll try https://stackoverflow.com/questions/35760943/how-can-i-enable-cors-on-django-rest-framework/35761458 – Red Cricket Jun 18 '18 at 04:18

Jagjeet Singh · Answer 2 · 2018-06-18T04:23:40.917

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

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

2 Answers2