Module not found: Error: Can't resolve 'cordova/exec' and 'cordova/channel' on build

When I attempt to use “ng --build” to build my project so that I can then run “cordova build android” and “cordova emulate android” and test my app, the build fails because BackgroundGeolocation.js can’t seem to figure out where cordova/exec and cordova/channel are.

Your Environment

• Plugin version: 3.0.0-alpha.47
• Platform: Android
• OS version: 8.0.0
• Device manufacturer and model: Google Pixel XL

• Running in Simulator: Yes
• Cordova version (cordova -v): 8.1.2 (cordova-lib@8.1.1)
• Cordova platform version (cordova platform ls): Installed platforms: android 7.1.2 ios 4.5.5 Available platforms: browser ~5.0.1 osx ~4.0.1 windows ~6.0.0
• Plugin configuration options: N/A - doesn’t build
• Link to your project: N/A

Context

I wouldn’t call it a bug, more likely something I am doing wrong, but there is little to no documentation and/or community topics on how to use 3rd party Cordova plugins with vanilla Angular (almost everything mentions Ionic to some degree, which I am not using). As a result, I have no idea if it’s a bug or not.

Expected Behavior

No error - Cordova object should be wrapped in exec and channel and work as expected.

Actual Behavior

Errors appear stating that the module cannot be found

Possible Fix

Unsure of how to fix

Steps to Reproduce

1. Create an Angular project, wrapped in Cordova
2. Install plugin
3. ng --build
4. Errors will appear

Context

Cannot build app without getting around this. I am simply trying to add this plugin to my existing project

Debug logs

allen@tornado:~/scripts/lysi/hld-mileage-tracker$ ng build --prod

Date: 2018-11-16T03:13:17.338Z Hash: 2b236b3e85e64b1333ef Time: 21951ms chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.41 kB [entry] [rendered] chunk {1} main.ce39aa839131f9d29c6a.js (main) 779 kB [initial] [rendered] chunk {2} polyfills.d1c7bf4a2ae7c3435f95.js (polyfills) 37.5 kB [initial] [rendered] chunk {3} styles.254a64e6ae38a8bf3664.css (styles) 64.6 kB [initial] [rendered]

ERROR in ./node_modules/cordova-plugin-mauron85-background-geolocation/www/BackgroundGeolocation.js Module not found: Error: Can’t resolve ‘cordova/channel’ in ‘/home/allen/projects/mileage-tracker/node_modules/cordova-plugin-mauron85-background-geolocation/www’ ERROR in ./node_modules/cordova-plugin-mauron85-background-geolocation/www/BackgroundGeolocation.js Module not found: Error: Can’t resolve ‘cordova/exec’ in ‘/home/allen/projects/mileage-tracker/node_modules/cordova-plugin-mauron85-background-geolocation/www’

[mauron85]

I’ve just published version 3.0.0-alpha.50. Following @TomDemulierChevret’s advice, I’ve added export interface BackgroundGeolocationPlugin. It will fix this issue and ionic users can still benefit from provided types. All kudos to @TomDemulierChevret.

Example:

import { Injectable, NgZone } from '@angular/core';
// This is important!
import { BackgroundGeolocationPlugin } from 'cordova-plugin-mauron85-background-geolocation';

// This is important!
declare const BackgroundGeolocation: BackgroundGeolocationPlugin;

@Injectable()
export class LocationTracker {

  public watch: any;
  public lat = 0;
  public lng = 0;

  constructor(public zone: NgZone) {

  }

  startTracking() {
        // Background Tracking

        const config = {
            desiredAccuracy: 0,
            stationaryRadius: 20,
            distanceFilter: 10,
            debug: true,
            interval: 2000
        };

        BackgroundGeolocation.configure(config);
        // Turn ON the background-geolocation system.
        BackgroundGeolocation.start();
  }

  stopTracking() {
        BackgroundGeolocation.stop();
  }
}

[allensutton]

I finally figured this one out - the BackgroundaGeolocation.js file needs this on lines 12-13:

var exec = cordova.require('cordova/exec'); var channel = cordova.require('cordova/channel');

…instead of the existing code, which is this:

var exec = require('cordova/exec'); var channel = require('cordova/channel');

However, @mauron85 advised me in another issue that I opened that the version installed by the Cordova CLI (which I think comes from NPM or something) has bugs that have been fixed in the master branch of the git repo for it. He suggested installing via git in order to get those changes, so it’s possible this may have been fixed too.

Update: I checked and the version on git does not have cordova.require in it and simply has require. @ShafiqEssani if you’re using Angular as well, you might want to try this workaround for the issue to see if it works for you.