Unable to use Mathml in Ionic2 - ionic2

Question

I want to use Mathml inside Ionic2, I have added mathjax cdn in the index.html, and added CUSTOM_ELEMENTS_SCHEMA in app.module.ts
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=MML_CHTML"></script>
in #NgModule i use
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ItemDetailsPage } from '../pages/item-details/item-details';
import { ListPage } from '../pages/list/list';
import {MathmlComponent} from '../components/mathml-component/mathml-component';
#NgModule({
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
MathmlComponent
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage
],
providers: [],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
My mathml-component.ts is
import {Component} from "#angular/core";
#Component({
selector:'mathml-component',
template:`
<math>
<mstyle displaystyle="true">
<mover>
<mrow>
<mi>f</mi>
</mrow>
<mo>→</mo>
</mover>
</mstyle>
</math>
`
})
export class MathmlComponent{
constructor(){
console.log('done')
}
}
But I am getting error
polyfills.js:3 Unhandled Promise rejection: Template parse errors:
':math:mi' is not a known element:
1. If ':math:mi' is an Angular component, then verify that it is part of this module.
2. If ':math:mi' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message. ("
<mover>
<mrow>
[ERROR ->]<mi>f</mi>
</mrow>
<mo>→</mo>
"): MathmlComponent#5:10
':math:mrow' is not a known element:
Plz help.

Answer 1

I found the solution. Instead of using MathMl I use Tex/Latex in MAthjax.