Блог

консоль в браузере

У меня эта проблема уже несколько дней, я не могу найти решение. Смотрите изображение для журнала консоли.

Это мой код из класса APICalls:

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

export class APICalls{

  constructor(private http: HttpClient){}

  public authenticate(username:string, password:string):void{

    const req = this.http.post('http://localhost:9050/user/authenticate', {
        username: username,
        password: password
      })
        .subscribe(
          res => {
            console.log(res);
          },
          err => {
            console.log("Error occured");
          }
        );
}
  

}

Код из модуля приложения:

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { HomeComponent } from './home/home.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    NgbModule.forRoot(),
    HttpClientModule
  ],
  providers: [],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }
  

И код из компонента login ts:

 import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { APICalls } from '../classes/APICalls';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [APICalls]
})
export class LoginComponent {
  public username: string;
  public password: string;

  constructor(private router:Router, private api:APICalls){ }

  public login(){
     alert("TEST:"   " username: "   this.username   " password: "   
this.password);
    this.api.authenticate(this.username, this.password);
  }

  public navToRegister(){
    this.router.navigateByUrl('/register');
  }
}
  

Что-то не так с параметром httpclient в конструкторе, но я не знаю, как это исправить, я пытался удалить конструктор, но это выдает другую ошибку.

Вам нужно добавить @Injectable декоратор в APICalls сервис, когда у сервиса нет зависимостей, вы можете удалить @Injectable декоратор, но в вашем случае вам нужно внедрить HttpClient

 @Injectable()
export class APICalls{
...
}
  

Проверьте это Почему мы должны использовать @Injectable() в Angular? 🌟

Вам нужно сделать две вещи. APICalls — это сервис, и вам нужно объявить его как сервис. Для того, чтобы сделать это,

1. Поместите декоратор @Injectable() в APICalls

   @Injectable()
export class APICalls{
// ...
}

2. Поместите службу APICalls в providers:[] в app.module.ts

   providers:[APICalls]

Добавьте @Injectable decorator в свой сервис APICalls.

 @Injectable()
export class APICalls{
...
}
  

Также добавьте / импортируйте службу APICalls в массив provider AppModule.

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { HomeComponent } from './home/home.component';
import { HttpClientModule } from '@angular/common/http';
import { APICalls } from '../classes/APICalls';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    NgbModule.forRoot(),
    HttpClientModule
  ],
  providers: [APICalls],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }