3

I use SystemJS to build an Angular 2 application and I'd like to start using MathJax in a component. I installed with:

npm install --save-dev mathjax
npm install --save @types/mathjax

MathJax is now installed in /node_modules/mathjax. When my component does import "mathjax", the file /node_modules/mathjax/MathJax.js is loaded. So far so good.

Problem is that this file then tries to load other files using paths relative to the project root instead of the MathJax install directory.

For instance, MathJax.js tries to load 

/extensions/MathMenu.js  404 Not found
/extensions/MathZoom.js  404 Not found

The correct paths are

/node_modules/mathjax/extensions/MathMenu.js
/node_modules/mathjax/extensions/MathZoom.js

A quick look inside the source files show that the URLs are referred to this way:

[MathJax]/extensions/MathMenu.js

Any idea where I should look to fix this? I know I shouldn't alter the MathJax.js file itself since any change will be overwritten after an update. It also doesn't make sense to use htaccess or other server-side redirects.

I'm aware that I can load a working MathJax bundle by using the CDN: 

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_SVG"></script>

However I'm trying to learn how to integrate the library into my build setup.

BeetleJuice
  • 39,516
  • 19
  • 105
  • 165

1 Answers1

5

Simply put, you cannot integrate MathJax like this (at this time).

MathJax inludes a custom dynamic module loader designed to work all the way down to IE6; unsurprisingly, it does not work with contemporary build tools.

But very likely you also don't want to integrate MathJax in its entirety because that comes in at a couple of dozen megabytes (compressed). Now, in practice, you don't need all components, typically developers need 1 input + 1 output + 1 set of fonts which comes down to around ~500-600KB (compressed).

If that's a feasible pay load, then you could look into building a customized single-file build (such as this one) which you should be able to integrate.

For what it's worth, compatibility with contemporary build tools is a deliverable for MathJax v3.0 next year.

Full disclosure: I'm part of the MathJax team.

Peter Krautzberger
  • 5,145
  • 19
  • 31
  • Hi, any update on this now it's been 12+months? Can you guide me/us as to the best course of action to integrate MAthJax with a SystemJs application. The current npm version is still 2.*. If 3.0 isn't ready yet can you advise of likely timeframes? Many thanks! :-) – John Stephenson May 21 '18 at 10:03
  • @john [MathJax v3](https://github.com/mathjax/mathjax-v3/) is in beta now and should integrate easily. – Peter Krautzberger Aug 08 '18 at 06:25
  • That's awesome thanks for the update! Do you have a feel for when it'd be out of beta? Roughly. – John Stephenson Aug 08 '18 at 10:35