Failed to load resource: the server responded with a status of 404 with angular9.1.6

Question

I am using angular9.1.6,but i check every i declared in my application, I donot know where i make mistake and i am gettin below type of error when i compile my application. [> ERROR in src/app/service/httpclient.service.ts:13:29 - error TS2304: Cannot find name 'User'.

13 return this.httpClient.get(' http://localhost:8080/users ');] 1 src/app/admin/users/users.component.ts:3:10 - error TS2724: Module '"../../service/httpclient.service"' has no exported member 'HttpClientService'. Did you mean 'HttpclientService'?

3 import { HttpClientService } from '../../service/httpclient.service'; ~~~~~~~~~~~~~~~~~

src/app/service/httpclient.service.ts:7:14 7 export class HttpclientService { ~~~~~~~~~~~~~~~~~ 'HttpclientService' is declared here.

When I inspect it on chrome web browser in console I am getting this:

type of error Failed to load resource: the server responded with a status of 404 (Not Found) **:1 Refused to load the image ' http://localhost:4200/favicon.ico ' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

**:1 Failed to load resource: the server responded with a status of 404 (Not Found) app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { FooterComponent } from './footer/footer.component';
import { UsersComponent } from './admin/users/users.component';
import { LoginComponent } from './login/login.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    FooterComponent,
    UsersComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

httpclient.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class HttpclientService {

  constructor(private httpClient:HttpClient) { }

  getUsers()
{
 return this.httpClient.get<User[]>('http://localhost:8080/users');
}
}

Usercomponent.ts

import { Component, OnInit } from '@angular/core';
import { User } from '../../model/User';
import { HttpClientService } from '../../service/httpclient.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
     users: Array<User>

  constructor(private httpClientService: HttpClientService) { }

  ngOnInit() {
      this.httpClientService.getUsers().subscribe(
              response => this.handleSuccessfulResponse(response),
            );
  }
  handleSuccessfulResponse(response) {
        this.users = response;
      }

}

User.ts

export class User {
    id: number;
    name: string;
    type: string;  
    password: string;
  }

Answer 1

Update class/file httpclient.service.ts to include an import for interface User ( User.ts ):

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from 'relative/path/to/user.ts';

@Injectable({
  providedIn: 'root'
})
export class HttpclientService {

  constructor(private httpClient:HttpClient) { }

  getUsers() {
    return this.httpClient.get<User[]>('http://localhost:8080/users');
  }
}

The issue is that getUsers() references interface User but you did not import interface User in that file.

Update:

Assuming you updated httpclient.service.ts with the expected import of User , the other issue is in Usercomponent.ts . The casing of the import of HttpClientService is incorrect, with the "c" in "Client" being the wrong casing. You are exporting it from httpclient.service.ts as HttpclientService with a lowercase "c", but you import it incorrectly with a capital "C". Change Usercomponent.ts with the following:

import { Component, OnInit } from '@angular/core';
import { User } from '../../model/User';
import { HttpclientService } from '../../service/httpclient.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
     users: Array<User>

  constructor(private httpClientService: HttpclientService) { }

  ngOnInit() {
      this.httpClientService.getUsers().subscribe(
              response => this.handleSuccessfulResponse(response),
            );
  }
  handleSuccessfulResponse(response) {
        this.users = response;
      }

}

Hopefully that helps!