Getting MathJax working on an angular cli project

Question

I would like to be able to use MathJax on my @angular/cli project. I previously had an Angular 2 project that used systemjs where this was not a problem. angular cli switched to using webpack, however, and I can't seem to get this new project working.

I believe I followed all the instructions for global library installation as described here, but it's possible I'm misunderstanding something.

I built a repo that demonstrated what's happening. It can be seen here.

Basically, what I've done is install @angular/cli and set yarn as its default package manager.

I started the project with

ng new math-bug

I installed dependencies with

yarn add express body-parser mathjax mongoose
yarn add @types\mathjax --dev

I modified the file .angular-cli.json, adding the following to the scripts array (previously empty).

"../node_modules/mathjax/MathJax.js"

I added a component to my project that uses the line:

"MathJax.Hub.Queue([ "Typeset", MathJax.Hub, this.id]);"

But when I try to build my project with ng build, I get the following error: When I build my project I get the error:

ERROR in C:/Users/Pat/ProgrammingProjects/math-bug/src/app/latex/latex.component.ts (23,9): Cannot find name 'MathJax'.
C:/Users/Pat/ProgrammingProjects/math-bug/src/app/latex/latex.component.ts (23,40): Cannot find name 'MathJax'.

Extra information if it's helpful - I'm running this on Windows 10 and when I run ng --version, this is the output:

@angular/cli: 1.0.0
node: 7.2.1
os: win32 x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

This fixed some of my problems but MathMenu.js and MathZoom.js extensions cannot be found how did you go around that? — Maciej Caputa, Jun 23 '17 at 07:59

score 1 · Accepted Answer · answered Apr 03 '17 at 12:13

1

in src/tsconfig.app.json add mathjax to types as follows:

"types": ["mathjax"]

if you also plan on using mathjax for testing add the same thing to src/tsconfig.spec.json

Read here on types: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types

answered Apr 03 '17 at 12:13

Ahmed Musallam

9,523
4
27
47

Thanks. Fixed my problem! – Pat Apr 04 '17 at 14:50
1

This fixed some of my problems but MathMenu.js and MathZoom.js extensions cannot be found how did you go around that? – Maciej Caputa Jun 23 '17 at 07:59

Getting MathJax working on an angular cli project

1 Answers1