Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Setting up your development environment for the Moodle App: Difference between revisions

From MoodleDocs
No edit summary
(47 intermediate revisions by 10 users not shown)
Line 1: Line 1:
{{Moodle Mobile}}
{{Moodle Mobile}}
{{Moodle Mobile 3.5}}
Note: These instructions do work (give or take) for the current 3.5.x version of the Moodle Mobile app.


== Overview ==
== Overview ==
The majority of your development work will be done using the browser. You will likely begin to use an emulator once you need to simulate a real mobile device.


Remember that the majority of your development can be done using the online version https://mobileapp.moodledemo.net/ (requires Chrome or Chromium browser) as indicated in [[Mobile support for plugins]]
The structure of this page is
* the first part, up to the point where you get the 'ionic serve' command to work is what you need to be able to do development on the app and test it in a browser.
* the second part is about how to build a version of the app that can be run on a device.
* then at the end is a list of troubleshooting advice. If you encouter a problem that is not already listed, please consider adding it.
 
The majority of your development will be done using a browser. You will probably on begin to use an emulator once you need to simulate a real mobile device.
 
If you are just [[Mobile support for plugins|adding mobile support to plugins]], remember that most of your development can be done using the online pre-built version at https://mobileapp.moodledemo.net/ (with Chrome or Chromium). However, if you want to be able to to write [[Acceptance_testing_for_the_mobile_app|automated acceptance tests for the app]] then you need to follow this page at least as far as getting the ionic serve command to work on this page.


== Requirements ==
== Requirements ==


'''Install a browser for development'''
Windows tip: ingore any use of the sudo command below. Just use the command without it. Most things work that way, and if they don't try in a Powershell window that you have opened with 'Run as administrator ...'.
 
===Install a browser for development===


We recommend Chromium browser (Google Chrome open source version) https://download-chromium.appspot.com/
We recommend Chromium browser (Google Chrome open source version) https://download-chromium.appspot.com/
Please, read [[Moodle_Mobile_development_using_Chrome_or_Chromium]] for more information
Please, read [[Moodle_Mobile_development_using_Chrome_or_Chromium]] for more information


'''Install git'''
===Install git===


https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
https://git-scm.com/book/en/v2/Getting-Started-Installing-Git


'''Install Node.js'''
===Install Node.js===
 
