从资产导入 Json 文件 - Angular 生产构建问题答案

【问题标题】：Import Json file from asset - Angular Production Build Issue从资产导入 Json 文件 - Angular 生产构建问题
【发布时间】：2020-04-03 15:00:01
【问题描述】：

我正在从资产文件夹中导入我的 json 文件以读取应用程序内的一些配置，这些配置运行良好，我可以根据我的要求更改 json 值

您可以参考：https://www.techiediaries.com/import-local-json-files-in-typescript/

但在生产构建版本中，当尝试从资产文件夹中的 json 文件中更改值时，它会读取开发数据

经过调查我们发现json数据嵌入在main-es5文件中，

有什么方法可以使用导入方法读取json文件，我们可以动态更改数据（基于环境）

【问题讨论】：

您必须使用 HttpClient 获取 json 文件。我认为打字稿导入功能不可能，因为这将读取您已经发现的在编译时创建的捆绑版本。如果您的生产 json 文件在编译时已经知道，您当然可以捆绑该文件。

标签： json angular

【解决方案1】：

我会建议通过 HttpClient 以更简洁的方式加载它，如果它包含一些配置，我认为这是您可以更改资产中的数据的方式，应用程序将一次又一次地加载HttpClient。

如果你想根据环境阅读，打字稿导入是行不通的。

创建一个服务，通过 HttpClient 基于预先放置的特定于环境的 JSON 读取 JSON。

【讨论】：

【解决方案2】：

这是您可以尝试的另一种替代解决方案。

创建一个app.constant.ts文件

    //
    // ===== File app.constants.ts    
    //
    'use strict';
    export const appConstants = {

       'key':'value',
       'key1':'value'
    };

在组件中这样导入：

    import {appConstants} from './../app.constants';

在这样的组件中使用：


    this.variable = appConstants.key;

【讨论】：

如果我们在 ts 文件中添加我们无法在应用构建后更改值