Gave errors - Module not found: Error: Can't resolve './additions' upon module bundling

[tim1016]

I was trying to make your package work with angular and faced problems. Please see initial discussion at stackoverflow.

I saw another issue in your repo which was related to webpack, which you said you will take a look later. It might fix that issue as well, since angular uses webpack.

I and a friend from reddit community tried and arrived at this fix (basically he found the fix)

My repo is now working with angular 9 (latest version). I am familiar with angular but the fix was done by another community user. will you please pull my repo and take a look.

Awesome work. Looking forward for the fix.

[tim1016]

I am adding his comments and highlighting what may be relevant to you.

I included citation.js in the angular.json file so citation would be included as an asset and not compiled with typescript. Can we make the package compile with Typescript.

On the component I used window.require instead of an import or plain require again because I didn't want typescript trying to compile citation-js. I saw at the top of citation.js it included an implementation of require.

Those were the two necessary changes to get it working. I also used async and await because angular will complain in the console if you don't. I assigned output to document.body.innerHTML so you can see the rendered results instead of seeing html in the console.

[larsgw]

I saw at the top of citation.js it included an implementation of require.

That is probably an artifact of Browserify, which I use to make browser builds, so I think only one of the two points has to be solved?

Can we make the package compile with Typescript?

I would love that, but I don't really know much about Typescript (or Angular). The JSON problem seems to solved on StackOverflow but you mention some other issues. What else is going wrong?

I also used async and await because angular will complain in the console if you don't.

Fetching web resources synchronously requires a synchronous XMLHttpRequest, which are deprecated. I think the browser was complaining about that? Anyway, there's not much I can do about that. There's probably some way to run asynchronous code in Angular in a nicer way, right?

[tim1016]

Bottomline is that it does not play well with Typescript compiler. It is not an issue related to the package. Just that people have to jump some hoops to get it working.

async-await are pretty common these days. No worries at all. The stack-overflow post was created before I wrote to you. I modified the stack overflow post as following:

citation-js package however has been developed with Browserify and does not like Typescript compiler. It does not play well with Webpack, which is the default bundler for Angular. So to use it with angular:

On the component I used window.require instead of an import or plain require again because I didn't want typescript trying to compile citation-js. I saw at the top of citation.js it included an implementation of require, which may be a browserify artifact. So bottomline is disable typescript compilation by including it in the assets.

You may close this issue.