NativeScript 7 with sqlite and typeorm

Question

For a little test project i've tried to start a NativeScript (Angular flavor) with a sqlite db and typeorm.

ns create sample-typeorm --ng
cd sample-typeorm
ns plugin add nativescript-sqlite
npm i typeorm stream-browserify timers-browserify

Because of the missing nodejs modules "stream" and "timers" my tsconfig.json looks like

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es2017",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noEmitHelpers": true,
    "noEmitOnError": true,
    "skipLibCheck": true,
    "lib": [
      "es2018",
      "es2017",
      "dom",
      "es6"
    ],
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "app/*"
      ],
      "timers": [
        "node_modules/timers-browserify"
      ],
      "stream": [
        "node_modules/stream-browserify"
      ]
    }
  },
  "include": [
    "src/tests/**/*.ts",
    "src/**/*.ios.ts",
    "src/**/*.android.ts"
  ],
  "files": [
    "./references.d.ts",
    "./src/main.ts"
  ],
  "exclude": [
    "node_modules",
    "platforms",
    "e2e"
  ]
}

To start the typoeorm/sqlite test, i added in my src/main.ts the "createConnection" stuff:

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import {platformNativeScriptDynamic} from "@nativescript/angular";

import {AppModule} from "./app/app.module";
import {createConnection} from "typeorm/browser";

let driver = require('nativescript-sqlite');

platformNativeScriptDynamic().bootstrapModule(AppModule);


(async () => {
    try {
        const connection = await createConnection({
            database: 'test.db',
            type: 'nativescript',
            entities: [
                //... whatever entities you have
            ],
            driver,
            logging: true,
            synchronize: false
        })
    } catch (e) {
        console.error(e)
    }
    ;
})();

I startet the app

ns run ios --emulator

After a little bit of working time for the build system the following error appear:

ERROR in ../node_modules/app-root-path/lib/resolve.js
Module not found: Error: Can't resolve 'module' in '/private/tmp/sample-typeorm/node_modules/app-root-path/lib'
 @ ../node_modules/app-root-path/lib/resolve.js 7:18-35
 @ ../node_modules/app-root-path/lib/app-root-path.js
 @ ../node_modules/app-root-path/index.js
 @ ../node_modules/typeorm/browser/connection/ConnectionOptionsReader.js
 @ ../node_modules/typeorm/browser/index.js
 @ ./main.ts

In the node_modules/app-root-path/lib/resolve.js is the source of the error:

var globalPaths = require('module').globalPaths;

Is there a browserify equivalent for the "module" module? Or is there an option for the webpack to avoid this error?

To get a step forward i modified the resolve.js to skip the "module" and ran into the next error, which let me thinking about that i have another missing/miss configured webpack option:

Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught TypeError: Cannot destructure property 'env' of 'global.process' as it is undefined.
at
../node_modules/supports-color/index.js(file: node_modules/supports-color/index.js:6:7)

In the node_modules/supports-color/index.js is this:

const {env} = process;

The webpack.config.js is untouched from the "ns create ...". Have anyone a running typeorm sample for NativeScript 7? Or an idea which module is missing?

Answer 1

I have been able to get it working by downgrading typeorm to version 0.2.25. I found the build starts throwing errors from tyeporm 0.2.26 onwards (not sure what the issue is there). Here is what my package.json looks like, all other starter template files were untouched.

package.json

{
  "name": "@nativescript/template-blank-ng",
  "main": "main.js",
  "displayName": "Blank",
  "templateType": "App template",
  "version": "7.0.8",
  "description": "NativeScript Application",
  "author": "NativeScript Team <[email protected]>",
  "license": "SEE LICENSE IN <your-license-filename>",
  "publishConfig": {
    "access": "public"
  },
  "keywords": [
    "nstudio",
    "nativescript",
    "mobile",
    "angular",
    "{N}",
    "tns",
    "template",
    "category-general"
  ],
  "repository": "<fill-your-repository-here>",
  "homepage": "https://github.com/NativeScript/nativescript-app-templates",
  "bugs": {
    "url": "https://github.com/NativeScript/NativeScript/issues"
  },
  "dependencies": {
    "@angular/animations": "~11.0.0",
    "@angular/common": "~11.0.0",
    "@angular/compiler": "~11.0.0",
    "@angular/core": "~11.0.0",
    "@angular/forms": "~11.0.0",
    "@angular/platform-browser": "~11.0.0",
    "@angular/platform-browser-dynamic": "~11.0.0",
    "@angular/router": "~11.0.0",
    "@nativescript/angular": "~11.0.0",
    "@nativescript/core": "~7.1.0",
    "@nativescript/theme": "~3.0.0",
    "nativescript-nodeify": "^0.8.0",
    "nativescript-sqlite": "^2.6.6",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.6.0",
    "typeorm": "0.2.25",
    "zone.js": "~0.11.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~11.0.0",
    "@nativescript/android": "7.0.1",
    "@nativescript/webpack": "~4.0.0",
    "@ngtools/webpack": "~11.0.0",
    "typescript": "~4.0.0"
  },
  "private": "true",
  "readme": "NativeScript Application"
}

The code (OrmConfig.ts) to start the db is as follows:

import { createConnection } from 'typeorm/browser';
import { LocalAppUser } from './home/LocalAppUser';

// need the commercial version for types
const driver = require('nativescript-sqlite');

export class OrmConfig {

    static async init(): Promise<void> {
        try {

            const connection = await createConnection({
                //multithreading: true,
                database: 'local.db',
                type: 'nativescript',
                driver,
                entities: [
                    LocalAppUser
                ],
                logging: ["schema","error"]
            });
            // setting true will drop tables and recreate
            await connection.synchronize(false);

        } catch (err) {
            console.error(err);
        }
    }

}

which is loaded in main.ts like so

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { platformNativeScriptDynamic } from "@nativescript/angular";

import { AppModule } from "./app/app.module";
import { OrmConfig } from './app/OrmConfig';

(async () => {
    await OrmConfig.init();
})();

platformNativeScriptDynamic().bootstrapModule(AppModule);