title: importing objects from json file into angular adds "default" object wrapper
body: <p>I am trying to set up some tests in angular.  In order to make this easier I created some default json objects in separate json files that can be imported and used in the test.</p>
  <p>see below for simple test</p>
  <pre><code>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', () =&gt; {
    let service: SignServicesCostService;
    const demoCLient: ClientDetail = dClient;
    const services: ServiceType[] = sTypes;
    const branches: BranchZone[] = bZones;
  
    beforeEach(() =&gt; {
      TestBed.configureTestingModule({
        providers: [SignServicesCostService],
      });
      service = TestBed.inject(SignServicesCostService);
    });
    
    it('COST - RES - 1 Sign - 1 Lister - FIX - Zone 1', () =&gt; {
      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);
    });
  });
  </code></pre>
  <p>Here is an example of the json file for ServiceTypes:</p>
  <pre><code>[
    {
      &quot;Id&quot;: 1,
      ... // other props removed for brevity
      &quot;BranchName&quot;: &quot;&quot;
    },
    {
      &quot;Id&quot;: 2,
      ...
      &quot;LinkedServiceType&quot;: null
    }
  ]
  </code></pre>
  <h2>THE PROBLEM</h2>
  <p><strong>EXPECTED:</strong></p>
  <p>I expect that I should just be able to access the item in the object array with <code>services[15]</code> like any other array.  But that is not the case</p>
  <p><strong>ACTUAL:</strong>
  the import process from the .json file is adding a top level object called <strong>&quot;default&quot;</strong> so I would have to access the items as follows: <code>services.default[15]</code>.  This does not work because that type is not seen during compilation, only when actually running the code.
  see image here to show you what I mean (I circled the default object that contains the actual array of objects):
  <a href="https://i.stack.imgur.com/9CWF2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9CWF2.jpg" alt="debug console for jasmine test" /></a></p>
  <p><strong>WORK AROUND</strong>
  in order to get this to work I had to change to following:</p>
  <pre><code>const fixService = services[15];
  const zone = branches[0];
  </code></pre>
  <p>to</p>
  <pre><code>const fixService = services['default'][15];
  const zone = branches['default'][0];
  </code></pre>
  <h2>QUESTION:</h2>
  <p>Can someone help me know why this <em><strong>default</strong></em> is getting added and how to stop it.</p>
  <p>thanks a lot</p>