Angular 5: Js not working on app.component.html

Question

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

Answer 1

您必须将 html 代码放在app.component.html ，将 css 代码放在app.component.css ，将 js 代码放在app.component.ts 。

Answer 2

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.