ca.select(...).from is not a function after minification

Question

In my Angular app I'm using squel.js and it works fine when used in development mode.

However when I build my app for production and try to use it, I get the following error:

ca.select(...).from is not a function

which in the non-minified code corresponds to:

import * as squel from 'squel';

// ...

squel.select().from(...)

Answer 1

The issue is caused by a bug in squel.js that prevents from using it after being minified.

Solution (workaround)

1) Include sqlite as a script in angular.json instead of using import by adding it to the scripts array of projects.myAppName.architect.build.options:

"scripts": [
  "node_modules/squel/dist/squel.min.js"
]

Do the same for projects.myAppName.architect.test.options in order to fix the unit tests too.

---

2) Now the production bundle is fine, but we have to fix the typings so the ts compiler will work too.

Since we removed:

import * as squel from 'squel';

All types like squel.Insert will be broken.

We need to add:

declare const squel: Squel & {flavour: null};

Now all typings like squel.Insert, squel.Delete, etc... will be replaced by Insert, Delete, etc... and of course we need to import them:

import { Squel, Delete, Insert } from 'squel';

This way we use import only to import the type definitions and not the whole library.

Example

https://github.com/azerothcore/Keira3/commit/98f191eb59cf9c853dd8a54a845a029c7a4ddef8