Where to save settings like API URL in Ionic2 app?

Question

I have several settings that should be in the configuration file.

For example: API URL

Where is the best place for him in Ionic 2?

Answer 1

From Angular 2/4 Documents :

Non-Class Dependencies

What if the value of the dependency is not a class? Sometimes what we want to enter is a string, function or object .

Applications often define configuration objects with a lot of small facts (for example, the name of the application or the address of the web API endpoint), but these configuration objects are not always instances of the class.

One solution for choosing a vendor token for non-class dependencies is to define and use an OpaqueToken

Thus, you will need to define a configuration object with URLs, etc., and then an OpaqueToken to be able to use it when injecting an object with your configuration.

I have included all my configuration in the app-config.ts file

 // Although the ApplicationConfig interface plays no role in dependency injection, // it supports typing of the configuration object within the class. export interface ApplicationConfig { appName: string; apiEndpoint: string; } // Configuration values for our app export const MY_CONFIG: ApplicationConfig = { appName: 'My new App', apiEndpoint: 'http://www...' }; // Create a config token to avoid naming conflicts export const MY_CONFIG_TOKEN = new OpaqueToken('config'); 

That the OpaqueToken may be confusing at the beginning, but it's just a string that avoids name conflicts when injecting this object. You can find an amazing article about it here .

Then you just need to include it on the page you need as follows:

 import { NavController } from 'ionic-angular/index'; import { Component, OpaqueToken, Injectable, Inject } from "@angular/core"; // Import the config-related things import { MY_CONFIG_TOKEN, MY_CONFIG, ApplicationConfig } from 'app-config.ts'; @Component({ templateUrl:"home.html", providers: [{ provide: MY_CONFIG_TOKEN, useValue: MY_CONFIG }] }) export class HomePage { private appName: string; private endPoint: string; constructor(@Inject(MY_CONFIG_TOKEN) private config: ApplicationConfig) { this.appName = config.appName; this.endPoint = config.apiEndpoint; } } 

Note how to include it in the providers array

 providers: [{ provide: MY_CONFIG_TOKEN, useValue: MY_CONFIG }] 

And how to tell the injector how it should get an instance of the configuration object

 @Inject(MY_CONFIG_TOKEN) private config: ApplicationConfig 

---

UPDATE

OpaqueToken deprecated since v4.0.0 because it does not support type information, use InjectionToken<?> Instead.

So, instead of these lines:

 import { OpaqueToken } from '@angular/core'; // Create a config token to avoid naming conflicts export const MY_CONFIG_TOKEN = new OpaqueToken('config'); 

Now we have to use

 import { InjectionToken } from '@angular/core'; // Create a config token to avoid naming conflicts export const MY_CONFIG_TOKEN = new InjectionToken<ApplicationConfig>('config'); 

Answer 2

Store them in a singleton class (usually an anti-pattern) or even in a better namespace equivalent.

 class Singleton { /* ... lots of singleton logic ... */ public someMethod() { ... } } // Using var x = Singleton.getInstance(); x.someMethod(); 

namespace equivalent

 namespace Singleton { export function someMethod() { ... } } // Usage Singleton.someMethod(); var x = Singleton; // If you need to alias it for some reason 

Answer 3

You can use a WebSQL table or SQLite or LocalStorage, since both methods are very well supported by the Ionic and hybrid Apps frameworks.