Angular 5 - Loading Script After View Is Loaded

Question

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 component, and it has to be loaded only after the view of the component 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.component.html',
  styleUrls: ['./player-page.component.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?

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
– 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
– Poul Kruijt, Commented Jul 3, 2018 at 8:27
ERROR in src/app/player-page/player-page.component.ts(14,5): error TS2304: Cannot find name 'require'. @PierreDuc thanks for the help. I changed it to ngAfterViewInit — Tal Humy
– Tal Humy, Commented Jul 3, 2018 at 8:49
@Jorgeblom - Angular ignore script tags in components HTML as far as I know — Tal Humy
– Tal Humy, Commented Jul 3, 2018 at 8:51
@TalHumy just add declare const require: any; on top of your component, you can also use the standard typescript dynamic import: import('assets/scripts/player/player.js'); — Poul Kruijt
– Poul Kruijt, Commented Jul 3, 2018 at 8:57

Poul Kruijt · Accepted Answer · 2018-07-03 09:02:05Z

5

There are multiple solutions to this issue.

declare the require const on top of your component

declare const require: any;

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

@Component({})
...

use the dynamic import() function from typescript

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

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

answered Jul 3, 2018 at 9:02

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tal Humy Over a year ago

Using import solved it - so simple I don't know why I used require. The third option is great but it will force me to change other projects. Thank you very much

Collectives™ on Stack Overflow

Angular 5 - Loading Script After View Is Loaded

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related