Ionic build transpile started error


#1

Hi, I’m using ionic framework to develop my mobile application and I use Mapbox javascript sdk in my app.

I read an instruction how to use the sdk. In src/index.html, I imported js and css files like

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.css' type='text/css' />

and in map.ts file, I put this code

var map = new mapboxgl.Map({
      style: 'mapbox://styles/mapbox/basic-v9',
      center: [100.539513, 13.739444],
      zoom: 12,
      pitch: 0,
      minZoom: 1.5, //restrict map zoom - buildings not visible beyond 13
      maxZoom: 17,
      container: 'map'
    });
    
    var directions = new MapboxDirections({
      accessToken: mapboxgl.accessToken,
      unit: 'metric',
      profile: 'driving',
      container: 'directions',
      proximity: [100.542239, 13.738442],
      controls : { inputs:false, instructions:false, profileSwitcher:false}
    });

    map.addControl(new mapboxgl.NavigationControl());

    map.on('load', function() {
      directions.setOrigin([100.539513, 13.739444]);
      directions.setDestination([98.992523, 18.781490]);

      map.addControl( directions, 'top-left' );
    });

where mapboxgl.accessToken is my secret token.

Everything work well whenI use ionic serve command but when I try to build an app to device using ionic cordova build ios, it show some errror like

[09:39:37]  typescript: src/pages/map/map.ts, line: 35 
            Cannot find name 'MapboxDirections'. 

      L35:      var directions = new MapboxDirections({
      L36:        accessToken: mapboxgl.accessToken,

Error: Failed to transpile program
    at BuildError.Error (native)
    at new BuildError (/Users/giffary/Documents/cordova/HRoute2/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at /Users/giffary/Documents/cordova/HRoute2/node_modules/@ionic/app-scripts/dist/transpile.js:159:20
    at transpileWorker (/Users/giffary/Documents/cordova/HRoute2/node_modules/@ionic/app-scripts/dist/transpile.js:107:12)
    at Object.transpile (/Users/giffary/Documents/cordova/HRoute2/node_modules/@ionic/app-scripts/dist/transpile.js:64:12)
    at /Users/giffary/Documents/cordova/HRoute2/node_modules/@ionic/app-scripts/dist/build.js:109:82

Anyone can help me how to fix this problem.

Thank you.


#2

Can you post the output from ‘ionic info’?

See:


#3

her is my info

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 3.1.6
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2 
ios-sim    : 6.0.0 
Node       : v6.11.3
npm        : 5.6.0 
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b 

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : legacy