I am having trouble when trying to integrate reveal.js into Angular 9.x. Not sure how to load libraries so they work ok when loading the view of any given component.
First of all, I have tried following the example of their webpage. There they load the scripts, styles and so on directly into the index.html file:
<html>
<head>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
<script src="js/reveal.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
hash: true,
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/highlight/highlight.js' },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>
That worked fine, I was able to load the presentation even though I experienced some styling issues. So far so good. However, it is obvious that as part of my application, I do not want to show the reveal.js presentation at the index.html, but under any component of my choice instead. Here comes the deal:
Next step was including libraries under Angular's assets folder: css, plugin, and themes. Add the html code to the html component and try to see the results. Back here I had two main issues: either the Angular compiler didn't find the libraries, to be more specific, those in the dependencies array, or I was experiencing some timming issues about the order in which those libraries are being loaded. Some of the plugins or even the main reveal.js library didn't initiate correctly. Also, here the styling problems where more acute. The view is a disaster.
I have read through the documentation looking for examples of any integrations with no luck. Maybe I am missing something simple about how to set up the environment and the correct way to load the html files, the css and the plugins.
Any ideas?