Angular学习笔记:environment.ts文件

这篇具有很好参考价值的文章主要介绍了Angular学习笔记:environment.ts文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文是自己的学习笔记,主要参考资料如下。

- B站《Angular全套实战教程》,达内官方账号制作,https://www.bilibili.com/video/BV1i741157Fj?https://www.bilibili.com/video/BV1R54y1J75g/?p=32&vd_source=ab2511a81f5c634b6416d4cc1067809f。




1、environment文件

1.1、简介

项目创建时会自动创建environmet文件夹,其中包含environment.tsenvironment.prod.ts两个文件。
Angular学习笔记:environment.ts文件
系统在不同的环境会有不同的参数,比如开发环境的服务器地址和生产环境的服务器地址肯定不是同一个。

angular给我们提供了方便,属于生产环境的参数就定义在environment.prod.ts中,属于普通环境的就定义在environment.ts中。

当然我们可以根据自己的需要添加多个文件,毕竟环境可能不止一个。



1.2、配置

我们需要配置特定环境使用指定的文件读取参数,这里的配置是在angular.json文件中。

下面的配置项目的默认配置,表示当项目以profile=production启动时,环境配置文件会用environment.prod.ts替代environment.ts

项目以profile=development启动时则不替代环境配置文件,默认使用environment.ts中的参数。

默认是以producetionprofile启动项目。

"configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "outputHashing": "all"
    },
    "development": {
      "buildOptimizer": false,
      "optimization": false,
      "vendorChunk": true,
      "extractLicenses": false,
      "sourceMap": true,
      "namedChunks": true
    }
  },
  "defaultConfiguration": "production"
}
          

1.3、使用环境变量

我们只需要在ts文件中直接````import environment.ts```就可使用环境变量,下面是示例。

这是environment.tsenviornment.prod.ts的内容。

// environment.ts
export const environment = {
  production: false,
  profile: 'development'
};

// environment.prod.ts
export const environment = {
  production: true,
  profile: 'production'
};

这是使用示例,import environment后就能直接用到环境参数。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  profile = environment.profile;
}

然后打印出profile参数,以不同的profile启动项目查看环境变量的变化。

<h1>profile = {profile}</h1>
  • development启动。ng serve --configuration=development

Angular学习笔记:environment.ts文件文章来源地址https://www.toymoban.com/news/detail-468081.html

  • production启动。ng serve --configuration=production
    Angular学习笔记:environment.ts文件

到了这里,关于Angular学习笔记:environment.ts文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Angular学习笔记一之项目构建与模块创建

    Angular是三大框架之一,是最早开始出现并流行的框架。它是使用HTML、CSS、TypeScript编写的一个重量级框架,为大型应用开发而设计。使用Angular开发出来的客户端应用是高度模块化的。Angular提供了cli工具,组件和模块都可以使用cli工具提供的命令行来创建。Angular对于状态管理

    2024年02月07日
    浏览(42)
  • TS学习笔记

    1.1 原始数据类型 boolean、string、number、void、null、undefined、Symbol、BigInt 注意: 1、null与undefined是所有类型的子集。 2、由构造函数创建的对象本质是一个对象。如下代码便会报错。 3、void用于定义无返回值的函数,若用于定义变量,则只能赋值undefined/null,并无太大意义。 2

    2024年02月01日
    浏览(31)
  • ts学习笔记(一)

    环境搭建: 1.npm init -y 2.npm i typescript -D 3.tsc --init 初始化tsconfig.json配置文件 ts的优势 : 1.编译时静态类型检测 2.自动提示更清晰明确 3.引入了泛型和一系列的ts特有的类型 4.强大的d.ts声明文件 5.轻松编译成JS文件 6.灵活性高 名词解释: 类型注解 let data:number = 3; 定义了数据类

    2023年04月24日
    浏览(35)
  • 【005】ts学习笔记【函数扩展】

    参数类型 可选参数与默认值 接口定义函数 定义剩余参数 函数重载 定义 函数重载是指在 TypeScript 中定义多个具有相同名称但参数类型或参数数量不同的函数声明。 函数重载规则 1, 多个函数定义使用相同的函数名称 2, 函数参数的数量或类型必须有区别 3,如果参数类型不同

    2024年02月11日
    浏览(30)
  • angular新版本未生成app.module.ts

    https://angular.cn/tutorial/tour-of-heroes https://angular.cn/tutorial/tour-of-heroes/toh-pt0 ng new angular-tour-of-heroes cd angular-tour-of-heroes ng serve --open   查看目录,未生成app.module.ts 网上搜了一下 https://github.com/angular/angular/issues/52751 需要使用如下命令: ng new angular-tour-of-heroes --no-standalone --routing --

    2024年02月03日
    浏览(22)
  • [toolschain] 怎么运用git 嵌套git 管理(子文件夹中也有个git) 并且如何简单设置使用repo的笔记 本文是求助GPT的记录 实践有用

    Q:一个文件夹a,a中的文件被a中的git 1管理,同时与a平级有一个git2,怎么让git 也能管理到git1 的内容 A:如果你想让一个 Git 仓库(git2)也能管理另一个 Git 仓库(git1)的内容,你可以使用 Git 的子模块(submodule)功能。子模块允许一个 Git 仓库包含另一个 Git 仓库,使得你可

    2024年02月04日
    浏览(65)
  • uniApp -- 学习笔记(vue3+ts)

    uniApp官网介绍 (一) 个人理解是官网返回一个 SelectorQuery 对象实例。 并且可以在这个实例上使用 select 等方法选择节点,并使用 boundingClientRect 等方法选择需要查询的信息。但是关于这个需要到查询信息,只有打印出来 , 在onReady 调用 let selectorQuery: UniNamespace.SelectorQuery =

    2024年02月09日
    浏览(48)
  • 【wow-ts】前端学习笔记Typescript基础语法(一)

    项目地址是https://github.com/datawhalechina/wow-ts。 我选择的是ts前端课程 第一次接触ts,先去了解了下ts的内容,复制内容如下 TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准(ES6 教程)。 TypeScript 由微软开发的自由和开源的编程语言。 TypeScript 是一种给 JavaScript 添加特性的

    2024年01月16日
    浏览(57)
  • SpringBoot源码分析(4)--Environment(下)/配置文件加载原理

    SpringBoot源码分析 SpringBoot源码分析(1)–@SpringBootApplication注解使用和原理/SpringBoot的自动配置原理详解 SpringBoot源码分析(2)–SpringBoot启动源码(万字图文源码debug讲解springboot启动原理) SpringBoot源码分析(3)–Environment简介/prepareEnvironment准备环境(万字图文源码debug分析) 上一篇《

    2024年02月13日
    浏览(44)
  • Angular的cache文件夹

    Angular compile cache_KenkoTech的博客-CSDN博客 1)现象:Angular13开始,默认情况下,Angular CLI 会在磁盘上保存一些可缓存的内容,放在.cache文件夹中即使在重新build也不会对该内容进行更新,除非删掉cache中内容才会在重新build后得到一个新的cache。 即,当重新运行同一个构建时,构

    2024年02月16日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包