Question

angular的新功能我想为生产和开发设置不同的基本url。我想动态设置它，以减少在生产和开发之间切换时在index.html中进行硬编码的麻烦

<!-- Production url will be as below-->

<base url="/prod/" />

<!-- Development url will be as below-->

<base url="/dev/" />

Answer 1

您可以在构建（开发）时使用environments.ts , environment.prod.ts个文件 environment.ts和生产时间，您将使用environment.prod.ts

您可以设置自己的配置⚙

发展

export const environment = {
  production: false , 
  url : '127.0.0.1:4200/api'
};

生产

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

app.component

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

export class AppComponent {

  ngOnInit() {  
    console.log(environment.url);
  }
}

如果运行127.0.0.1:4200/api，控制台输出将为ng s，如果运行production.com/api，则控制台输出为ng s --prod

为生产ng build --prod进行构建时，环境{ts}将是environment.prod.ts的内容

Becoming an Angular Environmentalist

Answer 2

对于展开，您可以在environment.ts文件中进行设置。像这样

export const environment = {
  production: false,
  baseUrl: 'http://test.net/api'  
};

以及用于environment.prod.ts

中的生产

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

然后您应该在服务中使用url

@Injectable()
export class DataService {  

  baseUrl = environment.baseUrl;

  constructor(private httpClient: HttpClient) { }

  getData(id: number) {
    let url = this.baseUrl + '/data/1';
    return this.httpClient.get<JSON>(url);
  }
}

Answer 3

您的角度项目中至少需要两个打字稿文件。环境和环境产品。对于开发，您必须使用简单的服务，对于生产，则必须构建并指定您需要使用生产中的url。

为此，请使用：“ ng build --prod。”

有关该内容的文章，here。

Angular 6：如何设置生产和开发基础URL

3 个答案: