(This is the first in a series of posts about adding Jmol to an Angular web application)
Importing Jmol is not easily done. All the Jmol examples ask you to add a
<script> tag with the base Jmol file. When you initialize a Jmol web application, you need to supply a path on your server where the Jmol files reside. Jmol then uses this prefix to download other files dynamically.
We decided the best way to work with Jmol was not to fight it. If Jmol wants a
<script> tag, we should give it one. If Jmol needs all its other files to be accessible from the client, we should make them accessible. Turns out both were very easy to do in Angular.
First thing we did was add all the relevant Jmol files to the Angular assets folder. We have created a
src/assets/jsmol folder in our project, places the
JSmol.min.js file there, as well as the entire
j2s subdirectory there. We took these files from the Jmol distribution zip file.
Then we told Angular to include the file, by adding the following to
"scripts": [ "src/assets/jsmol/JSmol.min.js" ]
This made sure Jmol was loaded properly, and that we had the
Jmol object in the public namespace.
When we initialized Jmol we have added
j2spath: "/assets/jsmol/j2s" to its configuration object.
Jmol by itself causes a Typescript error, as it is undefined. We added
declare var Jmol: any;
to the top of the Angular component that used Jmol, and took care of that.