ngbuild根据环境更改占位符

Question

我有一个Angular 5项目。为了部署该软件包，我使用了NG BUILD命令。但是，我有一些占位符，需要根据环境进行相应的更改。例如，我有一个配置文件占位符。要进行PROD，我需要将值更改为http://blablabla.com，对于TEST环境，请更改为http://localhost。我确定是否可以使用NG BUILD做到这一点。

Answer 1

在您的Angular 5项目中，您有一个目录“环境”（如波纹管），带有2个文件：

environment.ts ：此文件导出恒定的JSON对象环境。如果您在Angular项目中引用环境对象属性，则在开发模式（即serv或ng build）中，所有值均应从该文件中读取。

environment.prod.ts ：此文件导出相同的JSON对象，并且应具有与environment.ts文件相同的属性。在这种情况下，当您使用ng build --prod为生产模式构建应用程序时，environment.ts文件的所有值都将被environment.prod.ts文件覆盖。

将开发HTTP URL放入environment.ts文件中

export const environment = {
  production: false,
  baseUrl: 'https://fakerestapi.com/api'  
};

将生产HTTP URL放入environment.prod.ts文件中：

export const environment = {
  production: true,
  baseUrl: 'https://production.com/api'
};

在其他Angular应用程序中，请参考environment.baseUrl

import { environment } from '../environments/environment';


@Injectable()
export class ClientService {  

  baseUrl = environment.baseUrl;

  constructor(private httpClient: HttpClient) { }

  getClients(): Observable<Client[]> {
    return this.httpClient.get<Client[]>(`${this.baseUrl}/clients`);
  }
}

希望我能对您有所帮助。

Answer 2

将变量放入您的environment.ts文件中，因此，如果有：

开发 environment.dev.ts

等。对于其他环境，无论何时需要变量导入环境并通过environment.yourVariable使用。

然后根据您的构建命令，例如； ng build --prod将使用environment.prod.ts文件及其配置。

环境文件，例如：

export const environment = {
  production: false,
  animal: ''
};