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