Yair vargas

Saludos, estoy trabajando Angular 18 y me ha ocurrido lo siguiente:

• HttpClientModule está deprecado, por lo tanto tuve que proveer provideHttpClient().
• La clase que ud propuso no me funcionó, no sé si fue por no haber importado HttpClientModule. El caso fue que tuve que crear la constante como lo propone el ng g interceptor, además de insertar esta funcion dentro del provideHttpClient (provideHttpClient(withInterceptors([interceptorInterceptor])));

app.module.ts

{ NgModule } from  [@ [@ [@ [@ [@'@angular](https://ed.team/u/'@angular)](https://ed.team/u/'@angular)](https://ed.team/u/'@angular)](https://ed.team/u/'@angular)](https://ed.team/u/'@angular)/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {  provideHttpClient, withInterceptors } from '@angular/common/http';
import { interceptorInterceptor } from './interceptor/interceptor.interceptor';
 [@
<a href="/u/NgModule" data-community-mention="USER" data-community-mention-slug="NgModule">@NgModule</a>](https://ed.team/u/
<a href="/u/NgModule" data-community-mention="USER" data-community-mention-slug="NgModule">@NgModule</a>)({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [provideHttpClient(withInterceptors([interceptorInterceptor]))],
  bootstrap: [AppComponent]
})
export class AppModule { }

interceptor.Interceptor.ts

{ HttpEvent, HttpHandler, HttpInterceptor, HttpInterceptorFn, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

export const interceptorInterceptor: HttpInterceptorFn = (req, next) => {
  console.log("boooo");
  
  const requestModi = req.clone({
    setHeaders: {
      'X-App-Version': '1.0.0',
      'cosa': '1234123412'
    }
  });
  return next(requestModi);
};

// [@Injectable](https://ed.team/u/Injectable)()
// export class Interceptor implements HttpInterceptor {
  

//   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
//     console.log("sdfasdf");
//     const requestModi = req.clone({
//       setHeaders: {
//         'X-App-Version': '1.0.0',
//         'cosa': '1234123412'
//       }
//     });
//     return next.handle(requestModi);

//   }
// }

Saludos, me perdí, dónde cargó los estilos?

Me hubiera gustado que se tomara el tiempo de crear los componentes uno a uno. En el entrenamiento es muy importante la repatición para no olvidar

Cómo en el video anterior, no funciona la clase. Mi propuesta es la siguiente:

error.interceptor.ts

{ HttpErrorResponse, HttpEvent, HttpInterceptorFn } from  [@ [@ [@ [@'@angular](https://ed.team/u/'@angular)](https://ed.team/u/'@angular)](https://ed.team/u/'@angular)](https://ed.team/u/'@angular)/common/http';
import { catchError, Observable, throwError } from 'rxjs';

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    catchError((error) => {
      console.error('Ocurrió un error:', error);

      return throwError(() => new Error('test'));
    })
  );
};

En el appmodule tambien se agregó en el provider: providers: [provideHttpClient(withInterceptors([interceptorInterceptor, errorInterceptor]))],

Elcódigo es el siguiente:

{ NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { interceptorInterceptor } from './interceptor/interceptor.interceptor';
import { errorInterceptor } from './interceptor/error.interceptor';
 [@
<a href="/u/NgModule" data-community-mention="USER" data-community-mention-slug="NgModule">@NgModule</a>](https://ed.team/u/
<a href="/u/NgModule" data-community-mention="USER" data-community-mention-slug="NgModule">@NgModule</a>)({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [provideHttpClient(withInterceptors([interceptorInterceptor, errorInterceptor]))],
  bootstrap: [AppComponent]
})
export class AppModule { }

Saludos, que pluging usó para completar emitter en el minuto 2:35