Adding script causes issue with navigation

For an Angular project we would like to use embedded Ziggeo videos. In the index.html header I have added the necessary Ziggeo scripts as stated on their site:

<link rel="stylesheet" href="https://assets.ziggeo.com/v2-stable/ziggeo.css" />
<script src="https://assets.ziggeo.com/v2-stable/ziggeo.js"></script>
<script>
var ziggeoApp = new ZiggeoApi.V2.Application({
    token:"APPLICATION_TOKEN"
});
</script>

(https://ziggeo.com/docs/sdks/javascript/browser-integration/header)

This seems to work fine, I can see and play the videos. However, this causes the navigation of the site to malfunction. Every menu-item needs two clicks to navigate, and buttons with navigation stopped working entirely (they use router.navigate). I see the URL changing, but no navigation takes place. In the console, I see the error Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?. I cannot find anything regarding this error and adding scripts. I have disabled various other scripts in case they interfere with one another, but to no avail.

What am I missing?

Solution

Have you tried following the steps here: https://ziggeo.com/docs/sdks/javascript/integrations/angular

I know it is best not to make a reply of go there, however as I am part of Ziggeo team, I know that our goal is to always do our best to keep the resource available and updated. So I will copy the codes from the above page, however still suggest checking it for more details.

Alternatively you can also visit Github to check out the demo.

Grab the Ziggeo's Angular SDK from here: https://github.com/Ziggeo/angular-ziggeo and do npm install in your project folder.

If you are making UMD app you can just use import {ZiggeoModule} from 'angular-ziggeo' in your file to include Ziggeo.

That should be it, of course you should also remove the code you have added manually :)

The link I mentioned above would offer you a bit more details of course, really want to avoid copy pasting the page :)