Angular 6 - импорт переменной из файла JS

Question

Я создаю проект с Angular 6, который требует от меня импорта стилей из внешнего файла js для создания пользовательской карты Google. Тем не менее, он, кажется, не импортирует в мой файл .ts правильно. Любая помощь будет отличной!

В моем компоненте

import {MapStyles} from './mapstyle.js'

@Component({
selector: 'map',
template: '<div #tref style="width:100%; height:100%;"></div>'
})

export class Map implements AfterViewInit {
  ...
  ngAfterViewInit() {
    console.log(MapStyles)  //is 'undefined'
  }
  const mapProperties = {
      styles: MapStyles
  };
}

Файл, который я пытаюсь импортировать (mapstyle.js):

export var MapStyles = [
  {
  "featureType": "water",
  "elementType": "geometry.fill",
  "stylers": [
    {
      "color": "#d3d3d3"
    }]
  },
 ...

Я пробовал такие вещи, как

import * as MapStyles from './mapstyle.js'

и

var MapStyles = [...]

но не повезло. спасибо!