如何在 Angular 中使用环境变量

这篇具有很好参考价值的文章主要介绍了如何在 Angular 中使用环境变量。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简介

如果你正在构建一个使用 API 的应用程序,你会想在开发过程中使用测试环境的 API 密钥,而在生产环境中使用生产环境的 API 密钥。在 Angular 中,你可以通过 environment.ts 文件创建环境变量。

在本教程中,你将学习如何在 Angular 中使用环境变量。

先决条件

如果你想跟着本文操作,你需要:

  • 一个用于 Node.js 的本地开发环境。请参考《如何安装 Node.js 并创建本地开发环境》。

本教程已经验证过可以在 Node v16.2.0、npm v7.15.1 和 @angular/core v12.0.3 下运行。

检测环境

Angular CLI 项目已经使用了一个 production 环境变量,在生产环境下启用生产模式:


// ...

if (environment.production) {
  enableProdMode();
}

Angular 还为我们提供了一个名为 isDevMode 的实用函数,可以用来检查应用程序是否在开发模式下运行:


import { Component, OnInit, isDevMode } from '@angular/core';

@Component({ ... })
export class AppComponent implements OnInit {
  ngOnInit() {
    if (isDevMode()) {
      console.log('Development!');
    } else {
      console.log('Production!');
    }
  }
}

这个示例代码将在开发模式下记录消息 'Development!',在生产模式下记录消息 'Production!'

添加开发和生产变量

你还会注意到,默认情况下,在 /src/environment 文件夹中有一个用于开发环境和一个用于生产环境的环境文件。

假设我们想要根据是否处于开发或生产模式来使用不同的密钥:

对于 environment.ts 中的开发设置:


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

对于 environment.prod.ts 中的生产设置:


export const environment = {
  production: true,
  apiKey: 'prodKey'
};

在我们的组件中,我们只需要这样做就可以访问变量:


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

Angular 会负责切换正确的环境文件。

使用以下命令运行开发模式:

ng serve

apiKey 变量将解析为 devKey

使用以下命令运行生产模式:

ng serve --configuration=production

apiKey 变量将解析为 prodKey

添加暂存变量

通过在 angular.json 文件的 configurations 字段中添加新条目,可以在 Angular CLI 项目中添加新的环境。

让我们基于生产使用的配置添加一个暂存环境:


{
  // ...
  "projects": {
    "angular-environment-example": {
      // ...
      "prefix": "app",
        "build": {
          // ...
          "configurations": {
            "staging": {
              // ...
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.stage.ts"
                }
              ],
              // ...
            },
            // ...
          },
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "staging": {
              "browserTarget": "angular-environment-example:build:staging"
            },
          }
        },
      }
    }
  }
}

现在我们可以添加一个暂存环境文件:


export const environment = {
  production: true,
  apiKey: 'stagingKey'
};

使用以下命令运行开发模式:

ng serve --configuration=staging

apiKey 变量将解析为 stagingKey

结论

在本教程中,你学习了如何在 Angular 中使用环境变量。

如果你想了解更多关于 Angular 的知识,请查看我们的 Angular 主题页面,了解练习和编程项目。文章来源地址https://www.toymoban.com/news/detail-829255.html

到了这里,关于如何在 Angular 中使用环境变量的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 如何在 Angular 中使用 ng2-charts 来使用 Chart.js

    介绍 Chart.js 是一个流行的 JavaScript 图表库, ng2-charts 是 Angular 2+ 的一个包装器,用于在 Angular 中集成 Chart.js。 在本教程中,您将使用 Chart.js 和 ng2-charts 在 Angular 应用程序中创建示例图表。 要完成本教程,您需要: 本地安装了 Node.js,您可以按照《如何安装 Node.js 并创建本地

    2024年02月20日
    浏览(46)
  • 2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较

    🎉欢迎来到Java学习路线专栏~探索2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较 ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:Java学习路线 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 🍹文章作者技术和水

    2024年02月11日
    浏览(49)
  • 大型医院云HIS系统:采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发 融合B/S版电子病历系统

    一套医院云his系统源码 采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发。融合B/S版电子病历系统,支持电子病历四级,HIS与电子病历系统均拥有自主知识产权。 文末卡片获取联系! 基于云计算技术的B/S架构的医院管理系统(简称云HIS),采用前后

    2024年02月03日
    浏览(50)
  • 前端框架之争:Vue.js vs. React.js vs. Angular

    🎉欢迎来到Web前端专栏~前端框架之争:Vue.js vs. React.js vs. Angular ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:架构设计 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技术和水平有限,如果

    2024年02月07日
    浏览(93)
  • angular框架简介基础与使用(全文2w8字)前端框架angular

    本文的所有内容,可以在我的博客上看到,下面是地址。建议去博客看,因为csdn的这篇图片我没上传。 可以转载,但请注明出处 我的博客—点击跳转 https://numb.run Angular是谷歌开发的一款开源的web前端框架,诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀

    2024年02月02日
    浏览(45)
  • 一文搞定:前端如何选择Angular、React和Vue三大主流框架

    在前端开发领域,目前最流行的三个框架是Angular、React和Vue.js。这些框架非常高效,并且它们各自具有一系列的优缺点。 在AI辅助编程工具 CodeGeeX 的后台中,也看到有大量的前端开发者使用这三个框架,并且Vue的使用率在 CodeGeeX 的后台中,持续走高。接下来我们针对Angular、

    2024年02月09日
    浏览(55)
  • 如何在 Angular 中使用变更检测策略

    简介 默认情况下,Angular 2+ 会在应用程序中的每次变化时对所有组件(从上到下)执行变更检测。变化可以来自用户事件或者从网络请求接收到的数据。 变更检测非常高效,但随着应用程序变得更加复杂并且组件数量增加,变更检测将不得不执行越来越多的工作。 其中一个

    2024年02月20日
    浏览(40)
  • 如何在 Angular 中使用懒加载路由

    简介 延迟加载 是一种限制加载用户当前需要的模块的方法。这可以提高应用程序的性能并减小初始捆绑包大小。 默认情况下,Angular 使用 急切加载 来加载模块。这意味着在应用程序运行之前必须加载所有模块。虽然这对许多用例可能是足够的,但在某些情况下,这种加载时

    2024年02月20日
    浏览(38)
  • 如何在 Angular 中使用 Flex 布局

    介绍 Flex Layout 是一个组件引擎,允许您使用 CSS Flexbox 创建页面布局,并提供一组指令供您在模板中使用。 该库是用纯 TypeScript 编写的,因此不需要外部样式表。它还提供了一种在不同断点上指定不同指令以创建响应式布局的方法。 在本教程中,您将构建一个示例 Angular 应用

    2024年02月19日
    浏览(47)
  • Angular中的管道(pipe)如何使用?

    在Angular中,管道(Pipes)是用于在模板中转换数据显示的工具。它们用于格式化、过滤、排序等操作,以便将数据以更易读或更有意义的方式呈现给用户。 1、使用Angular内置管道: 假设我们有一个显示日期的组件,并且我们想要在模板中格式化这个日期。我们可以使用Angul

    2024年02月02日
    浏览(43)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包