Angular 6- importing variable from JS file

Question

I am building a project with Angular 6 that requires me to import styles from an external js file in order to build a custom Google Map. However, it doesn't seem to be importing into my .ts file correctly. Any help would be great!

In my component

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
  };
}

The file I'm trying to import (mapstyle.js):

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

I've tried things such as

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

and

var MapStyles = [...]

but no luck. thanks!

Try saving it as a Typescript file instead of a JavaScript file — Harini P, Apr 30 '19 at 16:13
Please refer: https://stackoverflow.com/questions/46991237/how-to-import-json-file-into-a-typescript-file — Harini P, Apr 30 '19 at 16:14
@HariniP so I converted it to a .ts file, imported it like import {MapStyles} from './mapstyle', then when I used my mapProperties later in my component, I had to put in front of it, but it worked! Thanks — Devstar34, Apr 30 '19 at 16:22

score 1 · Answer 1 · answered Sep 21 '20 at 09:03

This is how you can import and use a variable from an imported file in Angular X projects.

map-config.ts

export const mapStyle = [
    {
        'elementType': 'labels.icon',
        'stylers': [
            {
                'visibility': 'off'
            }
        ]
    },
    {
        'featureType': 'poi.medical',
        'elementType': 'labels.icon',
        'stylers': [
            {
                'visibility': 'off'
            }
        ]
    }
];

map.components.ts

import { Component, OnInit } from '@angular/core';
import { mapStyle } from './map-config';

@Component({
  selector: 'app-map', 
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})

export class MapComponent implements OnInit {

  mapStyle = mapStyle;

  constructor() { 
    // 
  }

}

score 0 · Answer 2 · answered Jan 09 '20 at 12:13

I am considering MapStyles is a variable which is from external js file.

I had a similar requirement and this is how I have solved it,

I had loaded javascript file from root component and I am trying to use the variable inside sub component as shown below.

Angular 6- importing variable from JS file

2 Answers2