On Linux we recommend you use [https://github.com/creationix/nvm nvm] - this lets you switch Node versions, and makes the install a bit easier than the official installation route.
 
nvm install node
nvm use 11.12.0 # Or whatever number nvm install reported.


http://nodejs.org
(Exact version is probably not critical. Moodle HQ devs report using both 8.12.x and 11.12.0 as of 2019-03-25.)


For Mac users we recommend to install NodeJS via Macports.
On Windows we recommend you use https://github.com/coreybutler/nvm-windows. Same nvm commands as for Linux.


Node 6.9.1 has been verified to work fine with the app. If you're having problems with later versions you might want to check if it works with 6.9.1.
On Mac users we recommend to install NodeJS via Macports.


"note": if you also need later versions of node for other projects, use Node Version Manager aka "nvm" [https://github.com/creationix/nvm here]. Linux and OSX is supported, and the site has pointers to windows alternatives. Simply type:
(It may seem simpler and easier to install directly from http://nodejs.org, but actually it seems to me more tricky to get that to work. If you have previously installed Node directly, and want to switch to nvm, you need to un-install node completely before installing nvm - or Google for trouble-shooting instructions, for example https://github.com/coreybutler/nvm-windows/issues/58#issuecomment-272608696.)
  nvm install 6.9.1
  nvm use 6.9.1


'''Install ionic:'''
===Install ionic===
  npm cache clean
  npm cache clean
  npm install -g cordova ionic    # (If it throws an EACCESS error, run it again with sudo)
  npm install -g cordova@8.1.2 ionic    # (If it throws an EACCESS error, run it again with sudo)


'''Install the npm required packages'''
===Install the npm required packages===
  sudo npm install -g gulp                      # (This will install gulp in a folder that should be in the PATH)
  sudo npm install -g gulp                      # (This will install gulp in a folder that should be in the PATH)


'''Native build dependencies for Windows'''
===Windows only: Native build dependencies===


node-gyp requires native build tools for your platform.  If you're developing on Mac or Linux, you'll probably have these already ([https://github.com/nodejs/node-gyp/blob/master/README.md refer to the docs if not]), on Windows, run the following command as administrator (in cmd or Powershell):
node-gyp requires native build tools for your platform.  If you're developing on Mac or Linux, you'll probably have these already ([https://github.com/nodejs/node-gyp/blob/master/README.md refer to the docs if not]), on Windows, run the following command as administrator (in cmd or Powershell):
Line 42: Line 56:
  npm install --global --production windows-build-tools
  npm install --global --production windows-build-tools


'''Push notifications for Mac'''
Warning! this installer can take a very, very long time to run. We were seeing it take hours. Literally. Be prepared to be very patient. Don't just make the natural assumption that it has crashed.
 
===Mac only: Push notifications===


Phonegap plugin push 1.9.0 requires CocoaPods to work. The installation steps can be found in https://cocoapods.org/
Phonegap plugin push 1.9.0 requires CocoaPods to work on a Mac. The installation steps can be found in https://cocoapods.org/


Please note that for compiling the app in Mac you need to open the .xcworkspace file, more information here: MOBILE-1970
sudo gem install cocoapods
pod setup
 
Please note that for compiling the app in Mac you need to open the '''Moodle.xcworkspace''' file, more information here: MOBILE-1970


== Clone the app base code ==
== Clone the app base code ==


'''Clone the code base into a local directory in your computer.'''
Clone the code base into a local directory in your computer.
  git clone https://github.com/moodlehq/moodlemobile2.git moodlemobiledirectory
It may be an idea to work from the integration branch rather than master.
  git clone https://github.com/moodlehq/moodleapp.git moodlemobiledirectory
  cd moodlemobiledirectory
  cd moodlemobiledirectory
  git checkout v3.5.0
  git checkout integration


== Setup the environment ==
== Setup the environment ==
Line 61: Line 81:
The following command must be run in the project's root folder:
The following command must be run in the project's root folder:
  npm run setup
  npm run setup
If this fails, you can see what it is doing by looking at the 'scripts' section in package.json. At the moment it is doing <tt>npm install && cordova prepare && gulp</tt>. That is, running three commands back-to-back, but only carrying on if the previous one succeeds completely. You can try running the three commands separately. If you do, <tt>ionic serve</tt> (see below) may work, even if <tt>cordova prepare</tt> gives errors. You only really need <tt>cordova prepare</tt> to work if you are going to go on and build the app.


== Open the app in the browser ==
== Open the app in the browser ==
Line 67: Line 89:
and then, start the Ionic server:
and then, start the Ionic server:


  ionic serve --browser chromium
  ionic serve --browser chromium         # or chrome or whatever browser.


If you don't want to open any browser you should run:
If you don't want to open any browser you should run:


  ionic serve -b
  ionic serve -b
Congratulations! Now that you have got to the piont where the 'ionic serve' command works, you can start doing development on the app. You only need to read the rest of the page if you want to build packaged versions of the app.


== Updating ionic and cordova ==
== Updating ionic and cordova ==
Line 80: Line 104:
Update project platforms:
Update project platforms:


  ionic platform remove android
  ionic cordova platform remove android
  ionic platform remove ios
  ionic cordova platform remove ios
  ionic platform add android
  ionic cordova platform add android
  ionic platform add ios
  ionic cordova platform add ios


== Updating plugins ==
== Updating plugins ==
Line 92: Line 116:
== Building for Android and iOS ==
== Building for Android and iOS ==


Please see this guide to be able to build for Android and iOS using the command line:
Please see the guides below to be able to build for Android and iOS using the command line:


http://cordova.apache.org/docs/en/5.0.0/guide_platforms_index.md.html#Platform%20Guides
Android: https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html


'''Common errors when building'''
iOS: https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html


* com.android.dex.DexException: Multiple dex files define XXX
If the build fails, please run <code>cordova requirements</code> to check that you fulfilled all requirements for the platform.
 
If you get errors while building, please see the Troubleshooting section below.
 
If using '''Ubuntu''' you should install the packages: gradle and libgradle-android-plugin-java (and all its dependencies) to build.
 
== Compiling using AOT ==
 
Angular has 2 ways of compiling: JIT and AOT. Running "ionic serve" or "ionic build" compiles using JIT by default, which is faster to compile but the app takes longer to start.
 
When building for release you should always compile using AOT, otherwise the app can take too long to start in some devices. The default AOT compiling causes some issues with the database activity and the [[Mobile support for plugins]], so you have to modify a couple of files in order to make this work.
 
First you need to open the file: ''node_modules/@angular/platform-browser-dynamic/esm5/platform-browser-dynamic.js''. Search the variable called "''_NO_RESOURCE_LOADER''", you'll see it has a function named "''get''" with this line:
 
<code javascript>
throw new Error("No ResourceLoader implementation has been provided. Can't read the url \"" + url + "\"");</code>
 
Remove that line and put this code instead:
 
<code javascript>
        url = 'templates/' + url;
 
        var resolve;
        var reject;
        var promise = new Promise(function (res, rej) {
            resolve = res;
            reject = rej;
        });
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'text';
        xhr.onload = function () {
            // responseText is the old-school way of retrieving response (supported by IE8 & 9)
            // response/responseType properties were introduced in ResourceLoader Level2 spec (supported by IE10)
            var response = xhr.response || xhr.responseText;
            // normalize IE9 bug (http://bugs.jquery.com/ticket/1450)
            var status = xhr.status === 1223 ? 204 : xhr.status;
            // fix status code when it is 0 (0 status is undocumented).
            // Occurs when accessing file resources or on Android 4.1 stock browser
            // while retrieving files from application cache.
            if (status === 0) {
                status = response ? 200 : 0;
            }
            if (200 <= status && status <= 300) {
                resolve(response);
            }
            else {
                reject("Failed to load " + url);
            }
        };
        xhr.onerror = function () { reject("Failed to load " + url); };
        xhr.send();
        return promise;
</code>
 
We tried to replace the default loader with our own implementation, but we weren't able to make the compiler work so the only solution left was to modify the default one.
 
Now you need to open the file: ''node_modules/@ionic/app-scripts/dist/util/config.js''. In that file you need to remove the ''context.isProd'' condition from the options ''optimizeJs''. So the final code for that part should be like this:
 
<code javascript>
    context.optimizeJs = [
        context.optimizeJs,
        hasArg('--optimizeJs')
    ].find(function (val) { return typeof val === 'boolean'; });
</code>
 
We want to compile in production mode but without optimizing Javascript because that breaks our plugins support. However, Ionic doesn't let you do that, so the only option is to do this change.
 
With these changes done you can now compile using production mode:
 
<code php>
npm run ionic:build -- --prod</code>
 
This command will generate the app files and put them inside ''www'' folder. If you now want to install that app in a real device you can run "''cordova run android''" or "''cordova build ios''" (please don't use "''ionic cordova ...''" or "''ionic serve''" because it will override your build files!).
 
== Troubleshooting ==
 
=== Strange NPM errors ===
 
To get more debug output from npm commands, see https://docs.npmjs.com/misc/config#shorthands-and-other-cli-niceties. In particular try adding <tt>--loglevel verbose</tt> (or <tt>--loglevel info</tt> or <tt>--loglevel silly</tt>) to the command-line.
 
=== Error: libsass bindings not found. Try reinstalling node-sass? ===
 
Please read: http://fettblog.eu/gulp-and-node4-first-aid/, alternatively you must be sure that you installed Node v0.12
 
=== node-gyp\src\win_delay_load_hook.c(34): error C2373: '__pfnDliNotifyHook2': redefinition; different type modifiers ===
 
Try updating npm to the latest version using:
 
  npm install -g npm@latest
 
 
=== com.android.dex.DexException: Multiple dex files define XXX ===
Open the file ''platforms/android/build.gradle'' and add this code at the end:
Open the file ''platforms/android/build.gradle'' and add this code at the end:


Line 105: Line 221:
   }
   }


* Could not resolve all dependencies for configuration ':_debugCompile'.
=== Could not resolve all dependencies for configuration ':_debugCompile'. ===
Open the Android SDK Manager and make sure you have installed: Android Support Repository, Android Support Library, Google Play Services and Google Repository.
Open the Android SDK Manager and make sure you have installed: Android Support Repository, Android Support Library, Google Play Services and Google Repository.


* Could not find com.android.support:support-v4:XXX
=== Could not find com.android.support:support-v4:XXX ===
Open the file ''platforms/android/build.gradle'' and add this code at the end:
Open the file ''platforms/android/build.gradle'' and add this code at the end:


Line 115: Line 231:
   }
   }


== Troubleshooting ==
=== ERROR: In <declare-styleable> FontFamilyFont, unable to find attribute android:font  ===
 
Open the file ''platforms/android/build.gradle'' and add this code at the end:
 
android {
    compileSdkVersion 26
    buildToolsVersion "26.0.1"
}
 
=== Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.  ===
 
1. Download Android studio - https://developer.android.com/studio/
 
2. Copy the folder android-studio/plugins/android/lib/templates
 
3. Paste in the folder android-sdk-folder/Sdk/tools
 
=== Could not find com.android.support:support-v4:27.1.0 ===
 
Open the file ''platforms/android/build.gradle'' and configure like this:
 
  allprojects {
      repositories {
          jcenter()
          maven {
              url "https://maven.google.com"
          }
      }
  }
 
=== Error: not found: make ===
 
If you see this error in Ubuntu, run <tt>sudo apt-get install build-essential</tt> and retry.
 
=== Current working directory is not a Cordova-based project. ===
 
If you see this error during <tt>npm setup</tt>, run <tt>mkdir www</tt> and retry.
 
=== ReferenceError: internalBinding is not defined ===
 
This [https://stackoverflow.com/questions/53146394/node-app-fails-to-run-on-mojave-referenceerror-internalbinding-is-not-defined seems to be] an error with 'natives' prior to 1.1.6. I fixed it using <tt>npm install natives@1.1.6</tt>.
 
=== ReferenceError: internalBinding is not defined ===
 
This [https://stackoverflow.com/questions/53146394/node-app-fails-to-run-on-mojave-referenceerror-internalbinding-is-not-defined seems to be] an error with 'natives' prior to 1.1.6. I fixed it using <tt>npm install natives@1.1.6</tt>.
 
=== npm update check failed===
 
I got the error
 
│                  npm update check failed                  │
│            Try running with sudo or get access            │
│            to the local update config store via            │
│ sudo chown -R $USER:$(id -gn $USER) C:\Users\username\.config │
 
on Windows because I installed too much as admin, and the suggested command does not work on Windows. The is to manually check the ownership of all the files in C:\Users\username\.config\configstore. In my case it was update-notifier-npm.json which got changed to be owned by Administrator.
 
===Unhandled rejection Error: Command failed: C:\cygwin64\bin\git.EXE ...===
 
You need to heed the advice at https://www.npmjs.com/package/npm#installing-on-cygwin. Cygwin users are not welcome in the Node world. However, you just need to ensure that Msysgit is on your windows path and that the cygwin bin folder is not. Then always use another shell like Powershell for your Moodle mobile development. (You don't need your Cygwin bin folder on the Windows path. It automatically gets added to the path when you lauch Cygwin bash.)
 
===The product name change (<name> tag) in config.xml is not supported dynamically===
 
According to Google, this happens when you create the iOS platform with a certain <name> and then you change that name in config.xml. It's weird that the installation process does that, it should create the platform with the right name unless it was changed manually.
 
The solution seems to be removing and adding the iOS platform again:
 
ionic platform remove ios
ionic platform add ios
 
Note that this does not seem to prevent <tt>ionic --serve</tt> from serving a working app if you run gulp after <tt>npm run setup</tt> has failed with this error.
 
===Failed to install 'cordova-plugin-file-transfer': CordovaError: Version of installed plugin: "cordova-plugin-file@4.3.3" does not satisfy dependency plugin requirement "cordova-plugin-file@>=5.0.0".===
 
The ''cordova-plugin-file'' version specified in config.xml is 6.0.1, for some reason the installation process installed a wrong version for that plugin. You can manually install the ''cordova-plugin-file'' plugin like this:
 
cordova plugin remove cordova-plugin-file
cordova plugin add cordova-plugin-file@6.0.1
 
Please notice that if there is any plugin installed that depends on ''cordova-plugin-file'' you'll have to remove and re-add them too.
 
Note that this does not seem to prevent <tt>ionic --serve</tt> from serving a working app if you run gulp after <tt>npm run setup</tt> has failed with this error.
 
===Cannot download "https://github.com/sass/node-sass/releases/download/v4.11.0/linux-x64-72_binding.node"===
Force using node 11, since node-sass for node 12 is not yet avalaible. See [https://tracker.moodle.org/browse/MOBILE-2999|MOBILE-2999] for more info.


=== Error: libsass bindings not found. Try reinstalling node-sass? ===
===Mac: linker code failed with exit code 1===
If you get this error when trying to build the Moodle app with XCode, some dependencies might not have installed correctly.


Please read: http://fettblog.eu/gulp-and-node4-first-aid/, alternatively you must be sure that you installed Node v0.12
Ensure you have followed the [https://docs.moodle.org/dev/Setting_up_your_development_environment_for_Moodle_Mobile_2#Mac_only:_Push_notifications| Mac only: Push notifications] steps above (particularly opening the .xcworkspace file rather than the .xcodeproj file). Then run the following:


=== node-gyp\src\win_delay_load_hook.c(34): error C2373: '__pfnDliNotifyHook2': redefinition; different type modifiers ===
  npm run setup
  cd platforms/ios
  pod install


Try updating npm to the latest version using:
Now try running the build again in XCode.


   npm install -g npm@latest
===Windows: <code>npm run ionic:serve</code> hangs after "Starting 'watch'"===
This appears to have happened since the move to npx. Try running the npx commands generated by npm run directly in bash:
   npx gulp watch & npx ionic-app-scripts serve -b --devapp --address=0.0.0.0


== See also ==
== See also ==


http://ionicframework.com/docs/cli/
http://ionicframework.com/docs/cli/

Revision as of 09:46, 19 May 2020

This template is unused and can be deleted.

Note: These instructions do work (give or take) for the current 3.5.x version of the Moodle Mobile app.

Overview

The structure of this page is

  • the first part, up to the point where you get the 'ionic serve' command to work is what you need to be able to do development on the app and test it in a browser.
  • the second part is about how to build a version of the app that can be run on a device.
  • then at the end is a list of troubleshooting advice. If you encouter a problem that is not already listed, please consider adding it.

The majority of your development will be done using a browser. You will probably on begin to use an emulator once you need to simulate a real mobile device.

If you are just adding mobile support to plugins, remember that most of your development can be done using the online pre-built version at https://mobileapp.moodledemo.net/ (with Chrome or Chromium). However, if you want to be able to to write automated acceptance tests for the app then you need to follow this page at least as far as getting the ionic serve command to work on this page.

Requirements

Windows tip: ingore any use of the sudo command below. Just use the command without it. Most things work that way, and if they don't try in a Powershell window that you have opened with 'Run as administrator ...'.

Install a browser for development

We recommend Chromium browser (Google Chrome open source version) https://download-chromium.appspot.com/ Please, read Moodle_Mobile_development_using_Chrome_or_Chromium for more information

Install git

https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

Install Node.js

On Linux we recommend you use nvm - this lets you switch Node versions, and makes the install a bit easier than the official installation route.

nvm install node
nvm use 11.12.0 # Or whatever number nvm install reported.

(Exact version is probably not critical. Moodle HQ devs report using both 8.12.x and 11.12.0 as of 2019-03-25.)

On Windows we recommend you use https://github.com/coreybutler/nvm-windows. Same nvm commands as for Linux.

On Mac users we recommend to install NodeJS via Macports.

(It may seem simpler and easier to install directly from http://nodejs.org, but actually it seems to me more tricky to get that to work. If you have previously installed Node directly, and want to switch to nvm, you need to un-install node completely before installing nvm - or Google for trouble-shooting instructions, for example https://github.com/coreybutler/nvm-windows/issues/58#issuecomment-272608696.)

Install ionic

npm cache clean
npm install -g cordova@8.1.2 ionic    # (If it throws an EACCESS error, run it again with sudo)

Install the npm required packages

sudo npm install -g gulp                      # (This will install gulp in a folder that should be in the PATH)

Windows only: Native build dependencies

node-gyp requires native build tools for your platform. If you're developing on Mac or Linux, you'll probably have these already (refer to the docs if not), on Windows, run the following command as administrator (in cmd or Powershell):

npm install --global --production windows-build-tools

Warning! this installer can take a very, very long time to run. We were seeing it take hours. Literally. Be prepared to be very patient. Don't just make the natural assumption that it has crashed.

Mac only: Push notifications

Phonegap plugin push 1.9.0 requires CocoaPods to work on a Mac. The installation steps can be found in https://cocoapods.org/

sudo gem install cocoapods
pod setup

Please note that for compiling the app in Mac you need to open the Moodle.xcworkspace file, more information here: MOBILE-1970

Clone the app base code

Clone the code base into a local directory in your computer. It may be an idea to work from the integration branch rather than master.

git clone https://github.com/moodlehq/moodleapp.git moodlemobiledirectory
cd moodlemobiledirectory
git checkout integration

Setup the environment

Please, note that if you are creating a custom app with a custom URL scheme, you should edit the /package.json and /config.xml files and specify there your custom URL_SCHEME (replacing the existing value) and your GCMPN SENDER_ID.

The following command must be run in the project's root folder:

npm run setup

If this fails, you can see what it is doing by looking at the 'scripts' section in package.json. At the moment it is doing npm install && cordova prepare && gulp. That is, running three commands back-to-back, but only carrying on if the previous one succeeds completely. You can try running the three commands separately. If you do, ionic serve (see below) may work, even if cordova prepare gives errors. You only really need cordova prepare to work if you are going to go on and build the app.

Open the app in the browser

First start Chromium via the command line using the custom parameters as is mentioned here: Moodle Mobile development using Chrome or Chromium

and then, start the Ionic server:

ionic serve --browser chromium         # or chrome or whatever browser.

If you don't want to open any browser you should run:

ionic serve -b

Congratulations! Now that you have got to the piont where the 'ionic serve' command works, you can start doing development on the app. You only need to read the rest of the page if you want to build packaged versions of the app.

Updating ionic and cordova

sudo npm update -g cordova
sudo npm update -g ionic

Update project platforms:

ionic cordova platform remove android
ionic cordova platform remove ios
ionic cordova platform add android
ionic cordova platform add ios

Updating plugins

cordova plugin remove your_plugin_id
cordova plugin add your_plugin_id

Building for Android and iOS

Please see the guides below to be able to build for Android and iOS using the command line:

Android: https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html

iOS: https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html

If the build fails, please run cordova requirements to check that you fulfilled all requirements for the platform.

If you get errors while building, please see the Troubleshooting section below.

If using Ubuntu you should install the packages: gradle and libgradle-android-plugin-java (and all its dependencies) to build.

Compiling using AOT

Angular has 2 ways of compiling: JIT and AOT. Running "ionic serve" or "ionic build" compiles using JIT by default, which is faster to compile but the app takes longer to start.

When building for release you should always compile using AOT, otherwise the app can take too long to start in some devices. The default AOT compiling causes some issues with the database activity and the Mobile support for plugins, so you have to modify a couple of files in order to make this work.

First you need to open the file: node_modules/@angular/platform-browser-dynamic/esm5/platform-browser-dynamic.js. Search the variable called "_NO_RESOURCE_LOADER", you'll see it has a function named "get" with this line:

throw new Error("No ResourceLoader implementation has been provided. Can't read the url \"" + url + "\"");

Remove that line and put this code instead:

       url = 'templates/' + url;
       var resolve;
       var reject;
       var promise = new Promise(function (res, rej) {
           resolve = res;
           reject = rej;
       });
       var xhr = new XMLHttpRequest();
       xhr.open('GET', url, true);
       xhr.responseType = 'text';
       xhr.onload = function () {
           // responseText is the old-school way of retrieving response (supported by IE8 & 9)
           // response/responseType properties were introduced in ResourceLoader Level2 spec (supported by IE10)
           var response = xhr.response || xhr.responseText;
           // normalize IE9 bug (http://bugs.jquery.com/ticket/1450)
           var status = xhr.status === 1223 ? 204 : xhr.status;
           // fix status code when it is 0 (0 status is undocumented).
           // Occurs when accessing file resources or on Android 4.1 stock browser
           // while retrieving files from application cache.
           if (status === 0) {
               status = response ? 200 : 0;
           }
           if (200 <= status && status <= 300) {
               resolve(response);
           }
           else {
               reject("Failed to load " + url);
           }
       };
       xhr.onerror = function () { reject("Failed to load " + url); };
       xhr.send();
       return promise;

We tried to replace the default loader with our own implementation, but we weren't able to make the compiler work so the only solution left was to modify the default one.

Now you need to open the file: node_modules/@ionic/app-scripts/dist/util/config.js. In that file you need to remove the context.isProd condition from the options optimizeJs. So the final code for that part should be like this:

   context.optimizeJs = [
       context.optimizeJs,
       hasArg('--optimizeJs')
   ].find(function (val) { return typeof val === 'boolean'; });

We want to compile in production mode but without optimizing Javascript because that breaks our plugins support. However, Ionic doesn't let you do that, so the only option is to do this change.

With these changes done you can now compile using production mode:

npm run ionic:build -- --prod

This command will generate the app files and put them inside www folder. If you now want to install that app in a real device you can run "cordova run android" or "cordova build ios" (please don't use "ionic cordova ..." or "ionic serve" because it will override your build files!).

Troubleshooting

Strange NPM errors

To get more debug output from npm commands, see https://docs.npmjs.com/misc/config#shorthands-and-other-cli-niceties. In particular try adding --loglevel verbose (or --loglevel info or --loglevel silly) to the command-line.

Error: libsass bindings not found. Try reinstalling node-sass?

Please read: http://fettblog.eu/gulp-and-node4-first-aid/, alternatively you must be sure that you installed Node v0.12

node-gyp\src\win_delay_load_hook.c(34): error C2373: '__pfnDliNotifyHook2': redefinition; different type modifiers

Try updating npm to the latest version using:

 npm install -g npm@latest


com.android.dex.DexException: Multiple dex files define XXX

Open the file platforms/android/build.gradle and add this code at the end:

 configurations {
     all*.exclude group: 'com.android.support', module: 'support-v4'
 }

Could not resolve all dependencies for configuration ':_debugCompile'.

Open the Android SDK Manager and make sure you have installed: Android Support Repository, Android Support Library, Google Play Services and Google Repository.

Could not find com.android.support:support-v4:XXX

Open the file platforms/android/build.gradle and add this code at the end:

 configurations.all {
     resolutionStrategy.force 'com.android.support:support-v4:24.0.0'
 }

ERROR: In <declare-styleable> FontFamilyFont, unable to find attribute android:font

Open the file platforms/android/build.gradle and add this code at the end:

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.1"
}

Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.

1. Download Android studio - https://developer.android.com/studio/

2. Copy the folder android-studio/plugins/android/lib/templates

3. Paste in the folder android-sdk-folder/Sdk/tools

Could not find com.android.support:support-v4:27.1.0

Open the file platforms/android/build.gradle and configure like this:

 allprojects {
     repositories {
         jcenter()
         maven {
             url "https://maven.google.com"
         }
     }
 }

Error: not found: make

If you see this error in Ubuntu, run sudo apt-get install build-essential and retry.

Current working directory is not a Cordova-based project.

If you see this error during npm setup, run mkdir www and retry.

ReferenceError: internalBinding is not defined

This seems to be an error with 'natives' prior to 1.1.6. I fixed it using npm install natives@1.1.6.

ReferenceError: internalBinding is not defined

This seems to be an error with 'natives' prior to 1.1.6. I fixed it using npm install natives@1.1.6.

npm update check failed

I got the error

│                   npm update check failed                   │
│             Try running with sudo or get access             │ 
│            to the local update config store via             │
│ sudo chown -R $USER:$(id -gn $USER) C:\Users\username\.config │

on Windows because I installed too much as admin, and the suggested command does not work on Windows. The is to manually check the ownership of all the files in C:\Users\username\.config\configstore. In my case it was update-notifier-npm.json which got changed to be owned by Administrator.

Unhandled rejection Error: Command failed: C:\cygwin64\bin\git.EXE ...

You need to heed the advice at https://www.npmjs.com/package/npm#installing-on-cygwin. Cygwin users are not welcome in the Node world. However, you just need to ensure that Msysgit is on your windows path and that the cygwin bin folder is not. Then always use another shell like Powershell for your Moodle mobile development. (You don't need your Cygwin bin folder on the Windows path. It automatically gets added to the path when you lauch Cygwin bash.)

The product name change (<name> tag) in config.xml is not supported dynamically

According to Google, this happens when you create the iOS platform with a certain <name> and then you change that name in config.xml. It's weird that the installation process does that, it should create the platform with the right name unless it was changed manually.

The solution seems to be removing and adding the iOS platform again:

ionic platform remove ios
ionic platform add ios

Note that this does not seem to prevent ionic --serve from serving a working app if you run gulp after npm run setup has failed with this error.

Failed to install 'cordova-plugin-file-transfer': CordovaError: Version of installed plugin: "cordova-plugin-file@4.3.3" does not satisfy dependency plugin requirement "cordova-plugin-file@>=5.0.0".

The cordova-plugin-file version specified in config.xml is 6.0.1, for some reason the installation process installed a wrong version for that plugin. You can manually install the cordova-plugin-file plugin like this:

cordova plugin remove cordova-plugin-file
cordova plugin add cordova-plugin-file@6.0.1

Please notice that if there is any plugin installed that depends on cordova-plugin-file you'll have to remove and re-add them too.

Note that this does not seem to prevent ionic --serve from serving a working app if you run gulp after npm run setup has failed with this error.

Cannot download "https://github.com/sass/node-sass/releases/download/v4.11.0/linux-x64-72_binding.node"

Force using node 11, since node-sass for node 12 is not yet avalaible. See [https://tracker.moodle.org/browse/MOBILE-2999 MOBILE-2999] for more info.

Mac: linker code failed with exit code 1

If you get this error when trying to build the Moodle app with XCode, some dependencies might not have installed correctly.

Ensure you have followed the Mac only: Push notifications steps above (particularly opening the .xcworkspace file rather than the .xcodeproj file). Then run the following:

 npm run setup
 cd platforms/ios
 pod install

Now try running the build again in XCode.

Windows: npm run ionic:serve hangs after "Starting 'watch'"

This appears to have happened since the move to npx. Try running the npx commands generated by npm run directly in bash:

 npx gulp watch & npx ionic-app-scripts serve -b --devapp --address=0.0.0.0

See also

http://ionicframework.com/docs/cli/