eshwar chettri：
私はスプリントブーツ2 Webアプリケーションと私の角度6アプリケーションを接続しようとしています。しかし、私は接続することができません。私は、コントローラにCrossOriginを追加しましたが、接続は、コントローラに行くのではありません。私はまた、proxy.confg.jsonファイルが、その動作していないにURLを追加してみました。
ここで私の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);
}
}
マシューKlimentowicz：
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();
....