Angular 12 Type Error

Technical Issue Reporting
#1

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
#2

Hi @lars

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

#3

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

#4

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

#5

Hi @Yomoo. Sorry to bump an old topic…

I see there has since been a repo created - https://github.com/MoralisWeb3/angular-moralis. Is there a timeframe on this?

Currently, I’ve implemented the boilerplate for angular as mentioned in the above reply. I’m trying to use Moralis.Plugins.opeansea.. but there is no documentation for the endpoints, etc. Will this be coming soon as I wish to implement the opensea plugin.

Thanks

#6

Hey @willroxby

Unfortunately, there are no updates on the Angular Boilerplate. But thank you for the question, we need to keep working on it.

What do you mean? The documenation is here