bringing a variable from a TypeScript file into a different one

Question

bringing a variable from a TypeScript file into a different one

I'm facing a challenge with importing a variable from one TypeScript file to another.

The specific variable I need to import is called cityListUrl

The TypeScript file where it's defined looks like this:

export class backendUrls{

  // root url
  rooturl:string= 'http://127.0.0.1:8000';

//get a list of all cities
  cityListUrl:string = this.rooturl + '/api/city/';


}

The file I want to import it into has the following structure:

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import {backendUrls} from 'app/backendUrls';

@Injectable()
export class cityGetService{
  constructor(private http: Http){}

  cityGet(){
    this.http.get(backendUrls.cityListUrl)
  }
}

When I try to access cityListUrl in my PyCharm editor, it shows up as red with the message:

TS2339: 'cityListUrl' does not exist on type 'typeof backendUrls'.

Has anyone encountered this issue before? Any suggestions on how to resolve it would be greatly appreciated. Thank you

angular typescript import

Answer 1

Answer №1

One effective method for managing server api urls is through the utilization of angular environment files. There are two key benefits to using this approach:

It is accessible throughout your entire application
You can effortlessly handle multiple platforms (localhost, dev, staging, prod) without having to modify your code each time

Within the directory app/environments, you have the ability to create various files:

environments.prod.ts
environments.ts
environment.test.ts

In each file, you define your global variables:

For localhost:

export const environment = {
  production: false,
  apiHost: 'http://localhost',
  recaptchaKey: '6LeWzxQUeazeAAPpR0gZFezaeazL5AvUP3moN1U4u',
  fileHost: 'http://file.localhost',
};

For a production example:

export const environment = {
  production: true,
  apiHost: 'http://prod',
  recaptchaKey: '6LeWzxQUeazeAAPpR0gZFezaeazL5AvUP3moN1U4u',
  fileHost: 'http://file.prod',
};

To utilize these environments in your scripts, simply import

import { environment } from './environments/environment'; //relative path from where your file is

import { environment } from './environments/environment'
export class Service {
    protected cityListUrl = '/api/city/';

    constructor(protected http: Http) { }

    get() {
      this.http.get(environment.apiHost + this.cityListUrl).map(response => response.json());
    }
}

When building your project with angular-cli, specify which environment you wish to use

ng build --environment=prod

or

ng serve --environment=test

This feature is advantageous as it allows for seamless integration of this command line in continuous integration tools.

Answer 2

One effective method for managing server api urls is through the utilization of angular environment files. There are two key benefits to using this approach:

It is accessible throughout your entire application
You can effortlessly handle multiple platforms (localhost, dev, staging, prod) without having to modify your code each time

Within the directory app/environments, you have the ability to create various files:

environments.prod.ts
environments.ts
environment.test.ts

In each file, you define your global variables:

For localhost:

export const environment = {
  production: false,
  apiHost: 'http://localhost',
  recaptchaKey: '6LeWzxQUeazeAAPpR0gZFezaeazL5AvUP3moN1U4u',
  fileHost: 'http://file.localhost',
};

For a production example:

export const environment = {
  production: true,
  apiHost: 'http://prod',
  recaptchaKey: '6LeWzxQUeazeAAPpR0gZFezaeazL5AvUP3moN1U4u',
  fileHost: 'http://file.prod',
};

To utilize these environments in your scripts, simply import

import { environment } from './environments/environment'; //relative path from where your file is

import { environment } from './environments/environment'
export class Service {
    protected cityListUrl = '/api/city/';

    constructor(protected http: Http) { }

    get() {
      this.http.get(environment.apiHost + this.cityListUrl).map(response => response.json());
    }
}

When building your project with angular-cli, specify which environment you wish to use

ng build --environment=prod

or

ng serve --environment=test

This feature is advantageous as it allows for seamless integration of this command line in continuous integration tools.

Answer 3

Answer №2

To simplify, you can individually define and export each variable. This allows for separate imports as well.

export const rooturl = 'http://127.0.0.1:8000';
export const cityListUrl = rooturl + '/api/city/'

When importing:

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import {cityListUrl} from 'app/backendUrls';

@Injectable()
export class cityGetService{
  constructor(private http: Http){}

  cityGet(){
    this.http.get(cityListUrl)
  }
}

If you prefer to group them in an object:

export const rooturl = 'http://127.0.0.0.1:8000';
export const cityListUrl = rooturl + '/api/city/'

export const all = {
    rooturl, cityListUrl
}

The current setup is a class that needs instantiation to access its properties.

The code generated for the class:

...

// Class instance required for access
this.http.get(new backendUrls().cityListUrl)

...

For static access without instantiation:

export class backendUrls {
    // Static properties for direct access
    static rooturl: string = 'http://127.0.0.1:8000';
    static cityListUrl: string = backendUrls.rooturl + '/api/city/';
}

Answer 4

To simplify, you can individually define and export each variable. This allows for separate imports as well.

export const rooturl = 'http://127.0.0.1:8000';
export const cityListUrl = rooturl + '/api/city/'

When importing:

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import {cityListUrl} from 'app/backendUrls';

@Injectable()
export class cityGetService{
  constructor(private http: Http){}

  cityGet(){
    this.http.get(cityListUrl)
  }
}

If you prefer to group them in an object:

export const rooturl = 'http://127.0.0.0.1:8000';
export const cityListUrl = rooturl + '/api/city/'

export const all = {
    rooturl, cityListUrl
}

The current setup is a class that needs instantiation to access its properties.

The code generated for the class:

...

// Class instance required for access
this.http.get(new backendUrls().cityListUrl)

...

For static access without instantiation:

export class backendUrls {
    // Static properties for direct access
    static rooturl: string = 'http://127.0.0.1:8000';
    static cityListUrl: string = backendUrls.rooturl + '/api/city/';
}

bringing a variable from a TypeScript file into a different one

Answer №1

Answer №2

Similar questions

Typescript's Patch<T> type enforces strictness within the codebase

Switch from Gulp-TSLint to Gulp-ESLint for enhanced code analysis!

Retrieve the value of a promise and transfer it to the subsequent function of an observable

Tips for generating a subject in rx.js while utilizing 2 parameters

leveraging parcel for importing typescript dependencies

The 'Element[]' type is lacking certain properties when dealing with react children

Learn how to pass JSON data into an anchor tag with Angular router link and the query parameters attribute set as "<a ... [queryParams]="q=|JSON|

Utilizing getServerSideProps and getInitialProps in Next.js to optimize page loading times

What is the best way to include TypeScript definition files in version control?

Having trouble getting the Angular Route to work, any tips on how to fix it?

What is the method for choosing an element by class name in TypeScript?

Ionic 4 - Best practices for handling asynchronous data with multiple observables

Best practices for transferring date objects between a frontend developed in JavaScript/TypeScript and a backend built in ASP.net Core 5

Angular sets the required property only when the button is clicked

Error encountered in Angular 6 due to an undefined global variable in browser-crypto.js

Error: Module not found - Unable to locate 'dropzone'

React Native SectionList Displaying Incorrectly

What is the reason behind webpack attempting to interpret my readme.md files?

Processing of hierarchical JSON structure

What is the best approach for handling errors in a NestJS service?