Page Contents

Overview

Components play an important role in the extensibility of LoopBack 4. A Component makes it easy for independent developers to contribute additional features to LoopBack. Components serve as a vehicle to group extension contributions such as Context Bindings and various artifacts to allow easier extensibility of your Application.

A typical LoopBack component is an npm package exporting a Component class which can be added to your application.

Apart from its own properties, Component class can have the following properties:

  • controllers - An array of controller classes.
  • providers - A map of providers to be bound to the application context.
  • classes - A map of TypeScript classes to be bound to the application context.
  • servers - A map of name/class pairs for servers.
  • lifeCycleObservers - An array of life cycle observers.
  • services - An array of service classes or providers.
  • bindings - An array of bindings to be added to the application context. A good example of using bindings to extend the functionality of a LoopBack 4 app is contributing an additional body parser.

These properties contribute to the application to add additional features and capabilities.

LoopBack 4 was built with extensibility in mind and this includes Components, which can be allowed to contribute additional artifacts by adding a Mixin to your Application class. This doesn’t change how a Component is registered (app.component()) but it enables the Component to contribute additional artifacts. For example:

  • Repositories can be contributed by a Component by adding RepositoryMixin from @loopback/repository to your Application
  • Booters can be contributed by a Component by adding BootMixin from @loopback/boot to your Application

Components

Using components

Components can be added to your application using the app.component() method.

The following is an example of installing and using a component.

Install the following dependencies:

npm install --save @loopback/authentication

To load the component in your application:

import {RestApplication} from '@loopback/rest';
import {AuthenticationComponent} from '@loopback/authentication';

const app = new RestApplication();
// Add component to Application, which provides bindings used to resolve
// authenticated requests in a Sequence.
app.component(AuthenticationComponent);

Official components

Here is a list of components officially created and maintained by the LoopBack team.

Core components

These components implement the primary LoopBack capabilities.

Extensions

These components add additional capabilities to LoopBack.

Community extensions

For a list of components created by community members, refer to Community extensions.

Creating components

Please refer to Creating components for more information.