How to Create Eleactron app with Angular 11, TypeORM and SQLite3 (2021.01)

typorm-sqlite-electron-angular.md

Electron - Angular 11 - SQLite3 - TypeORM

Angular 11 implementation of CubikNeRubik angular-electron-typeorm-starter project

Create Angular Application Using Angular CLI

ng new APP-NAME --routing --style=scss

Add New Dependencies

{
  "dependencies": {
    "sqlite3": "^5.0.0",
    "typeorm": "^0.2.29"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^11.0.0",
    "@angular-devkit/architect": "^0.1100.5",
    "@angular-devkit/build-angular": "^0.1100.5",
    "@angular-devkit/core": "^11.0.5",
    "@angular/animations": "~11.0.5",
    "@angular/cli": "~11.0.5",
    "@angular/common": "~11.0.5",
    "@angular/compiler": "~11.0.5",
    "@angular/compiler-cli": "~11.0.5",
    "@angular/core": "~11.0.5",
    "@angular/forms": "~11.0.5",
    "@angular/platform-browser": "~11.0.5",
    "@angular/platform-browser-dynamic": "~11.0.5",
    "@angular/router": "~11.0.5",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "angular-cli-builders": "^2.1.2",
    "codelyzer": "^6.0.0",
    "commonjs": "0.0.1",
    "copy-webpack-plugin": "^7.0.0",
    "electron": "^11.1.1",
    "electron-builder": "^22.9.1",
    "electron-reload": "^1.5.0",
    "fs": "0.0.1-security",
    "hammerjs": "^2.0.8",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "npm-run-all": "^4.1.5",
    "protractor": "~7.0.0",
    "rxjs": "~6.6.0",
    "ts-node": "~8.3.0",
    "tslib": "^2.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2",
    "wait-on": "^5.2.1",
    "zone.js": "~0.10.2"
  }
}

Create Electron App ~/main.ts

import {app, BrowserWindow} from 'electron';
import * as url from 'url';
import * as path from 'path';

let mainWindow: BrowserWindow = null;

// Detect serve mode (Development mode)
const args = process.argv.slice(1);
let serve: boolean = args.some(val => val === '--serve');

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
    },
  });
  mainWindow.maximize();

  if (serve) {
    require('electron-reload')(__dirname, {
      electron: require(`${__dirname}/node_modules/electron`),
    });
    mainWindow.loadURL('http://localhost:4200');
    mainWindow.show();
    mainWindow.webContents.openDevTools();
  } else {
    mainWindow.loadURL(
      url.format({
        pathname: path.join(__dirname, `/dist/index.html`),
        protocol: 'file',
        slashes: true,
      }),
    );
  }

  mainWindow.on('closed', () => {
    mainWindow = null;
  });

}

try {

  app.on('ready', createWindow);

  app.on('activate', () => {
    if (mainWindow === null) {
      console.log('main window null');
      createWindow();
    }
  });
} catch (e) {
  console.log(e);
}

Add Electron Builder Configuration ~/electron-builder.json

{
  "productName": "Project-Name",
  "directories": {
    "output": "prod"
  },
  "files": [
    "**/*",
    "!*.ts",
    "!*.code-workspace",
    "!LICENSE.md",
    "!package.json",
    "!package-lock.json",
    "!src/",
    "!e2e/",
    "!hooks/",
    "!.angular-cli.json",
    "!_config.yml",
    "!karma.conf.js",
    "!tsconfig.app.json",
    "!tsconfig.json",
    "!tsconfig.spec.json",
    "!tslint.json"
  ],
  "win": {
    "icon": "dist/assets/icons",
    "target": [
      "portable"
    ]
  },
  "mac": {
    "icon": "dist",
    "target": [
      "dmg"
    ]
  },
  "linux": {
    "icon": "dist",
    "target": [
      "AppImage"
    ]
  }
}

Update package.json

{
  "main": "main.js"
}

Add Post Install Configs

• postinstall.js

const fs = require('fs');
const f_angular = 'node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js';
const {getConfigs} = require('./postinstall.config');

