No se puede conectar angular del proyecto con la aplicación web de inicio de primavera

eshwar Chettri:

Estoy intentando conectar el 6 aplicación angular con la aplicación web de inicio del sprint 2. Pero soy incapaz de conectar. He añadido CrossOrigin en el controlador pero la conexión no va al controlador. También he intentado añadir url en el archivo proxy.confg.json pero no su trabajo.

Aquí está mi app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { ClienthomepageComponent } from './clienthomepage/clienthomepage.component';
import { AddclientComponent } from './addclient/addclient.component';
import { HeadermappingComponent } from './headermapping/headermapping.component';

//import { Http, Response } from "@angular/http";
//import { HttpClient, HttpHeaders } from '@angular/common/http';

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

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ClienthomepageComponent,
    AddclientComponent,
    HeadermappingComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
//    Http,
//    HttpClient,
    RouterModule.forRoot([
        {
            path: '',
            component: LoginComponent
        },
        {
            path: 'clientslist',
            component: ClienthomepageComponent
        },
        {
            path: 'addClient',
            component: AddclientComponent
        }
    ]),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

login.component.html

<div class="container pt-5 mt-5">
    <div class="col-lg-12">
        <div class="row d-flex justify-content-center">
            <form (submit)="checkUser($event)">
                <div class="col-md-10" id='login-wrap'>
                    <div class="retailmodal">
                        <div class="modal-content">
                            <div class="modal-body d-flex justify-content-center" id="firstFrom">
                                <div class="row d-flex justify-content-center">
                                    <div class="col-12"><input type="text" placeholder="UserName" id = "username"></div>
                                    <div class="col-12"><input type="password" placeholder="Password" id = "password"></div>
                                    <div class="col-12 "><input type="submit" value="Login"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="col-md-12" style="clear:both;height:40px;"></div>

            <div class="col-lg-2"></div>
        </div>
    </div>
</div>

login.component.ts

import { Component, OnInit } from '@angular/core';
import {LoginService} from '../login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private loginService: LoginService) { }

  ngOnInit() {

  }
  checkUser(event){
    event.preventDefault()
    const target = event.target;
    const userName = target.querySelector('#username').value;
    const password = target.querySelector('#password').value;

    console.log(userName, password);
    this.loginService.checkUsers();
//    this.loginService.findClientByNameAndPwd(userName,password);
}

}

login.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Http, Response } from "@angular/http";
@Injectable({
  providedIn: 'root'
})
export class LoginService {
 private baseUrl = 'http://localhost:8084/login';
    private apiUrl = '/api/employees';
  constructor(private http:HttpClient) { 
  }
  checkUsers(): Observable<any> {
      console.log(`${this.baseUrl}`);
    return this.http.get(this.baseUrl);
  }
  findClientByNameAndPwd(username: string,password:string): Observable<any> {
      console.log(`login/username/${username}/password/${password}`);
//    return this.http.get(`login/username/${username}/password/${password}`);
      return this.http.get(this.apiUrl)
  }

//   public checkUsers() {
//    return this.http(this.baseUrl);
//  }

}

LoginController.java

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */


import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 *
 * @author xyz
 */
@RestController
//@RequestMapping("/api")
public class LoginController {
    @GetMapping("/login")
    @CrossOrigin(origins = "http://localhost:4200")
    public String loginPage(){
    System.out.print("");

    return "";
    }
}

EmailreportsApplication.java

package com.xyx.emailreports;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
import org.springframework.context.annotation.ComponentScan;

@SpringBootApplication(scanBasePackages = {"com.netelixir"} )
@EnableAutoConfiguration
@ComponentScan
public class EmailreportsApplication extends SpringBootServletInitializer{

    public static void main(String[] args) {
        SpringApplication.run(EmailreportsApplication.class, args);
    }
         @Override
  protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
    return application.sources(EmailreportsApplication.class);
  }
}

Mateo Klimentowicz:

El http - servicio necesita un suscriptor

tu servicio:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoginService {
   private baseUrl = 'http://localhost:8084/login';
   private apiUrl = '/api/employees';

  constructor(private http:HttpClient) { }

  checkUsers()
  {
    return this.http.get(this.baseUrl);
  }
  ...
}

componente de entrada:

....

this.loginService.checkUsers().subscribe();

....