Невозможно подключить проект angular к веб-приложению Spring Boot

Я пытаюсь подключить свое приложение angular 6 к веб-приложению sprint boot 2. Но я не могу подключиться. Я добавил CrossOrigin в контроллер, но соединение с контроллером не идет. Я также попытался добавить URL-адрес в файл proxy.confg.json, но он не работал.

вот мой 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.info(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.info(`${this.baseUrl}`);
    return this.http.get(this.baseUrl);
  }
  findClientByNameAndPwd(username: string,password:string): Observable<any> {
      console.info(`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);
  }
}

Находится ли ваше загрузочное приложение Spring на корневом уровне пакета?

priteshbaviskar 02.08.2018 11:25

Проект angular и проект пружинной загрузки разделены. Проект загрузки Spring, работающий на сервере tomcat localhost: 8084 и проект angular на localhost: 4200

eshwar chettri 02.08.2018 11:35

Верный. должен быть файл с аннотацией @SpringBootApplication. Этот файл находится в том же пакете, что и ваш контроллер?

priteshbaviskar 02.08.2018 11:36

нет оба в разных пакетах

eshwar chettri 02.08.2018 11:37

Хорошо, файл с аннотацией весенней загрузки должен находиться в пакете корневого уровня. Вы тоже можете опубликовать этот файл? Тогда было бы легче объяснить.

priteshbaviskar 02.08.2018 11:38

КСТАТИ. нет подписки .... this.loginService.checkUsers (); ---> this.loginService.checkUsers (). subscribe ();

Mateusz Klimentowicz 02.08.2018 11:40

Я обновил файл с аннотацией @SpringBootApplication. Я пробовал с this.loginService.checkUsers (). Subscribe (); также говорится, что subscribe () не является функцией

eshwar chettri 02.08.2018 11:42

возможно, вам стоит импортировать свой httpClient из этого пакета: '@ angular / common / http'; И удалите другой импорт "http"

Mateusz Klimentowicz 02.08.2018 11:45

ОШИБКА в src / app / login.service.ts (15,22): ошибка TS2339: свойство «подписаться» не существует для типа «HttpClient». Это ошибка

eshwar chettri 02.08.2018 11:47

Можете ли вы попасть в свой веб-сервис через почтальон / curl?

priteshbaviskar 02.08.2018 11:49

удалите тип возврата: checkUsers (): Observable <any> ---> checkUsers ()

Mateusz Klimentowicz 02.08.2018 11:52

да от почтальона его работа

eshwar chettri 02.08.2018 11:52

@Mateusz Klementowicz Я вас не понимаю.

eshwar chettri 02.08.2018 11:55

просто удалите этот фрагмент кода: ": Observable <any>" в вашей функции "checkUsers ()". Потому что этот возвращаемый тип неверен.

Mateusz Klimentowicz 02.08.2018 11:58

Я пробовал с помощью checkUsers () {вернуть this.http.get (this.baseUrl); } все еще не работает

eshwar chettri 02.08.2018 12:12

не работает означает, что запрос не отправляется или запрос завершается с ошибкой? (инструменты разработчика)

Mateusz Klimentowicz 02.08.2018 12:15

запрос не отправляется

eshwar chettri 02.08.2018 12:20

Позвольте нам продолжить обсуждение в чате.

Mateusz Klimentowicz 02.08.2018 12:21
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
Как вычислять биты и понимать побитовые операторы в Java - объяснение с примерами
Как вычислять биты и понимать побитовые операторы в Java - объяснение с примерами
В компьютерном программировании биты играют важнейшую роль в представлении и манипулировании данными на двоичном уровне. Побитовые операции...
Поднятие тревоги для долго выполняющихся методов в Spring Boot
Поднятие тревоги для долго выполняющихся методов в Spring Boot
Приходилось ли вам сталкиваться с требованиями, в которых вас могли попросить поднять тревогу или выдать ошибку, когда метод Java занимает больше...
Полный курс Java для разработчиков веб-сайтов и приложений
Полный курс Java для разработчиков веб-сайтов и приложений
Получите сертификат Java Web и Application Developer, используя наш курс.
3
18
555
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Http - сервису нужен подписчик

ваш сервис:

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);
  }
  ...
}

компонент входа в систему:

....

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

....

Да, вы должны использовать .subscribe (). Пожалуйста, обратитесь к angular.io httpClient документы для получения дополнительных сведений.

Roberto Manfreda 02.08.2018 13:05

Другие вопросы по теме