How to use Chrome Extension Api with Angular?

Question

I am working on a chrome extension, I have a "background.js" which it filters the url and fetchs data from my api. When the conditions is meet I am sending a message from "background.js". And I want to catch it from Angular component.

background.js

...
chrome.pageAction.show(tab.id, () => {
            chrome.runtime.sendMessage({data: dataFromAPI})
        });
...

I ran npm install --save @types/chrome.

app.component.ts

import {Component} from '@angular/core';
import {chrome} from '@types/chrome';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor() {
    chrome.runtime.onMessage.addListener( data => console.log(data));
  }

}

But WebStorm says, ".../node_modules/@types/chrome/index.d.ts' is not a module. "

How can I use Chrome Api from Angular Component?