Question

我将Angular基本ui前端和SpringBoot后端部署在同一WebSphere服务器中部署的两次不同的战争中。从角度控制器调用任何服务时，我必须在TS文件中对主机（localhost）和端口（8181）进行硬编码。有什么办法可以外部化硬编码的依赖项。

Blockquote

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

@Injectable()
export class UserService {

  private usersUrl: string;

  constructor(private http: HttpClient) {
    this.usersUrl = 'http://localhost:8181/users';
  }

  public findAll(): Observable<User[]> {
    return this.http.get<User[]>(this.usersUrl);
  }

  public save(user: User) {
    return this.http.post<User>(this.usersUrl, user);
  }
}

Answer 1

您可以为配置创建一个环境文件

environments/environments.dev.ts
environments/environments.test.ts
environments/environments.prod.ts

示例：

export const environment = {  
  usersApiUrl: 'http://localhost:8181/users'
};

并将此配置导入组件ts

import { Component } from '@angular/core';  
import { environment } from './../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {  
  constructor() {
    console.log(environment.userApiUrl);
  }
  title = 'Hello Angular!';
}

Answer 2

Angular UI和Spring Boot Backend将在相同的端口上运行，但具有不同的上下文路径。在这种情况下，您可以通过/backend-Context/end-point来调用后端，而无需附加主机详细信息。

来自角度的服务呼叫，无需硬编码的主机和端口

2 个答案: