OpenSeadragon in Angular 7

Question

I am trying to get a basic example of OpenSeadragon v2.4 working in Angular 7. I have properly imported the npm module and it is working to some degree.

I am looking at this simple example here. Here is my code:

var duomo = {
  Image: {
    xmlns: "http://schemas.microsoft.com/deepzoom/2008",
    Url:  "//openseadragon.github.io/example-images/duomo/duomo_files/",
    Format: "jpg",
    Overlap: "2",
    TileSize: "256",
    Size: {
      Width: "13920",
      Height: "10200"
    }
  }
};
  var viewer = OpenSeadragon({
    element: this.viewer.nativeElement,
    prefixUrl: "//openseadragon.github.io/openseadragon/images/",
    showNavigator:true,
    tileSources: duomo
  });

When I run it, the canvas element is being created but the images don't seem to be loading in my component.

When I look at the Network tab under WebKit, it is finding the first file: http://openseadragon.github.io/example-images/highsmith/highsmith_files/1/0_0.jpg, which appears to be empty. The page is blank.

If I place an unreachable value for tileSources, image is not found but the zoom controls render.

Is the above code the proper way to reference the example url from my local machine? Why does only the first image/tile render? Is it looking for something else?

Answer 1

I found my own problem. I didn't add a width and height to the html element being used. Here is what I forgot:

<div id="seadragon-viewer" style="width:800px; height:600px;" #viewer></div>