Jmol and Angular Part 1 – adding Jmol to your project

(This is the first in a series of posts about adding Jmol to an Angular web application)

Adding Jmol to your Angular project is a bit untraditional. Jmol does not have an npm package. Since Jmol dynamically loads Javascript files based on user actions, creating an npm package for it is not trivial.

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 angular.json file:


    "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.

Note: Using 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.

Leave a Comment