angular - 在 Angular 2 及更高版本中访问 Azure Web App 设置的最佳方法

标签 angular

这个应用程序不是 .Net/core 应用程序。因此我无法利用 System.Configuration。 System.Configuration.ConfigurationManager.AppSettings["RedirectURL"]

任何人都可以帮助我理解,对于任何 Angular2 及更高版本的应用程序来说,利用 azure web 应用程序、应用程序设置以便能够在应用程序中使用的最佳方法是什么。

我能够通过调用外部 API 返回这些应用程序设置来获取它,但这是一个真正的开销。

最佳答案

经过大量研究和阅读大量博客,我终于能够实现这一点。第一件事是我无法在 typescript 中使用 process.env 并访问我的环境变量

第 1 步 - 在与 package.json 相同的文件夹中创建一个 custom-config.js

const webpack = require('webpack')

module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                apiURL: JSON.stringify(process.env.apiURL)
            }
        })
    ]
}

第 2 步 - 在与 custom-config.js 相同的文件夹中创建一个 typings.d.ts,以公开 env 接口(interface)以供 typescript 使用

declare var process: NodeJS.Process;

interface Process {
    env: Env
}

interface Env {
    apiURL: string;
}

interface GlobalEnvironment {
    process: Process;
}

第 3 步 - 安装 npm 包。

需要安装 npm 包 @angular-builders/custom-webpack , @angular-builders/dev-server, @angular-devkit/build-angular and dotenv

第 4 步 - 在 angular.json 中将默认构建器更新为自定义构建器

"build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "extra-webpack.config.js"
            },

第 5 步 - 确保在 angular.json 中更新 serve 的构建选项

"serve": {
          "builder": "@angular-builders/dev-server:generic",

一旦我设置了我的环境变量,我终于可以在我的 Type Script process.env['apiURL'] 中使用它了。否则我得到未定义的值

*注意:我总是必须重新启动我的系统(操作系统:Windows 10)才能获得我的应用程序中可用的值。我仍然需要深入挖掘以找出此问题或解决方法。

更新:显然我不需要重新启动我的系统。只需重新启动 IDE 即可。

关于angular - 在 Angular 2 及更高版本中访问 Azure Web App 设置的最佳方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53947693/

相关文章:

Angular2 - 未捕获的 ReferenceError : onInputChange is not defined at HTMLInputElement. onchange

java - 如何将参数从 cordova HTTP 传递到 Spring Controller

angular - 我如何使用 @ContentChildren 并只呈现特定的子组件而不是所有子组件?

angular - 带有后端分页的 ng2-smart-table (Spring)

Angular 2 和 Angular Cli tree shaking 生产构建,vendor.js 巨大

Angular 2 编译器-cli 和 less 或 sass

angular - JWT 和防伪 token

javascript - Angular 2 ng-bootstrap 模态 : How to pass data to entry component

angular - *ngIf 和 *ngFor 在同一元素上导致错误

javascript - 以 ionic 滑动问题中的形式动态添加图像