SDK not working with Ionic 5 / Angular framework

[varun-yp]

Describe the bug matrix-js-sdk is not working with Ionic 5 or Angular framework.

To Reproduce

1. Install ionic and select angular as javascript framework

   npm install -g @ionic/cli
   ionic start

2. Navigate into the project and install matrix-js-sdk and its typings

   yarn add matrix-js-sdk
   npm install @types/matrix-js-sdk -D

3. Modify tsconfig.json to add following path and exclude details

   // tsconfig.json
   {
   "compilerOptions": {
   "paths": {
   "matrix-js-sdk": [
     "node_modules/@types/matrix-js-sdk/index.d.ts"
   ],
   }
   }
   "exclude": ["node_modules/matrix-js-sdk/lib/*.d.ts"]
   }

4. Modify app.components.ts to import and use the sdk.

   import * as sdk from 'matrix-js-sdk';
   ...
   export class AppComponent {
   constructor() {
   const client = sdk.createClient('https://matrix.org');
   }
   }

   Expected behavior Expected the client to be created and started, but got webpack module error (screenshot attached), informing createClient is not a function. The same does not work on standalone angular framework as well.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 95.0.4638.54

Additional context Any help on its usage or workaround for Ionic 5 / Angular framework will be helpful.

[enekonieto]

I think outdated typings is causing the error, they are 6 months behind current sdk. The sdk has been mostly migrated to typescript (currently 75%), so I think typings are not useful anymore. Delete them with npm uninstall @types/matrix-js-sdk and update a bit your code to correct some typings errors.

In angular 13 I had to add "allowSyntheticDefaultImports": true in compilerOptions in tsconfig.json file to avoid a couple of compilation errors.

libolm in https://packages.matrix.org/npm seems outdated, I had to install from https://gitlab.matrix.org/matrix-org/olm

echo @matrix-org:registry=https://gitlab.matrix.org/api/v4/packages/npm/ >> .npmrc
npm i @matrix-org/olm

Lastly, I had a Error: node_modules/matrix-js-sdk/lib/client.d.ts:1:23 - error TS2688: Cannot find type definition file for 'request'. error. For now I fixed deleting that line.

Hope it helps

P.S: currently I am refactoring a project of mine, compilation errors are gone but at this time I cannot test if this works