Concepts / Building Search UI / Installation
Feb. 21, 2019

Installation

You are reading the documentation for Angular InstantSearch v3, which is in beta. You can find the v2 documentation here.

Install the npm package

Angular InstantSearch is available in the npm registry, thus you can install it with npm, Yarn, and any command line tool able to install packages from the npm registry.

Angular InstantSearch has a peer dependency on the Algolia JavaScript API client, so you’ll need to install it as well. This is done to easily allow for custom backend implementations.

Open a terminal, navigate to the directory of your Angular application, and type:

1
npm install algoliasearch instantsearch.js@latest angular-instantsearch@beta

Inject the CSS theme

Angular InstantSearch comes with a CSS theme making the widgets look good by default.

To load the theme, add it to the apps > styles array of your angular.json configuration file:

angular.json

1
2
3
4
5
6
{
  "styles": [
    "node_modules/angular-instantsearch/bundles/instantsearch-theme-algolia.min.css",
    "styles.css"
  ]
}

There’s also a lighter, reset.css-like theme for our widgets that you can load this way:

angular.json

1
2
3
4
5
6
{
  "styles": [
    "node_modules/angular-instantsearch/bundles/instantsearch.min.css",
    "styles.css"
  ]
}

If you’re using a preprocessor, you can directly import the themes in your style files, please refer to the Angular CLI documentation.

Read the styling and CSS classes guide for more information on how the CSS theme is working or can be customized.

Here’s a preview of the theme:

Compatibility

Angular InstantSearch is compatible with Angular versions 5, 6 and 7.

Bootstrap an Angular application

If you do not yet have an Angular application, we recommend using Angular CLI.

You can also use create-instantsearch-app to bootstrap an Angular InstantSearch application, it uses Angular CLI templates behind the scenes.

Caveat: Angular CLI 6 and 7 compatibility

One dependency of Angular InstantSearch requires the process.env global variable to be available. Configure your application to do so by adding to the end of your polyfill.ts file:

polyfill.ts

1
2
3
(window as any).process = {
  env: { DEBUG: undefined },
};

Did you find this page helpful?