Http Client | Angular v15 | Angular

• Http Client | Angular v15 | Angular

---

Como parte do novo recurso standalone, o Angular v15 introduz um novo método para usar a API do cliente HTTP que não exige o uso do HttpClientModule:

import {
  provideHttpClient,
  withJsonpSupport,
  withXsrfConfiguration
} from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(
      withXsrfConfiguration({ cookieName: '', headerName: '' }),
      withJsonpSupport()
    ),
  ],
})

Assim como a API do Router, a nova API expõe a função provideHttpClient, que recebe os features que queremos utilizar. O uso de interceptors agora ficou mais simples com uma nova função de feature chamada withInterceptors(). Ela aceita uma lista de funções de interceptor que queremos usar:

import {
  provideHttpClient,
  withInterceptors
} from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(
      withInterceptors([
       (req, next) => {
          // Podemos usar a função inject() dentro desta função
          // Por exemplo: inject(AuthService)
          return next(req);
        },
      ])
    ),
  ],
})

Se você ainda quiser usar os interceptors atuais sem alterar seu código, pode fornecer a feature withInterceptorsFromDi():

import {
  HTTP_INTERCEPTORS,
  provideHttpClient,
  withInterceptors,
  withInterceptorsFromDi,
} from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    provideHttpClient(
      withInterceptorsFromDi(),
      withInterceptors([
        (req, next) => {
          return next(req);
        },
      ])
    ),
  ],
});

Interceptors em Módulos com Lazy Loading

A capacidade de definir interceptors em módulos carregados de forma preguiçosa (lazy-loaded) é solicitada há muito tempo. Um novo recurso em developer preview nesta versão do Angular torna isso possível. Podemos usar a feature withRequestsMadeViaParent() em nossas rotas e módulos carregados sob demanda:

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(
      withInterceptors([
        (req, next) => {
          console.log('Interceptor global');
          return next(req);
        },
      ])
    ),
    provideRouter([
      { path: '', component: HomeComponent },
      {
        path: 'todos',
        loadChildren() {
          return import('./app/todos/todos.routes');
        },
      },
    ]),
  ],
});

import {
  provideHttpClient,
  withRequestsMadeViaParent,
  withInterceptors,
} from '@angular/common/http';

export default [
  {
    path: '',
    providers: [
      provideHttpClient(
        // 👇👇👇👇
        withRequestsMadeViaParent(),
        withInterceptors([
          (req, next) => {
            console.log('Interceptors do TodosComponent');
            return next(req);
          },
        ])
      ),
    ],
    loadComponent() {
      return import('./todos/todos.component');
    },
  },
];

No caso acima, cada requisição iniciada pelo TodoComponent e seus componentes filhos usará tanto os interceptors inline quanto os globais 🙌 (o inline é executado primeiro).

Em testes, podemos usar a função provideHttpClientTesting().

---