How to design common methods in Angular 5

Question

Working on my first Angular app.

All of my services will talk to a web service on the same server. I want each of the services to use common code to perform this communication to allow the services to communicate on the business logic. For instance, I want to code the server name once.

The way I've done this on other platforms is to create a static class with those methods on it and then call those methods from my services. How do I achieve this with Angular 5, as I'm only aware of templates, components, and services?

https://github.com/angular/angular-cli/wiki/stories-application-environments — R. Richards, Feb 12 '18 at 22:32
For DI usage of constants, see [Angular 2 Global Constants Provider Injector Method](https://stackoverflow.com/questions/35822486/angular-2-global-constants-provider-injector-method) — Richard Matsen, Feb 12 '18 at 22:40

Boris Lobanov · Answer 1 · 2018-02-13T13:07:43.410

A pretty common approach is to have a file named something like config.ts with an object APP_CONFIG that stores any properties you might need. Then you can simply import the config object and use the desired properties.

UPDATE

You can also inject strings and objects into services with @Inject decorator (you also have to provide them first):

Your service:

@Injectable()
export class DataService {
    constructor(@Inject(API_BASE_URL) baseUrl?: string) { // ... }
}

Your appConfig.module.ts:

import {NgModule} from '@angular/core';
import {API_BASE_URL} from 'some/path';

@NgModule({
    providers: [
        {
            provide: API_BASE_URL,
            useValue: 'https://example.com'
        }
    ]
})

export class AppConfigModule {
}

This way you'll be able to use DI to mock this dependency for testing purposes.

I felt that your answer was insufficient, so I created one of my own that provided all of it. I still upvoted yours. — Thom, Feb 12 '18 at 23:06
@Thorn, I updated my answer with another way of using shared constants, check it out — Boris Lobanov, Feb 13 '18 at 09:14

score 2 · Answer 2 · answered Feb 13 '18 at 00:50

what I did for this in my previous project was as follows. I created a config.ts file with the following content.

config.ts

export const config = Object.freeze({
    server: 'http://localhost/',
    folder: 'angular5/'
});

Then I imported this file into the services that made the Http call & used it as follows:

import { config } from './../shared/config/config';

private server = config.server + config.folder;
private contactUsURL = this.server + '/api/contact-us';

You may please use this to complete up the actual URL for Http calls.I hope, by this way you can create & use common constants in your project with ease.

score 1 · Answer 3 · answered Sep 12 '18 at 04:17

ng generate class Constants

your class should look like:

import {Injectable} from '@angular/core';

@Injectable()
export class Constants {

  public static readonly API_URL = 'api';

  static Role = class {
    public static readonly ADMIN = 'ROLE_ADMIN';
  };
}

use in component:

import {Constants} from '../constants';

...

console.log(Constants.Role.ADMIN);
console.log(Constants.API_URL);

score 0 · Accepted Answer · answered Feb 12 '18 at 23:05

0

I created a new object called web.ts. Here's the code:

@Injectable()
export class Web {
  headers = new HttpHeaders(
    {'access-control-allow-origin':'*'}
  );

  rootUrl = "http://localhost:8093/";

}

and then added to my app.module.ts as a provider:

  providers: [Web],

Then I simply injected it into my clients like a service:

  constructor(private web: Web) {}

This solved my problem.

answered Feb 12 '18 at 23:05

Thom

14,013
25
105
185

There already is an 'environment' file that can be replaced at build with a different one. Why not use that? I guess you don't want the `rootUrl` to be `localhost` on a production environment... – Andrei Tătar Mar 05 '19 at 16:02

How to design common methods in Angular 5

4 Answers4