How to load a global config file to Angular component before the view is loaded

If your config file is embed in your application, you can export your config file as an Injectable

In app.conf.ts

import { Injectable } from '@angular/core';

@Injectable()
export class APPCONFIG {
  "options" = {
    "pages": 5,
    "paginator": true,
    "rows": [
      "5",
      "10",
      "15",
      "20",
      "25",
      "30",
      "40",
      "50",
      "100"
    ],
    "perPage": 10,
    "sorting": true,
    "selection": true
  }
}

And import it directly in your service / component

import { APPCONFIG } from 'src/app/app.conf';

 constructor(private appConf: APPCONFIG) {
     console.log(this.appConf.options);
 }

Like APPCONFIG is an injectable don't forget to declared it as provider in your application or component

providers: [
  APPCONFIG
]