Module Sharing Ionic2

Sharing modules in Angular/TypeScript/Ionic — Working Procedure

Results from adapting MobiLoc to use the Front-end-common module

The tickets were LE-79, LE-80, and LE-82


  • Add ComponentsModule which is defined in FEC to the app.module.ts
  • Added the watch. and webpack.config.js alternatives that permit bringing in the FEC code (along with changes to tsconfig.json and package.json that were required)
  • Upon app initialization, check Auth service to see if we need to show Registration page.
  • May not be a problem for newer modules, but the older MobiLoc module needed this line to be added to the index.html:
<script src="build/vendor.js"></script>
  • Add required plugins to the package.json
 "cordova-plugin-ionic-webview": {},
 "cordova-plugin-customurlscheme": {
               "URL_SCHEME": "com.clueride",
               "ANDROID_SCHEME": "com.clueride",
               "ANDROID_HOST": "",
               "ANDROID_PATHPREFIX": "/cordova/com.clueride/callback"
 "cordova-plugin-safariviewcontroller": {},  // Maybe?
  • Add Callback to app.component.ts
import Auth0Cordova from "@auth0/cordova";
. . .
      /* Handles the return to the app after logging in at external site. */
      (<any>window).handleOpenURL = (url) => {

Ticket LE-82 covered a case specific to the Leaflet library (specifically, the CSS). Follow the that covers the markers component. I had thought this was broken by making the changes above, but instead, what had happened was I had blown away the node_modules and this wiped out my copy of the CSS => SCSS file.

For when we go to an NPM-based approach:

At a high level, the Ionic steps for building are set aside for the shared module, and replaced with steps for just turning the TypeScript into JavaScript and providing a 'dist' directory that contains the npm-supported artifacts — prior to any webpack. That module is then brought through the full Ionic build as if it were any other NPM module — when the apps are built.

One of the problems was the HTML files were ignored. Not good when I wanted to share pages.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License