Angular 11 HTML Template to Angular

Question

I have been trying to transfer the Porto Admin HTML template to Angular. I add the CSS and JS dependencies for the template, and when I am running it with all the html code in index.html everything works. As soon as I move the code to app.component.html everything breaks. I tried ViewEncapsulation set to None but that doesnt change anything. I am thinking it might be how the angular pipeline runs? I even tried manually injecting the scripts from app.module.ts Any ideas of what might be the cause and how I can get it done? I also changed the selector for app-root to "[app-root]" and injected it to the element. That failed as well.

Edit: Here is a repository link to a cleaned up simplified codebase. https://github.com/EliasKokkinos/porto-admin-angular

I cant share the assets for obvious reasons. But basically if you move the html from app-root (app.component.html) to index.html it works just fine.

Answer 1

2 issues, the people that made Porto Admin Template have random script segments in their html which does not run inside a component for security reasons. And finally it looks like that app-root is added after the index scripts so some of the JS lookups fail.

Takeaways:

1. Angular 2/6-11 Components block scripts from the.html for security.

2. And what seems to be the case is that Angular creates the page from the index.html and then load what is under app-root, so the JS files that aimed at elements via id, class, name execute before the rest of the document is inserted, thus failing. I did a AfterViewInit injection of the files

    ngAfterViewInit(): void { let script: any = []; let sources: any[]; sources = [ "/assets/js/theme.js", "/assets/js/theme.init.js", "/assets/js/examples/examples.dashboard.js" ] for (let index = 0; index < sources.length; index++) { script[index] = document.createElement('script'); document.body.appendChild(script[index]); script[index].id = "dynamic-assets" + index; script[index].src = sources[index]; } }