Search code examples
javascriptangularjscapacitor

Is there a way to import @capacitore/core into an angularJS controller?

import {Plugins, CameraResultType} from '@capacitor/core';         <===============

angular.module('settings.ctrl', ['mn']);
angular
  .module('settings.ctrl')
  .controller('settingsCtrl', function (

I am trying to use the Camera API built into @capacitor/core, but no matter how I try and import the API, I continue to get the same error:

Error:

capacitor-runtime.js:358 SyntaxError: Cannot use import statement outside a module
capacitor.handleError @ capacitor-runtime.js:358
settings.ctrl.js:68 Uncaught SyntaxError: Cannot use import statement outside a module
capacitor-runtime.js:358 Error: [$injector:modulerr] Failed to instantiate module firefly due to:
Error: [$injector:modulerr] Failed to instantiate module settings.ctrl due to:
Error: [$injector:nomod] Module 'settings.ctrl' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.3/$injector/nomod?p0=settings.ctrl
    at http://localhost/lib/ionic/js/ionic.bundle.js:13380:12
    at http://localhost/lib/ionic/js/ionic.bundle.js:15270:17
    at ensure (http://localhost/lib/ionic/js/ionic.bundle.js:15194:38)
    at module (http://localhost/lib/ionic/js/ionic.bundle.js:15268:14)
    at http://localhost/lib/ionic/js/ionic.bundle.js:17674:22
    at forEach (http://localhost/lib/ionic/js/ionic.bundle.js:13648:20)
    at loadModules (http://localhost/lib/ionic/js/ionic.bundle.js:17658:5)
    at http://localhost/lib/ionic/js/ionic.bundle.js:17675:40
    at forEach (http://localhost/lib/ionic/js/ionic.bundle.js:13648:20)
    at loadModules (http://localhost/lib/ionic/js/ionic.bundle.js:17658:5)

I'm new to AngularJS and using Capacitor as well, so I am curious if there actually is any way of doing this, or if they just aren't compatible together in this way. Any help or lead would be nice.

UPDATE: I have tried using browserify per https://forum.ionicframework.com/t/using-capacitor-apis-with-ionic-v1/175257 The only issue with this is that it gives me the plugins (camera is the one I need) but the file generated does not contain CameraResultType anywhere in it, meaning I can't get the data for the photo back and do anything with it.

NODE MODULES:

+-- @capacitor/[email protected]
+-- @capacitor/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]
Solution

  • So it turns out the the enum I was trying to get was nothing more than a string, so I was able to just hard code it in, rather than using CameraResultType.Uri

          try {
        // Take/Select Photo
        var image = await Camera.getPhoto({
          quality: 100,
          resultType: "uri"
        });
        // imageURL contains path that can be set as img src
        onPhotoURISuccess(image.webPath);
      } catch (e) {
        console.error('Error Getting Photo: ', e);
      }