Angular 12 Type Error

Moin,

i use Angular 12 and created a treeshakable service for Moralis. I import Moralis like this:

import Moralis from 'moralis/types';

Moralis.initialize(environment.moralis.id);

Moralis.serverURL = environment.moralis.server;
@Injectable({
  providedIn: 'root'
})

Running the ng serve cli command throws the following error

./src/app/web3/moralis.service.ts:2:0-36 - Error: Module not found: Error: Can't resolve 'moralis/types' in 'D:\webdev\projects\maischein\src\app\web3'

Error: node_modules/moralis/types/generated/web3Api.d.ts:1714:56 - error TS2339: Property 'parameters' does not exist 
on type '{ responses: { 200: { content: { "application/json": { path: string; }[]; }; }; }; requestBody: { content: { 
"application/json": { path: string; content: string; }[]; }; }; }'.

1714     uploadFolder: (options: operations["uploadFolder"]["parameters"]["query"] ) => Promise<operations["uploadFolder"]["responses"]["200"]["content"]["application/json"]>;

Looks like the way i import the module is wrong. What is the correct way to import the Moralis npm package?

regards
lars

my package.json

  "dependencies": {
    "@angular/animations": "~12.2.3",
    "@angular/cdk": "^12.2.3",
    "@angular/common": "~12.2.3",
    "@angular/compiler": "~12.2.3",
    "@angular/core": "~12.2.3",
    "@angular/fire": "^6.1.5",
    "@angular/flex-layout": "^12.0.0-beta.34",
    "@angular/forms": "~12.2.3",
    "@angular/material": "^12.2.3",
    "@angular/platform-browser": "~12.2.3",
    "@angular/platform-browser-dynamic": "~12.2.3",
    "@angular/router": "~12.2.3",
    "@walletconnect/web3-provider": "^1.6.6",
    "assert": "^2.0.0",
    "axios": "^0.23.0",
    "crypto-browserify": "^3.12.0",
    "https-browserify": "^1.0.0",
    "moralis": "0.0.88",
    "ng-animate": "^1.0.0",
    "ng-recaptcha": "^8.0.1",
    "os-browserify": "^0.3.0",
    "rxjs": "~6.6.0",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.1200.0",
    "@angular-devkit/build-angular": "~12.2.3",
    "@angular/cli": "~12.2.3",
    "@angular/compiler-cli": "~12.2.3",
    "@types/fullpage.js": "^2.9.3",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "firebase-tools": "^9.0.0",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1",
    "jasmine-core": "~3.8.0",
    "jsonc-parser": "^3.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "open": "^7.0.3",
    "typescript": "~4.3.2"
  }
}
1 Like

Hi @lars

Currently our SDK is not optimized for angular. I suggest you to import it via <script>

Hi Yomoo,
ok, thx. Are you planning to optimize it? Is there a way to use the Type Definitions with the script Tag?

Of course, we are already working on optimiztion. Take a look at community boilerplate https://github.com/MoralisWeb3/demo-apps/tree/main/angular-moralis