import self executing function to another class in typescript

Question

I am doing Hybrid AngularJS/Angular5 application. So I am trying step by step change my JavaScript files to Typescript. I had javascript file :

(function () {
    'use strict';

    var domainPath = "http://localhost:26264/";
    var reportAPI = "http://localhost:58629/";
    var onlineHelpURL = "http://localhost:8085/";
    var hh6ServiceUrl = "https://localhost:40100/";

    var sysSettings = {
        webServiceURL: domainPath,
        hh6ServiceUrl: hh6ServiceUrl,
        reportServiceURL: reportAPI,
        onlineHelpURL: onlineHelpURL
    };

    angular.module('app.sysSettings', []).constant("sysSettings", sysSettings);
})();  

and I changed it in typescript to be able to export it and reuse settings in my typescript files :

declare var angular: any;

let sysSettingsts = (function () {
    'use strict';
    var domainPath = "http://localhost:26264/";
    var reportAPI = "http://localhost:58629/";
    var onlineHelpURL = "http://localhost:8085/";
    var hh6ServiceUrl = "http://localhost:40100/";
    var sysSettings: any = {
        webServiceURL: domainPath,
        hh6ServiceUrl: hh6ServiceUrl,
        reportServiceURL: reportAPI,
        onlineHelpURL: onlineHelpURL
    };

    angular.module('app.sysSettings', []).constant("sysSettings", sysSettings);

    return sysSettings;
})();

export default sysSettingsts;

But when I am trying to import that file :

import { Injectable } from '@angular/core';
import { TranslateLoader } from '@ngx-translate/core';
import { Observable } from 'rxjs/Observable';
import {HttpClient} from "@angular/common/http";
import {sysSettingsts} from "angular/sysSettings";

@Injectable()
export class CustomTranslateLoader implements TranslateLoader  {

  constructor(private http: HttpClient,
              private item: sysSettingsts) {
    this.item = item;
  }

  getTranslation(lang: string): Observable<any>{

var apiAddress = this.item.domainPath + "api/GlobalResources/?lang=" + lang;
return Observable.create(observer => {
  this.http.get(apiAddress, ).subscribe(res => {
      observer.next(res);
      observer.complete();
    },
    error => {
      console.log("cannot retrieve Global Resources");
    }
  );
});

}

I am able to see only values in import {sysSettingsts} from "angular/sysSettings"; file but insight constructor my sysSettingsts is undefined.

  constructor(private http: HttpClient,
              private item: sysSettingsts) {
    this.item = item;
  }

I tried to use sysSettingsts directly inside the method but the value is undefined too... Could please anyone give me a hind how can I export executing a function in typescript or at least give some idea how can I import settings from my typescript file in another typescript files (make settings reusable).

Thanks

Answer 1

Change either your export or import syntax. Right now they don't match.

When using a default export:

export default sysSettingsts;

The corresponding import syntax is:

import sysSettingsts from "angular/sysSettings"

Note the lack of braces.

---

Or, if you want to maintain the same import syntax, then use the regular (non default) export instead:

export { sysSettingsts }

You can read more about the import/export pattern here.

Answer 2

The file you want to change doesn't export anything, the purpose of this file is its side effect (it modifies the external angular object). You don't want to do anything with a return value from the file, you just want its code to execute.

Then just import 'your-file.ts'; and remove the surrounding self-executing function