将 json 文件中的对象导入 angular 添加 "default" 对象包装器

Question

我正在尝试在 angular 中设置一些测试。为了使这更容易，我在单独的 json 文件中创建了一些默认的 json 对象，可以在测试中导入和使用这些对象。

简单测试见下文

import { TestBed } from '@angular/core/testing';
import { SignServicesCostService } from '../signServices.costs.service';
import { ServiceType, ClientDetail } from 'app/shared/entities';
import { BranchZone } from 'app/shared/entities/branchZone';
import * as bZones from './BranchZones.json';
import * as sTypes from './ServiceTypes.json';
import * as dClient from './ClientDemo.json';

describe('SignCostsService', () => {
  let service: SignServicesCostService;
  const demoCLient: ClientDetail = dClient;
  const services: ServiceType[] = sTypes;
  const branches: BranchZone[] = bZones;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [SignServicesCostService],
    });
    service = TestBed.inject(SignServicesCostService);
  });
  
  it('COST - RES - 1 Sign - 1 Lister - FIX - Zone 1', () => {
    const fixService = services[15];
    const zone = branches[0];

    const costs = service.calculateResidentialCosts(
      1,
      1,
      demoCLient,
      null,
      null,
      fixService,
      zone
    );
    expect(fixService.Code.toLowerCase()).toEqual('fix');
    expect(costs.Price).toEqual(13);
    expect(costs.Total).toEqual(13);
  });
});

这是 ServiceTypes 的 json 文件示例：

[
  {
    "Id": 1,
    ... // other props removed for brevity
    "BranchName": ""
  },
  {
    "Id": 2,
    ...
    "LinkedServiceType": null
  }
]

问题

预期：

我希望我应该能够像任何其他数组一样使用 services[15] 访问对象数组中的项目。但事实并非如此

实际： .json 文件的导入过程正在添加一个名为 "default" 的顶级对象，因此我必须按如下方式访问项目：services.default[15]。这是行不通的，因为在编译期间看不到该类型，只有在实际运行代码时才会看到。请参阅此处的图像以向您展示我的意思（我圈出了包含实际对象数组的默认对象）：

解决方法 为了让它工作，我不得不更改为以下内容：

const fixService = services[15];
const zone = branches[0];

到

const fixService = services['default'][15];
const zone = branches['default'][0];

问题：

谁能帮我知道为什么要添加这个 default 以及如何停止它。

非常感谢

Answer 1

JSON 文件由您的加载程序作为合成模块提供，具有单个 default 导出，其中包含解析后的 JSON 作为 JavaScript 对象。因此，使用命名空间导入语法 import * as m from "m.json" 是不必要的，并且会导致您遇到不良的人体工程学。只需修复您的导入：import m from "m.json".

在您的具体情况下

import bZones from './BranchZones.json';
import sTypes from './ServiceTypes.json';
import dClient from './ClientDemo.json';

请注意，--esModuleInterop / --allowSyntheticDefaultImports 和 --resolveJsonModule 选项应根据您的加载程序和环境在您的 TypeScript 配置中指定。

将 json 文件中的对象导入 angular 添加 "default" 对象包装器

importing objects from json file into angular adds "default" object wrapper

json

jasmine

typescript

karma-runner

angular

问题

问题：