angular6根据environments配置文件更改开发所需要的环境的方法

 更新时间:2019年03月06日 15:06:09   作者:码农流浪记  
这篇文章主要介绍了angular6根据environments配置文件更改开发所需要的环境的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前端开发过程中,我们常常需要根据需求去运行或者打包不同环境的代码,幸运的是,angular给我们提供了environments配置,但是angular6.x的配置方式和angular的其他版本的配置方式是有所不同的,下面我就分别介绍在测试test、预生产pre环境下实现environments配置。

一、angular6.x下environments的配置

首先,在environments文件夹下创建environment.test.ts和environment.pre.ts文件,如下图

然后分别在里面添加如下内容

然后找到angular.json文件,在architect对象下的configurations下添加如下代码:

然后在找到serve,添加如下的代码

可以通过运行ng serve --configuration=test或者ng serve -c test课件在控制台打印:

 {production: false, path: "https://test.webapi.sxmaps.com/"}
    path: "https://test.webapi.sxmaps.com/"
    production: false
  __proto__: Object

同理运行ng serve --configuration=pre或者ng serve -c pre可获取到预生产环境的域名,所以,你只需要在需要用到环境变量的地方引入即可,如

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

二、angular其他版本environments的配置

同样的,首先在environments创建environment.test.ts和environment.pre.ts,然后按照上文的步骤,在里面添加相同的内容,然后去到angular-cli.json文件找到environments,在里面添加如何内容:


然后通过运行ng s --env=test就可以运行测试环境了,在需要的地方引入environment即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • AngularJS 中使用Swiper制作滚动图不能滑动的解决方法

    AngularJS 中使用Swiper制作滚动图不能滑动的解决方法

    Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎。这篇文章主要介绍了AngularJS 中使用Swiper制作滚动图不能滑动的解决方法,需要的朋友可以参考下
    2016-11-11
  • 详解angular2.x创建项目入门指令

    详解angular2.x创建项目入门指令

    这篇文章主要介绍了详解angular2.x创建项目入门指令,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • Angularjs中ng-repeat的简单实例

    Angularjs中ng-repeat的简单实例

    这篇文章主要介绍了Angularjs中ng-repeat的简单实例的相关资料,这里提供两个实例方法帮助大家彻底掌握这部分内容,需要的朋友可以参考下
    2017-08-08
  • Angular实现图片裁剪工具ngImgCrop实践

    Angular实现图片裁剪工具ngImgCrop实践

    本篇文章主要介绍了Angular实现图片裁剪工具ngImgCrop实践,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • Angular中的ActivatedRoute和Router原理解释

    Angular中的ActivatedRoute和Router原理解释

    这篇文章主要为大家介绍了Angular中的ActivatedRoute和Router原理解释,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Angularjs制作简单的路由功能demo

    Angularjs制作简单的路由功能demo

    这篇文章主要介绍了Angularjs制作简单的路由功能demo,刚刚开始学习Angularjs,做的不好,还请见谅。
    2015-04-04
  • 实例解析angularjs的filter过滤器

    实例解析angularjs的filter过滤器

    本文对angularjs的filter过滤器进行系统介绍,附上实例解析,便于理解。具有很好的参考价值,需要的朋友可以看下
    2016-12-12
  • Angular 根据 service 的状态更新 directive

    Angular 根据 service 的状态更新 directive

    Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。本文给大家介绍Angular 根据 service 的状态更新 directive,需要的朋友一起学习吧
    2016-04-04
  • AngularJS中的路由使用及实现代码

    AngularJS中的路由使用及实现代码

    本篇文章主要介绍了AngularJS中的路由使用及实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • AngularJs实现ng1.3+表单验证

    AngularJs实现ng1.3+表单验证

    这篇文章主要介绍了AngularJs实现ng1.3+表单验证,感兴趣的小伙伴们可以参考一下
    2015-12-12

最新评论