Importing a variable from one typescript file to another
I am trying to import a variable from one script type to another.
the variable I want to import is cityListUrl
the type of script it is in is encoded as follows:
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 looks like this:
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)
}
}
cityListUrl
in my pycharm editor it is currently red. with a message
TS2339: 'cityListUrl' does not exist on type 'typeof backendUrls'.
Has anyone had this problem before? How can I fix this? Thanks you
The best way to handle server-side api urls is using angular framework files. There are two benefits:
- Available in all your applications
- You can handle multi-platform (localhost, dev, stating, prod) without changing your code
in app/environments
you can create different files:
- environments.prod.ts
- environments.ts
- environement.test.ts
In each file, you define your gobals variables:
for localhost:
export const environment = {
production: false,
apiHost: 'http://localhost',
recaptchaKey: '6LeWzxQUeazeAAPpR0gZFezaeazL5AvUP3moN1U4u',
fileHost: 'http://file.localhost',
};
for example prod:
export const environment = {
production: true,
apiHost: 'http://prod',
recaptchaKey: '6LeWzxQUeazeAAPpR0gZFezaeazL5AvUP3moN1U4u',
fileHost: 'http://file.prod',
};
To use it in your scripts, you need to always 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 you build your project with angular-cli, you define exactly which environment you want to use
ng build --environment=prod
or
ng serve --environment=test
Which is cool because you can easily integrate this command line into continuous integration tools.
source to share
The easiest way is to simply define and export each variable independently. This way you can also import them yourself.
export const rooturl = 'http://127.0.0.1:8000';
export const cityListUrl = rooturl + '/api/city/'
And import them this way.
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 want everything together in an object, just export them the same way.
export const rooturl = 'http://127.0.0.1:8000';
export const cityListUrl = rooturl + '/api/city/'
export const all = {
rooturl, cityListUrl
}
You now have a class that needs to be instantiated in order to access its instance properties.
The generated code for your class looks like this.
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var backendUrls = (function () {
function backendUrls() {
// root url
this.rooturl = 'http://127.0.0.1:8000';
//get a list of all cities
this.cityListUrl = this.rooturl + '/api/city/';
}
return backendUrls;
}());
exports.backendUrls = backendUrls;
});
If you want a class, you first need to instantiate it using the new keyword .
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(new backendUrls().cityListUrl)
}
}
If you need to use a class, but want it to be static, you can make the properties static, then they will be defined as properties of the class itself, not the instance.
export class backendUrls {
// root url
static rooturl: string = 'http://127.0.0.1:8000';
// need to use the class to access the root since we don't have an instance.
static cityListUrl: string = backendUrls.rooturl + '/api/city/';
}
source to share