4. First Steps

First Steps

The very first thing you need to do after everything is installed within your Angular 2 Application, is to import and configure the sdk in the components you will be using it.

import { LoopBackConfig } from './shared/sdk/index';
@Component(...)
export class AppComponent {
  constructor() {
    LoopBackConfig.setBaseURL('http://127.0.0.1:3000');
    LoopBackConfig.setApiVersion('api');
  }
}

This basic configuration needs to be done in every componente that will be implementing the SDK provided services.

I know some of you may be asking your self; Why do I need to configure this in every single component? And the answer is because we want to decouple our components as possible, so each of these will have their own configuration, therefore you will be able to point your components to different API instances and versions.

For instance, having a SSO will require you to point +signin/up component to a different API than the rest of the components.

Also, it will be easier to move components between api versions.

If none of these are your case, then you may want to create a base.url.ts file inside the ./shared directory with the following content:

export const BASE_URL = 'http://127.0.0.1:3000';
export const API_VERSION = 'api';

And then just update your configuration as follows:

import { LoopBackConfig, BASE_URL, API_VERSION } from './shared';
@Component(...)
export class AppComponent {
  constructor() {
    LoopBackConfig.setBaseURL(BASE_URL);
    LoopBackConfig.setApiVersion(API_VERSION);
  }
}

IMPORTANT: If you don't understand what barrels and the shared directory stands for, please read the following link