Copy a module to another app

Search…
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.
Ionic 5 Full App - Previous
How to use this template?
Shared Component & Modules
Last modified 1yr ago
Copy link
On this page
Import the Tinder Cards into your Ionic app