Copy a module to another app

Import the Tinder Cards into your Ionic app

For demonstration purpose, let's say you have just created a fresh Ionic app and you want to import Tinder Cards module into it. You can follow the below steps to achieve this, and all other feature import will work in a similar fashion.

Locate the Module

Locate the module under app -> app-themes -> tinder. Notice that tinder is an independent module with its own services and components.

Copy the Module folder

Copy-paste the folder in your newly created Ionic app

Copied Tinder module in a fresh Ionic app

All services and data are copied with the module.

Install dependencies

Because dependencies are installed from package.json , it cannot be attached in the module. Look for any unmet dependency in the .ts files. In case of Tinder, you'll see following in tinder/pages/home/home.module.ts

Find this dependency in Ionic Full App package.json to confirm the version. Also, check if there are any associated (similar name) packages. E.g. Cordova plugins generally have a Cordova plugin dependency and one ionic-native dependency - "cordova-plugin-geolocation": "^4.0.2" and "@ionic-native/geolocation": "^5.21.6"

Add these dependencies in your app's package.json and run npm i again.

Although, only angular2-swing was required in the module, we added ionic-swing to provide for an underlying library underscore for the feature. You would realize such requirements if you see any errors in the console.

Styles

All pages have their styling included within the folder, so you don't need to copy any styles. If there is any style inferred from global.scss or variables.scss you might need to copy that. As a general thumb rule, if you are not editing global.scss or variables.scss in your app, it's better to copy both these files from the Full App and replace in your Ionic app in respective locations.

Routing

Since we copied the entire module to the new app, the internal routing of the module will stay the same. We only need to attach the copied module in app.module.ts with an import, and also add the module to imports

import { TinderModule } from './tinder/tinder.module';

@NgModule({
  declarations: [..],
  entryComponents: [...],
  imports: [..., TinderModule],
  ...
})

If there is a modal component included in your copied module, you might need to import the modal component in app.module.ts as well, and add the component in declarations and entryComponents array.

Assets

If there are images attached to a module, just copy those from the assets folder to your own app. You can always add your own image in the required location as well. For our Tinder example, we will copy the assets/tinder folder from Full App to the new app.

tinder module assets in Full App - Copy and paste in new app

With these changes, you Tinder module is good to go in the new app !

You might need to add (window as any).global = window; in your polyfill.ts to avoid global variable errors. This quirk is very specific for Tinder module. Other modules should be easier to copy.