angular - 加载资源失败：服务器使用 angular9.1.6 响应状态为 404

Question

我正在使用 angular9.1.6 ，但是我检查了我在应用程序中声明的每一个，我不知道我在哪里犯了错误，并且当我编译我的应用程序时我开始低于错误类型。[> src/app/service/httpclient.service.ts:13:29 中的错误 - 错误 TS2304：找不到名称“用户”。

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"' 没有导出的成员 'HttpClientService'。您的意思是“HttpclientService”吗？

3 从 '../../service/httpclient.service' 导入 { HttpClientService }；~~~~~~~~~~~~~~~~~

src/app/service/httpclient.service.ts:7:14 7 export class HttpclientService { ~~~~~~~~~~~~~~~~~ 这里声明了'HttpclientService'。

当我在控制台的 chrome Web 浏览器上检查它时，我得到了这个：

错误类型未能加载资源：服务器响应状态为 404（未找到）**：1 拒绝加载图像“ http://localhost:4200/favicon.ico ”，因为它违反了以下内容安全策略指令：“default-src 'none'”。请注意，'img-src' 没有显式设置，因此 'default-src' 用作后备。

**:1 加载资源失败：服务器响应状态为 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');
}
}

用户组件.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;
      }

}

用户.ts

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

标签： angulartypescript

Answer 1

更新类/文件httpclient.service.ts以包含接口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');
  }
}

问题是getUsers()引用了接口User，但您没有User在该文件中导入接口。

更新：

假设您httpclient.service.ts使用 的预期导入进行了更新User，另一个问题在Usercomponent.ts. 导入的大小写HttpClientService不正确，“Client”中的“c”是错误的大小写。您使用小写“c”将其导出httpclient.service.ts，HttpclientService但使用大写“C”错误地导入它。更改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;
      }

}

希望这会有所帮助！