javascript angular typescript self-executing-function

import self executing function to another class in typescript

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

Solution

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 }