I want to convert the html template that I buy to angular 5. The problem is when I put the code in the app.component.html the code not working properly the css is work but the js is not working. But when I copy all the code and put directly to the index.html it working. What is possible problem with this.
When put into app.component.html
When put into index.html
I was facing the same error when I got to know that once angular creates components, it renders dynamic JS. As I too was not likely to split all the JS files, Convert and place them seperately in app.component.ts of every component.
Here is an easy approach to achieve that.
export class AppComponent {
title = 'angapp';
constructor() {
this.loadScripts();
}
loadScripts() {
// This array contains all the files/CDNs
const dynamicScripts = [
'assets/js/jquery.min.js',
//Load all your script files here'
];
for (let i = 0; i < dynamicScripts.length; i++) {
const node = document.createElement('script');
node.src = dynamicScripts[i];
node.type = 'text/javascript';
node.async = false;
document.getElementsByTagName('head')[0].appendChild(node);
} } }
Replace your class AppComponent with this code in app.component.ts and place all your script files in dynamicScripts array in the same way as example is provided.
This worked for me. I hope it will solve your problem too.
You have to put your html code in app.component.html and your css code in app.component.css and your js code in app.component.ts.
