Question

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

任何人都可以帮助我理解，对于任何Angular2及更高版本的应用程序来说，利用天蓝色的Web应用程序，应用程序设置以在应用程序中使用的最佳方法是什么？

我能够通过调用外部API来向我返回这些应用设置来获取它，但这确实是开销。

Answer 1

AngularCLI可以访问环境变量，但是只能在构建期间访问它们。我认为您可以在构建管道中访问azure Web应用程序变量，但是每次更新配置时都需要重新构建。

Azure Web应用程序能够托管.net / core应用程序，并且您可以通过dotnet / core托管Angular应用程序。如果您决定这样做，则可以将配置作为全局变量放在index.cshtml文件中。

<script>
    window.config = {
        configName: '@System.Configuration.ConfigurationManager.AppSettings["configName"]',

    };
</script>

现在您可以在应用程序中的任何位置访问配置。

Answer 2

经过大量研究并浏览了许多博客，我终于能够实现这一点。第一件事是我无法在打字稿中使用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相同的文件夹中创建types.d.ts，以显示env接口可用于打字稿

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",

最后，一旦我设置了环境变量，我就可以在类型脚本process.env['apiURL']中使用它。否则我将获得未定义的值

*注意：我总是必须重新启动系统（操作系统：Windows 10），才能获得应用程序中可用的值。我仍然必须去挖掘更多内容才能发现此问题或解决方法。

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

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

2 个答案: