Configuration

Global Configuration

First set the global configuration for your Sinequa application, then bootstrap the Angular application with the necessary providers and interceptors.

setGlobalConfig is used to set the global configuration for your Sinequa application, including the application name, backend URL, and bearer token, SAML or OAuth provider for authentication.

Example: OAuth Provider

Here's how you can do it with an OAuth provider:

app.config.ts

import { setGlobalConfig } from '@sinequa/atomic';

setGlobalConfig({
  app: 'your-app-name', // Replace with your application name
  backendUrl: 'https://your-sinequa-backend.com', // Replace with your Sinequa backend URL (optional)
  autoOauthProvider: 'your-oauth-provider', // Replace with your OAuth provider
});

Local vs Production Configuration

The configuration above is generally set when you serve your application locally. In production you can provide automatically the configuration from the Sinequa backend by using the appInitializerFn function like this:

app.config.ts

import { appInitializerFn, setGlobalConfig } from '@sinequa/atomic';

setGlobalConfig({
  app: 'your-app-name', // Replace with your application name
  backendUrl: 'https://your-sinequa-backend.com', // Replace with your Sinequa backend URL (optional)
});

bootstrapApplication(App, {
  providers: [
    provideZonelessChangeDetection(),
    provideRouter([]),
    provideHttpClient(/* ... */),
    provideAppInitializer(appInitializerFn),
  ],
});

note

The appInitializerFn function is used to bootstrap the application with the necessary providers and interceptors. It initializes the application by fetching the configuration from the Sinequa backend.

Application, routes initialization and authentication

The bootstrapApp function is used to initialize the application and set up the routes. It takes the Router and ApplicationService as parameters, along with an options object that can specify whether to create routes or not.

tip

The bootstrapApp function, under the hood sets up the authentication mechanism, which can be done using OAuth, SAML, or other methods. The authentication credentials can be provided in the setGlobalConfig function or through the appInitializerFn.

app.config.ts

import { Router } from '@angular/router';
import { ApplicationService } from '@sinequa/atomic-angular';

bootstrapApplication(App, {
  providers: [
    provideZonelessChangeDetection(),
    provideRouter([]),
    provideHttpClient(/*...*/),
    provideAppInitializer(appInitializerFn),
    provideAppInitializer(() =>
      bootstrapApp(inject(Router), inject(ApplicationService), {
        createRoutes: true, // Set to true to create routes automatically
      })
    ),
  ],
});

note

The bootstrapApp function is essential for setting up the application and its routes. The createRoutes option determines whether the application should automatically create routes based on the configuration. By default, it is set to true, which means the application will create routes automatically based on the configuration provided in the Sinequa Administration.

When createRoutes is set to false, you will need to manually define the routes in your application. Uses the routes.ts file to define the routes for your application.

Example of a routes.ts file

routes.ts

import { Routes } from '@angular/router';
export const routes: ExtendedRoutes = [
  { path: 'login', component: SignInComponent },
  { path: 'logout', component: SignInComponent },
  {
    path: 'assistant',
    loadComponent: () => import('./pages/assistant/assistant.layout').then(m => m.AssistantLayoutComponent),
    canActivate: [AuthGuard()],
    resolve: { queryName: queryNameResolver }
  },
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard()], resolve: { queryName: queryNameResolver } },
  {
    path: 'widgets',
    loadComponent: () => import('./pages/widgets/layout').then(m => m.WidgetsLayoutComponent),
    canActivate: [AuthGuard()],
    children: [
      {
        path: 'recent-searches',
        component: RecentSearchesComponent
      },
      {
        path: 'bookmarks',
        component: BookmarksComponent
      },
      {
        path: 'saved-searches',
        component: SavedSearchesComponent
      },
      {
        path: 'collections',
        component: CollectionsComponent
      }
    ]
  },
  {
    path: 'search',
    component: SearchLayoutComponent,
    canActivate: [AuthGuard()],
    children: [
      {
        path: '**',
        component: SearchAllComponent,
        resolve: { queryName: queryNameResolver }
      }
    ]
  },
  { path: 'loading', component: LoadingComponent },
  { path: 'error', component: ErrorComponent },
  { path: '**', redirectTo: 'home', pathMatch: 'full' }
];

Example of a complete main.ts file

main.ts

import {
  provideAppInitializer,
  provideZonelessChangeDetection,
} from '@angular/core';
import { Router, provideRouter } from '@angular/router';
import {
  httpResource,
  provideHttpClient,
  withInterceptors,
} from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';

import {
  appInitializerFn,
  setGlobalConfig,
} from '@sinequa/atomic';
import {
  ApplicationService,
  auditInterceptorFn,
  bodyInterceptorFn,
  bootstrapApp,
  errorInterceptorFn,
  toastInterceptorFn,
} from '@sinequa/atomic-angular';

setGlobalConfig({
  app: 'your-app-name', // Replace with your application name
  backendUrl: 'https://your-sinequa-backend.com', // Replace with your Sinequa backend URL
});

bootstrapApplication(App, {
  providers: [
    provideZonelessChangeDetection(),
    provideRouter([]),
    provideHttpClient(
      withInterceptors([
        bodyInterceptorFn,
        authInterceptorFn,
        auditInterceptorFn,
        errorInterceptorFn,
        toastInterceptorFn,
      ])
    ),
    // provideAppInitializer(appInitializerFn),
    provideAppInitializer(() =>
      bootstrapApp(inject(Router), inject(ApplicationService), {
        createRoutes: true,
      })
    ),
  ],
});