Copy a module to another app
Last updated
Last updated
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 under app -> app-themes -> tinder. Notice that tinder is an independent module with its own services and components.
Copy-paste the folder in your newly created Ionic app
All services and data are copied with the module.
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.
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.
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
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.
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.
