Angular如何读取未解析的原始JSON文件，避免数组转索引键值对

方案1：读取未解析的原始JSON字符串 #

如果你需要完全未经解析的原始文本内容，推荐通过HTTP请求读取静态资源：

• 第一步：将config.json移动到src/assets/config目录下（或者修改angular.json的assets配置，将src/app/config加入静态资源扫描路径）
• 第二步：通过HttpClient请求资源，指定响应类型为文本：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class SchemaService {
  constructor(private http: HttpClient) { }

  getRawConfig() {
    // 直接返回原始JSON字符串，和文件内容完全一致
    return this.http.get('/assets/config/config.json', { responseType: 'text' });
  }
}

方案2：修正导入方式，正确序列化解析后的JSON对象 #

如果你只是需要得到和原JSON结构一致的序列化结果，不需要原始文本，修改导入写法即可：
你遇到的数组转成索引键对象的问题，是因为import * as data的导入方式会将JSON的解析结果包装成模块对象，而非直接返回解析后的值。改成默认导入即可：

// 开启resolveJsonModule的前提下，直接默认导入
import data from './app/config/config.json';

export class SchemaService {
  constructor() { }

  getConfig() {
    console.log('解析后的数组: ', data); // 输出 ["caseSensitive", "matchKeywords", "items"]
    console.log('序列化结果: ', JSON.stringify(data)); // 输出和原文件结构一致的JSON字符串
  }
}

如果你的TS配置不支持默认导入JSON，也可以取模块对象的default属性：

import * as dataModule from './app/config/config.json';
const data = dataModule.default;

内容的提问来源于stack exchange，提问作者Anuj TBE