const {electronConfig} = getConfigs();
fs.readFile(f_angular, 'utf8', function (err, data) {

  if (err) {
    return console.log(err);
  }

  let result = data.replace(/return {[\s\S]+?$/m, 'return {');
  result = result.replace(/target: "web", /g, '');
  result = result.replace(/return \{/g, 'return {' + electronConfig);

  fs.writeFile(f_angular, result, 'utf8', function (err) {
    if (err) return console.log(err);
  });
});

• postinstall-web.js

const fs = require('fs');
const f_angular = 'node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js';
const {getConfigs} = require('./postinstall.config');

const {webConfig} = getConfigs();
fs.readFile(f_angular, 'utf8', function (err, data) {

  if (err) {
    return console.log(err);
  }

  let result = data.replace(/return {[\s\S]+?$/m, 'return {');
  result = result.replace(/target: "web",/g, '');
  result = result.replace(/return \{/g, 'return {' + webConfig);

  fs.writeFile(f_angular, result, 'utf8', function (err) {
    if (err) return console.log(err);
  });
});

• postinstall.config.js

const config = require('./extra-webpack.config.js');

module.exports.getConfigs = function () {
  config.target = 'electron-renderer';
  electronConfig = JSON.stringify(config).slice(1, -1) + ',';

  config.target = 'web';
  webConfig = JSON.stringify(config).slice(1, -1) + ',';

  return {
    electronConfig,
    webConfig
  };
};

Add Webpack Configs

• extra-webpack.config.js

const path = require('path');

module.exports = {
  target: 'electron-renderer',
  externals: {
    typeorm: "require('typeorm')",
    sqlite3: "require('sqlite3')",
  },
  resolve: {
    alias: {
      typeorm: path.resolve(__dirname, "../node_modules/typeorm/typeorm-model-shim")
    }
  }
};

Update Scripts

{
  "scripts": {
    "build": "npm run postinstall:electron && npm run electron:tsc && ng build",
    "build:dev": "npm run build -- -c dev",
    "build:prod": "npm run build -- -c production",
    "electron:tsc": "tsc main.ts",
    "electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:tsc && electron ./ --serve",
    "electron:local": "npm run build:prod && electron .",
    "electron:linux": "npm run build:prod && npx electron-builder build --linux",
    "electron:windows": "npm run build:prod && npx electron-builder build --windows",
    "electron:mac": "npm run build:prod && npx electron-builder build --mac",
    "start": "npm run postinstall:electron && npm-run-all -p ng:serve electron:serve",
    "ng:serve": "ng serve",
    "ng:serve:web": "npm run postinstall:web && npm run electron:tsc  && ng serve -o",
    "postinstall": "npm run postinstall:electron && npx electron-builder install-app-deps",
    "postinstall:web": "node postinstall-web",
    "postinstall:electron": "node postinstall"
  }
}

Run npm install

Create Database Service

ng g s database/database

Create an entity for test TypeORM and SQLite3

import {BaseEntity, Column, Entity, PrimaryGeneratedColumn} from "typeorm";

@Entity({name: 'user'})
export class User extends BaseEntity {
  @PrimaryGeneratedColumn('uuid')
  uuid: string

  @Column()
  username: string
}

Update database.service.ts

import {Injectable} from '@angular/core';
import {Connection, ConnectionOptions, createConnection} from 'typeorm';
import {User} from './models/user.entity';

@Injectable({
  providedIn: 'root'
})
export class DatabaseService {

  public connection: Promise<Connection>;
  private readonly options: ConnectionOptions;

  constructor() {
    this.options = {
      type: 'sqlite',
      database: 'database.db',
      entities: [User],
      synchronize: true,
      logging: 'all'
    };
    this.connection = createConnection(this.options);
  }
}

Update app.component.ts

import {Component} from '@angular/core';
import {DatabaseService} from './database/database.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app-name';

  constructor(private databaseService: DatabaseService) {
    this.databaseService.connection.then(() => {
      console.log("Database Connection Successful");
    })
  }
}

Update tsconfig.json

{
  "compileOnSave": false,
  "buildOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "skipLibCheck": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Update src/index.html

<head>
  <base href="">
</head>

Run npm start

I dont seem to be able to do this with angular 13. node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js'; is not present on angular 13.

Any idea on how to implement this?

Can you please provide an full example?

@djonmayer clone this repo, apply the changes on this gist and npm i && npm start