@loopback/docs/site/Component.md

Documentation files rendered at [https://loopback.io](https://loopback.io)

---
lang: en
title: 'Component'
keywords: LoopBack 4.0, LoopBack 4, Node.js, TypeScript, OpenAPI, Concepts
sidebar: lb4_sidebar
permalink: /doc/en/lb4/Component.html
redirect_from:
  - /doc/en/lb4/Components.html
  - /doc/en/lb4/Using-components.html
---

## 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](Context.md) and various artifacts to
allow easier extensibility of your Application.

A typical LoopBack component is an [npm](https://www.npmjs.com) 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](Controller.md) classes.
- `providers` - A map of providers to be bound to the application
  [context](Context.md).
- `classes` - A map of TypeScript classes to be bound to the application
  context.
- `servers` - A map of name/class pairs for [servers](Server.md).
- `lifeCycleObservers` - An array of [life cycle observers](Life-cycle.md).
- `services` - An array of [service](Service.md) classes or providers.
- `bindings` - An array of [bindings](Binding.md) 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](Extending-request-body-parsing.html#contribute-a-body-parser-from-a-component).

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](Repository.md) can be contributed by a Component by adding
  `RepositoryMixin` from `@loopback/repository` to your Application
- [Booters](Booting-an-Application.md#booters) can be contributed by a Component
  by adding `BootMixin` from `@loopback/boot` to your Application

![Components](imgs/loopback-component.png)

{% include note.html content="
Always check a component's instructions to see if it requires the use
of a Mixin. A Mixin may automatically register a Component, saving you the
trouble of having to do so manually. Again it's best to check the documentation
for the given Component/Mixin.
" %}

## 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:

```sh
npm install --save @loopback/authentication
```

To load the component in your application:

```ts
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.

- [@loopback/authentication](https://github.com/strongloop/loopback-next/tree/master/packages/authentication) -
  A LoopBack component for authentication support
- [@loopback/authorization](https://github.com/strongloop/loopback-next/tree/master/packages/authorization) -
  A LoopBack component for authorization support
- [@loopback/boot](https://github.com/strongloop/loopback-next/tree/master/packages/boot) -
  A collection of Booters for LoopBack 4 Applications
- [@loopback/booter-lb3app](https://github.com/strongloop/loopback-next/tree/master/packages/booter-lb3app) -
  A booter component for LoopBack 3 applications to expose their REST API via
  LoopBack 4
- [@loopback/rest](https://github.com/strongloop/loopback-next/tree/master/packages/rest) -
  Expose controllers as REST endpoints and route REST API requests to controller
  methods
- [@loopback/rest-crud](https://github.com/strongloop/loopback-next/tree/master/packages/rest-crud) -
  REST API controller implementing default CRUD semantics
- [@loopback/rest-explorer](https://github.com/strongloop/loopback-next/tree/master/packages/rest-explorer) -
  LoopBack's API Explorer

### Extensions

These components add additional capabilities to LoopBack.

- [@loopback/apiconnect](https://github.com/strongloop/loopback-next/tree/master/extensions/apiconnect) -
  An extension for integrating with
  [IBM API Connect](https://www.ibm.com/cloud/api-connect)
- [@loopback/authentication-jwt](https://github.com/strongloop/loopback-next/tree/master/extensions/authentication-jwt) -
  Extension for JWT authentication
- [@loopback/authentication-passport](https://github.com/strongloop/loopback-next/tree/master/extensions/authentication-passport) -
  A package creating adapters between the passport module and
  @loopback/authentication
- [@loopback/context-explorer](https://github.com/strongloop/loopback-next/tree/master/extensions/context-explorer) -
  Visualize context hierarchy, bindings, configurations, and dependencies
- [@loopback/cron](https://github.com/strongloop/loopback-next/tree/master/extensions/cron) -
  Schedule tasks using cron-like syntax
- [@loopback/health](https://github.com/strongloop/loopback-next/tree/master/extensions/health) -
  An extension exposes health check related endpoints with LoopBack 4
- [@loopback/logging](https://github.com/strongloop/loopback-next/tree/master/extensions/logging) -
  An extension exposes logging for Winston and Fluentd with LoopBack 4
- [@loopback/metrics](https://github.com/strongloop/loopback-next/tree/master/extensions/metrics) -
  An extension exposes metrics for Prometheus with LoopBack 4
- [@loopback/pooling](https://github.com/strongloop/loopback-next/tree/master/extensions/pooling) -
  Resource pooling service for LoopBack 4
- [@loopback/typeorm](https://github.com/strongloop/loopback-next/tree/master/extensions/typeorm) -
  Adds support for TypeORM in LoopBack

### Community extensions

For a list of components created by community members, refer to
[Community extensions](./Community-extensions.html).

## Creating components

Please refer to [Creating components](Creating-components.md) for more
information.