How can I import Web3.js into an Ionic 4 project?

Ionic Framework
1

I have been trying to import Web3 to Ionic v4 project for a while now.

I’m under :

System Version: macOS Mojave 10.14.6

npm: 6.9.0

node : 10.16.1

Steps to reproduce :

  1. Start a new Ionic Project :
    ionic start my-app blank --type=angular

  2. Install Web3 :
    npm install --save web3

  3. Install @types/web3 :
    npm install --save @types/web3

  4. Add some code :

import { Component } from ‘@angular/core’;
import { Web3 } from ‘web3’;

@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
})
export class HomePage {
w = new Web3(new Web3.providers.HttpProvider(‘https://rinkeby.infura.io/v3/...apikey…’));

constructor() {}

test(){
console.log(this.w);
}
}

Error logs:
Module ‘"…/…/…/…/…/…/…/…/…/Users/Admin/Desktop/Learn_Ionic/blockchain/my-app/node_modules/@types/web3"’ has no exported member ‘Web3’

This module can only be referenced with ECMAScript imports/exports by turning on the ‘allowSyntheticDefaultImports’ flag and referencing its default export.

How can I fix errors?