MathJax is not defined angular 4

Question

I have run command npm install mathjax and npm install --save @types/mathjax

and added reference of mathjax.js in angular-cli.json

"../node_modules/mathjax/mathjax.js?config=TeX-AMS-MML_HTMLorMML"

. I have created directive

import { Directive, Input, OnChanges, ElementRef } from '@angular/core';
    declare var MathJax: any;

    @Directive({
    selector: '[MathJax]'
    })
    export class MathJaxDirective implements OnChanges {

        @Input('MathJax') private value: string;

        constructor(private element: ElementRef) {

    }

    ngOnChanges() {

        // console.log('- onChange -');
        // console.log(this.value);

        this.element.nativeElement.innerHTML = this.value;
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.element.nativeElement]);
        }

    }

this showing error Mathjax ReferenceError: MathJax is not defined

I have added mathjax in types of tsconfig.app.json

        {
      "extends": "../tsconfig.json",
      "compilerOptions": {
        "outDir": "../out-tsc/app",
        "baseUrl": "./",
        "module": "es2015",
        "types": [
          "mathjax"
        ]
      },
      "exclude": [
        "test.ts",
        "**/*.spec.ts"
      ]
    }

Sundar Singh Sundar Singh · Accepted Answer · 2018-05-31T05:43:31

You are getting MathJax 'undefined' because it is not loaded to your browser. Either add

 <script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>

Or Replace

declare var MathJax: any;

with

import { MathJax } from 'mathjax';

And add "mathjax" to the types array in src/tsconfig.app.json.

MathJax is not defined angular 4

1 Answers