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即可。

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

赞 (0)

相关推荐

  • Angular2 环境配置详细介绍

    看到angular发布正式版,心动不已准备测试下. 看着官网教程,使用了cli创建项目,在命令行中键入: 安装cli npm install -g angular-cli 如果安装过以前的版本,请执行以下命令,进行更新: npm uninstall -g angular-cli npm cache clean npm install -g angular-cli@latest 旧版本的cli使用的是SystemJS而最新的创建,是基于webpack构建. 旧版本的angular2(rc1-rc6

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

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

  • PHP7扩展开发教程之Hello World实现方法示例

    本文实例讲述了PHP7扩展开发教程之Hello World实现方法.分享给大家供大家参考,具体如下: 一.下载PHP源代码 要开发PHP扩展,需要先下载PHP的源代码,一方面是因为我们的扩展一般会用到PHP自身定义的函数和宏,另一方面我们可以利用官方提供的工具减少工作量. 我下载了PHP-7.0.2,地址是:http://cn2.php.net/get/php-7.0.2.tar.gz. 解压源码压缩包, tar xzf php-7.0.2.tar.gz,我们现在只需要关注Zend和ext这两个

  • Java开发环境配置方法

    Java开发环境配置方法

    下面通过图文并茂的方式给大家讲解下Java开发环境配置,具体内容如下: 对于JAVA新手来说,刚开始要学JAVA,而自己的电脑上毫无与JAVA开发有关的环境,应该如何进行配置呢? (安卓新手也需要JAVA开发环境) 第一步,下载.安装java JRE JRE (Java Runtime Environment),即Java运行环境,是运行JAVA程序所必须的环境的集合,包含各种类库. 1.Jre官方下载; http://www.oracle.com/technetwork/java/javase

  • 使用maven profile指定配置文件打包适用多环境的方法

    开发过程, 我们习惯把数据源配置, 项目常量, 日志配置等基础数据配置写到一个个单独的的文件中. 如jdbc.properties等各种.格式的文件. 如何不频繁修改配置文件, 随时打包不同基础数据配置信息的项目. 1.新建maven项目,   在pom.xml中添加 profile节点信息如下: <profiles> <profile> <!-- 开发环境 --> <id>dev</id> <properties> <envi

  • vs2019永久配置opencv开发环境的方法步骤

    有很多同学肯定想学习opencv相关的知识,但是有些情况下每建一次项目都要重新引入下各种文件是不是很苦恼,所以我也面临了这个问题,在网上看到很多的同学的方法,有的也都是很一样的,将什么.dll加入环境变量,然后设置项目配置文件什么的,这些东西我也尝试过,但是很容易忘记,我也特意写了一些笔记,但是有时还是会忘记.恰巧我也升级了vs2019,所以也打算更新下方法,做到一劳永逸.下面是教程部分.首先我们要安装好我们的opencv,然后我们安装以后会看到生成的文件夹.如图 这一切就是基础文件,所以这个务

  • Linux搭建C++开发调试环境的方法步骤

    安装g++ Linux编译C++程序必须安装g++编译器.这里使用yum方式安装.首先切换到root账号,su - root 然后输入密码. 执行yum install gcc-c++(注意不是yum install g++),报错. 报错是因为yum需要配置正确的服务器地址,服务器是提供yum安装包的,也被称作yum源.配置yum源的配置文件在/etc/yum.repos.d/目录下,可以看到系统自带了两个文件. cat 文件名称,会打印文件全部内容.可以看到两个文件要么没配置,要么地址是无法

  • VSCode搭建STM32开发环境的方法步骤

    VSCode搭建STM32开发环境的方法步骤

    目录 1.安装VScode 2.安装C/C++插件 3.安装Keil Assistant插件 4.用vscode打开keil工程 5.编译.下载程序 6.常用操作 官方简述 摘要: 作为一个51单片机或STM32单片机的使用者,keil一直是我们的必备的一款工具之一.但keil的一些问题也一直存在,当然也有人用其他的比如STM32CubeIDE.但是今天推荐的是VScode+Keil Assistant插件,不需要很复杂的配置各种文件和环境变量,只需要一个插件即可!可以编译代码和下载程序. 当我

  • Android开发之背景动画简单实现方法

    本文实例讲述了Android开发之背景动画简单实现方法.分享给大家供大家参考,具体如下: 1.先创建动画层,有三张图片 <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@draw

  • CentOS 7下配置Ruby语言开发环境的方法教程

    CentOS 7下配置Ruby语言开发环境的方法教程

    本文跟大家分享的是在CentOS 7下配置Ruby语言开发环境的方法教程,分享出来供大家参考学习,下面来看看详细的介绍: 安装Ruby 2.2 CentOS7存储库中的Ruby版本为2.0,但如果需要,可以使用RPM软件包安装2.2 1.添加CentOS SCLo软件集合存储库 [root@linuxprobe ~]# yum -y install centos-release-scl-rh centos-release-scl # set [priority=10] [root@linuxpr

  • Android开发控制ScrollView滑动速度的方法

    本文实例讲述了Android开发控制ScrollView滑动速度的方法.分享给大家供大家参考,具体如下: 前言 由于各个Android平板触摸屏的材质不一样,滑动效果会有一些区别,有的比较灵敏,有的比较迟钝,这里就遇到了要求控制滑动速度的需求... 正文 翻阅查找ScrollView的文档并搜索了一下没有发现直接设置的属性和方法,这里通过继承来达到这一目的. /** * 快/慢滑动ScrollView * @author 农民伯伯 * */ public class SlowScrollView

随机推荐