Importing JS package in Angular makes app to not render

Question

I have come across some strange behaviour by importing a package into my Angular project. I have imported the following package into my project: @citation-js/core. If I attempt to use it in a component, the app is unable to render the page, showing the loading circle (image below). No error is displayed and I am at a lost. Any help would be appreciated! Thank you!

I have not done anything else, then the following:

Command to install package

npm install @citation-js/core --save

Line that causes the page to not render

import { Cite } from "@citation-js/core";    
let json = await Cite.inputAsync("10.5281/zenodo.1005176");

What the page displays

Edit: Adding await to Cite.inputAsync

Answer 1

When using the package @citation-js/core the function Cite.inputAsync does not exist. In addition, the DOI plugin is not registered. You could instead use the package citation-js where the function does exist and the DOI plugin is automatically included, but that package is deprecated, quoting the README:

This repository contains the npm package citation-js that wraps [@citation-js/core and certain plugins] for backwards compatibility.

To get the same function from @citation-js/core you can do the following:

const { plugins } = require("@citation-js/core");
require("@citation-js/plugin-doi");

let json = plugins.input.chainAsync("10.5281/zenodo.1005176");

Note that this requires an additional dependency, @citation-js/plugin-doi.

Answer 2

inputAsync is returning a Promise, so you need to wait for the Promise to be settled:

let json = await Cite.inputAsync("10.5281/zenodo.1005176");