How to Import/Declare JS File [TS Error, Cannot Find Name 'Airmap']

Ionic Framework ionic-v3
1

Hi, FYI: NB to TS and Ionic and rusty with Angular!

I’m trying to use a third-party JS (no ts available) file and attempting to implement it “correctly” in Ionic - and so far without any luck.

The JS file resides in ../assets/js/airmap.map.2.2.0.min. I am trying to call on it in my **airmap.ts** as follows:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
	selector: 'page-airmap',
	templateUrl: 'airmap.html',
})
export class AirmapPage {

	constructor(public navCtrl: NavController, public navParams: NavParams) {
	}

	ionViewDidLoad() {
		console.log('ionViewDidLoad AirmapPage');
	}

	ionViewWillEnter() {

		let config = {
			"airmap": {
				"api_key": "...."
			},
			"auth0": {
				"client_id": "....",
				"callback_url": null
			},
			"mapbox": {
				"access_token": '....'
			}
		};

		let map = new Airmap.map(config, { // <---- 'Airmap' - TS ERRORs HERE -----> //
			container: 'airspaceMap',
			theme: 'standard',
			center: [33.238634, -111.7078655],
			zoom: '10',
			layers: ['airports_commercial', 'national_parks', 'tfrs', 'wildfires'],
			/* refer to the docs for a comprehensive list of options */
		});

		map.on('load', function() {

			// set layers
			let controlled_airspace_layers = ['class_b', 'class_c', 'class_d', 'class_e0'];

			map.setLayers(controlled_airspace_layers);
			// add Prohibited Special Use Airspace
			map.addLayer('sua_prohibited');
		});

		map.on('click', function(click) {
			map.move(click.lngLat.lat, click.lngLat.lng);
		});
	}
}

I have tried various routes without any luck ( because I don’t know what I am doing here :tired_face: ) including in my **app.module.ts**:

import { Airmap } from '../assets/js/airmap.map.2.2.0.min'

@NgModule({
  declarations: [
    MyApp,
    Airmap,
    // LoginPage,
  ],

…And tried adding it in the index.html

  . . .
  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!--Airmap-->
  <script src="assets/js/airmap.map.2.2.0.min.js"></script>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>
  . . .

So any help with steps and code examples would be greatly appreciated and will go a long ways on me learning this new and awesome framework (for me anyways). Thinx!!

2

does this help?

3

I’ve tried using this in my airmap.ts file:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

declare var Airmap: any;

@IonicPage()
. . .

I did this yesterday (and tried again now using your suggestion) but I get a TypeError: Airmap is not a constructor

Any idea from here? Thnx again.

4

–>and you included the js in the www/index…html as suggested?
see u did this already

and Airmap.js has a constructor method?

5

No constructor method for Airmap.js…

6

so, the airmap library is not object oriented?

but your code is doing a ‘new’

 new Airmap.map(
7

Dropped any and error is now Airmap is not defined. How & where do I define Airmap? Again, thnx for your help.

8

i think u need the define,

you have to change your code … ‘new’ means call the constructor of the object class…

you said the airmap.js doesn’t provide a constructor, is not object oriented

9

FIXED: There was a typO in the url link

10

hello, I have also same problem, can not import a ts file. what is typO?

11

I’m going to guess they meant “typo” as in short for “typographical error”.