Wrap the app in cordova

This is not the best approach to create an hybrid app since we can manage ionic in the same codebase with the standard app sharing models, services, dummy components and even controllers for the business logic

  • You have to create the cordova project

$ cordova create hello com.example.hello HelloWorld

in this way we'll keep the cordova project separate (different package.json and folder)

  • Then you've to add the platform and the plugins you need...

  • Then add in the gitignore of the angular project the following paths self-lens-cordova/node_modules self-lens-cordova/platforms self-lens-cordova/plugins self-lens-cordova/www

  • before to build the app you've to disable the differential loading that will create modules and non modules js assets. to to this you've to modify tsconfig.base.json like this "target": "es5", //"target": "es2015" this will disable es2015 bundles generation

  • to run the app you have to build the app, and copy the dist folder in the cordova-project/www folder

  • you have to do this changes in the index.html (the security is commented in the index of the boilerplate) Content security will not work for the web so you can't keep that in the angular app

    • <base href=".">

    • <meta http-equiv="Content-Security-Policy" content="default-src ; style-src 'unsafe-inline'; script-src 'unsafe-inline' 'unsafe-eval'; media-src ;">

  • When you run the app or run cordova prepare, cordova should inject in the index.html of the platform the cordova scripts but that seems to not work so you've to do this manually in that case. you've to add just before the body

    <script src="cordova.js" defer></script>
    <script src="cordova_plugins.js"
      defer></script>
      </body>

Last updated

Was this helpful?