Ionic/Angular SQLite TypeOrm App

ionic-sqlite-typeorm-app

Ionic/Angular application demonstrating the use of the

@capacitor-community/sqlite

with the TypeORM ORM

this app uses Capacitor 4

Maintainers

Maintainer	GitHub	Social
Quéau Jean Pierre	jepiqueau

Installation

To start building your App using this App, clone this repo to a new directory:

git clone https://github.com/jepiqueau/ionic-sqlite-typeorm-app.git 
cd ionic-sqlite-typeorm-app
git remote rm origin

• then install it

npm install

• if you use the Electron platform

npm run electron:install

• the capacitor config parameters are:

  "appId": "com.jeep.app.ionic.angular.typeorm",
  "appName": "ionic-sqlite-typeorm-app",

Requirements for running TypeOrm

• the terser-webpack-plugin has been installed and a custom.webpack.config.js file has been added to be able to use the migration.

 var webpack = require('webpack');
 var TerserPlugin = require('terser-webpack-plugin')

 console.log('The custom config is used');
 module.exports = {
   optimization: {
     minimize: true,
     minimizer: [
       new TerserPlugin({
         terserOptions: {
           keep_classnames: true,
           keep_fnames: true,
         },
       }),
     ],
   },
   plugins: [
       new webpack.NormalModuleReplacementPlugin(/typeorm$/, function (result) {
           result.request = result.request.replace(/typeorm/, "typeorm/browser");
       })
   ],
 };

• the angular.json has been modified

  • replacing

    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "www",

  • by

    "architect": {
      "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
          "customWebpackConfig": {
            "path": "./custom.webpack.config.js"
          },
          "allowedCommonJsDependencies": [
            "debug",
            "buffer",
            "sha.js"
          ],
          "outputPath": "www",

  • and

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "app:build"
      },

  • by

    "serve": {
      "builder": "@angular-builders/custom-webpack:dev-server",
      "options": {
        "browserTarget": "app:build"
      },

Building Web Project

• development

  • angular cli

  npm run start

  • ionic cli

  ionic serve

• production

npm run build:web

Building Native Project with standard procedure

npm run build:native
npx cap sync
npx cap copy

- Android

npx cap open android

Once Android Studio launches, make sure that you are using

• Gradle JDK version 11
• Android Gradle Plugin Version 7.2.2

and build your app through the standard Android Studio workflow.

- iOS

npx cap open ios

Once Xcode launches, you can build your app through the standard Xcode workflow.

Building Native Project with Ionic Cli

- Android

npm run ionic:android

Once Android Studio launches, make sure that you are using

• Gradle JDK version 11
• Android Gradle Plugin Version 7.2.2

and build your app through the standard Android Studio workflow.

- iOS

npm run ionic:ios

Once Xcode launches, you can build your app through the standard Xcode workflow.

Building Electron Project

npm run electron:start

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!