Angular 8 - how to invoke global method?

Question

I use Angular 8 and I try to use svg icons that I've downloaded (.js library).

In my .angular.json file I added:

"scripts": [
    "node_modules/csspatternlibrary3/js/site-utils.js",
    "node_modules/csspatternlibrary3/js/svg-cache.js",
    "node_modules/csspatternlibrary3/js/svg-url.js"
]

and

"assets": [
    {
        "glob": "**/favicon.ico",
        "input": "./src",
        "output": "./assets"
    },
    "src/favicon.ico",
    "src/assets",
    {
        "input": "/node_modules/csspatternlibrary3/svg/",
        "glob": "**/*latest.svg",
        "output": "./svg"
    },
...
]

And to be able to use svg icons the method brandcpl.initializeAllSvgIcons(); has to be invoked... The question is if I should somewhere invoke sth like

<script type="text/javascript">
  $( document ).ready(function() {
    brandcpl.initializeAllSvgIcons();
  });
</script>???

When I invoke brandcpl.initializeAllSvgIcons(); in the console after starting my app then I see my newly added SVG icons but I want to invoke this method when my app is loading...

UPDATE

After your recommendations:

1. I added:

   // add this to app.module.ts, providers: { provide: APP_INITIALIZER, useFactory: init, }

in my app.module.ts: ],

providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: RequestInterceptor,
    multi: true,
  },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ResponseInterceptor,
      multi: true,
    },
    {
      provide: APP_INITIALIZER,
      useFactory: init,
    },
    AppService,
    LocalDataService,
    ValidationService,

2. Added:

   // declare above the ngModule declaration or its own file.. export function init() { brandcpl.initializeAllSvgIcons(); }

in my home.component file:

import {Component, OnInit} from '@angular/core';
import {DataCenterService} from '@data-center/data-center.service';
import {Observable} from 'rxjs/internal/Observable';
// import * as brandcpl from '../../../assets/js/svg-url.js';

export function init() {
  (window as any).brandcpl.initializeAllSvgIcons();
}

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  hasPermissionToReview$: Observable<boolean>;

And I now I get the following errors:

    ERROR in ./node_modules/saucelabs/index.js
    Module not found: Error: Can't resolve './lib-cov/SauceLabs' in 'C:\Users\me\Documents\intellij_workspace\comp\edp-app\node_modules\sauce
    labs'
    ERROR in ./node_modules/protractor/built/debugger.js
    Module not found: Error: Can't resolve 'child_process' in 'C:\Users\me\Documents\intellij_workspace\comp\edp-app\node_modules\protractor\
    built'
    ERROR in ./node_modules/protractor/built/taskRunner.js
    Module not found: Error: Can't resolve 'child_process' in 'C:\Users\me\Documents\intellij_workspace\comp\edp-app\node_modules\protractor\
    built'
    ERROR in ./node_modules/protractor/built/runner.js
...
...

What I'm doing wrong?

Answer 1

Alright, u can try app initializer maybe.

// declare above the ngModule declaration or its own file..
export function init() {
   brandcpl.initializeAllSvgIcons();
}

// add this to app.module.ts, providers:
{
  provide: APP_INITIALIZER,
  useFactory: init,
}