Using Capacitor APIs with Ionic v1

ionic-v1
1

So I managed to get the Capacitor working for an old Ionic v1, AngularJS - it can be built and deployed. Now I’d like to switch from using Cordova plugins to Capacitor APIs - for example Camera. In the Capacitor docs, I see this:

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

There are problems with this approach:

  1. old Ionic v1 apps use AngularJS and build process which doesn’t support ES6 imports. What can I do to support them?
  2. @capacitor/core is an NPM plugin. In Ionic v1 apps, the NPM plugins live in node_modules/, while the app source code is in www/. The app can only access packages located in www/lib/, installed by Bower - but @capacitor/core is not available via Bower.

Is there a way to use Capacitor APIs in Ionic v1, AngularJS app?
Thank you for any suggestions!

1 Like
2

For anyone else struggling with this, I found one “solution” using Browserify, albeit not a completely clean one:

  1. install capacitor normally. It gets installed into node_modules in your project

  2. install browserify globally
    npm i -g browserify

  3. go to node_modules/@capacitor/core/dist and run this in your terminal:
    browserify index.js -o capacitor_core.js
    This bundles the whole Capacitor with its dependencies into a single file called capacitor_core.js

  4. take the generated capacitor_core.js and move it to somewhere in your app structure - i.e. somewhere under www/

  5. now you can import this file via classic <script> tag in www/index.html or whatever suits you

  6. Plugins (Capacitor APIs) are available globally, e.g. Capacitor.Plugins.Device.getInfo()

The downside of this approach is of course that your local browserified Capacitor doesn’t get automatically updated when you update the npm Capacitor package - you’ll have to do the steps 3 and 4 manually. That could be automatized via gulp or whatever.

1 Like
3

I know this is over a year old, but did you ever get this to fully work? I have access to the plugins that I need, but ‘CameraResultType’ does not exist in the ‘capacitor_core.js’ file that was generated.

4

So it turns out you can just hardcode the return type you want as a string.

So instead of CameraResultType.Uri, you can just put “uri”

Didn’t realize that CameraResultType was just an enum of strings.

5

This works. The only thing is extracting the enum from the docs.

6

Does not working, the error is browserify syntaxerror ‘import’ and ‘export’ may appear only with ‘sourcetype module’