I have a legacy script that I need to include in my angular application. The thing about this script is that it relates to a specific ponent, and it has to be loaded only after the view of the ponent is loaded. As for today, I succeeded to include it on OnInit function but sometimes (not always for some reason) the CLI throws an error about it.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-player-page',
  templateUrl: './player-pageponent.html',
  styleUrls: ['./player-pageponent.scss']
})
export class PlayerPageComponent implements OnInit {
  public itemId: string;
  
  constructor() {}

  ngOnInit() {
    //We loading the player srcript on after view is loaded
    require('assets/scripts/player/player.js');
  }

}

I have a legacy script that I need to include in my angular application. The thing about this script is that it relates to a specific ponent, and it has to be loaded only after the view of the ponent is loaded. As for today, I succeeded to include it on OnInit function but sometimes (not always for some reason) the CLI throws an error about it.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-player-page',
  templateUrl: './player-page.ponent.html',
  styleUrls: ['./player-page.ponent.scss']
})
export class PlayerPageComponent implements OnInit {
  public itemId: string;
  
  constructor() {}

  ngOnInit() {
    //We loading the player srcript on after view is loaded
    require('assets/scripts/player/player.js');
  }

}

The script assumes that elements in the UI exists and it searches them by the id. When adding it on top of the page, it doesn't work. What is the best way to achieve the desired behavior?

• javascript
• angular
• typescript

Share Improve this question Follow asked Jul 3, 2018 at 8:01 Tal HumyTal Humy 1,23722 gold badges2222 silver badges4545 bronze badges 5

• I had a similar problem with Google Maps. The solution I found was to create the <script> tag and inserting it in the head / body. – Jorgeblom Commented Jul 3, 2018 at 8:12
• What error does the cli throws? and on ngOnInit, the view is not rendered yet, you should use ngAfterViewInit. Probably wouldn't matter, because loading the js should take longer than the app to go from onInit to afterViewInit – Poul Kruijt Commented Jul 3, 2018 at 8:27
• ERROR in src/app/player-page/player-page.ponent.ts(14,5): error TS2304: Cannot find name 'require'. @PierreDuc thanks for the help. I changed it to ngAfterViewInit – Tal Humy Commented Jul 3, 2018 at 8:49
• @Jorgeblom - Angular ignore script tags in ponents HTML as far as I know – Tal Humy Commented Jul 3, 2018 at 8:51
• @TalHumy just add declare const require: any; on top of your ponent, you can also use the standard typescript dynamic import: import('assets/scripts/player/player.js'); – Poul Kruijt Commented Jul 3, 2018 at 8:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

There are multiple solutions to this issue.

1. declare the require const on top of your ponent

   declare const require: any;
   
   import { Component, OnInit } from '@angular/core';
   
   @Component({})
   ...
   

2. use the dynamic import() function from typescript

   ngAfterViewInit() {
     //We loading the player script on after view is loaded
     import('assets/scripts/player/player.js');
   }
   

3. change the library to only start running after you call a function from the ponent, this way you can add it to the scripts array of your angular.json