Ionic 5 Full Starter App
  • Enappd Apps
  • Ionic 5 Full App
    • What is Ionic 5 Full App?
    • Template Features
    • Initial Setup
      • Environment Configuration
      • Credentials
    • Running the app
    • Deploying app as PWA
    • Building App on device
    • How to use this template?
      • Copy a module to another app
      • Shared Component & Modules
      • Map Service
    • Beginner Pack Features
      • Firebase
      • Layouts
      • Sidemenus
      • Login and Signups
      • Chat screens
      • Chat Lists
      • Video Playlists
      • Grids and Lists Layouts
    • Startup Pack Features
      • Wordpress
        • Wordpress JSON API Basics
        • Wordpress in Ionic 5 Full App
      • Translation - Multi-language
      • Using Custom Fonts
      • Infinite scroll
      • Content Loaders
      • Pull to refresh
      • List re-ordering
      • Date Pickers
    • Pro Pack Features
      • Phaser Game Framework
      • AdMob Integration
        • AdMob Introduction
        • Setting up Google Admob
        • Integration
      • Social Sharing
      • QR and Barcode Scanning
      • Google Places
      • Google Autocomplete
      • Social Logins
        • Google Login
        • Facebook Login
        • Twitter Login
      • Woo-commerce Integration
    • Removing a Page / Component
    • Removing a plugin
    • FAQs
    • Changelog
    • Troubleshoot
Powered by GitBook
On this page

Was this helpful?

  1. Ionic 5 Full App
  2. How to use this template?

Copy a module to another app

PreviousHow to use this template?NextShared Component & Modules

Last updated 3 years ago

Was this helpful?

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

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.

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.

Copied Tinder module in a fresh Ionic app
tinder module assets in Full App - Copy and paste in new app