Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Mat-progress-spinner com HttpInterceptor

por Guilherme Costa Lopes
| 182.2k xp | 609 posts

Estava fazendo em cima desse exemplo: http://www.freakyjolly.com/angular-8-7-show-global-progress-bar-loader-on-http-calls-in-3-steps-using-angular-interceptors-in-angular-4-3/

mas não funcionou.

Segue meu código:

comum.module.ts

import { CommonModule } from "@angular/common";
import {
  HttpClientModule,
  HTTP_INTERCEPTORS
} from "@angular/common/http";
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { AuthInterceptor } from "../security/interceptor/auth.interceptor";
import { DialogSimNaoComponent } from './dialog/dialog-sim-nao/dialog-sim-nao.component';
import { LoaderComponent } from './loader/loader.component';
import { MaterialModule } from "./material-module/material.module";
import { LoaderService } from './services/loader.service';
import { SnackBarComponent } from './snack-bar/snack-bar.component';
const modules = [
  CommonModule,
  MaterialModule,
  FormsModule,
  ReactiveFormsModule,
  HttpClientModule
];

@NgModule({
  imports: [...modules],
  declarations: [SnackBarComponent, DialogSimNaoComponent, LoaderComponent],
  providers: [
    LoaderService,
    SnackBarComponent,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ],
  entryComponents: [DialogSimNaoComponent],
  exports: [...modules]
})
export class ComumModule { }

app.module.ts

 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ComponentService } from './component.service';
import { ComumModule } from './core/comum.module';
import { SecurityModule } from './security/security.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ComumModule,
    SecurityModule
  ],
  providers: [ComponentService],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule { }

loader.service.ts

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";

@Injectable({
  providedIn: "root"
})
export class LoaderService {
  public isLoading = new BehaviorSubject(false);
  constructor() { }
}
4 respostas
por Guilherme Costa Lopes
| 182.2k xp | 609 posts

loader.component.html

<div class="progress-loader" [hidden]="!loading">
  Loading...
  <mat-progress-spinner class="spinner" [color]="color" [mode]="mode" [value]="value">
  </mat-progress-spinner>
</div>

loader.component.ts

import { Component, OnInit } from '@angular/core';
import { LoaderService } from '../services/loader.service';
@Component({
  selector: 'app-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.scss']
})
export class LoaderComponent implements OnInit {
  color = 'primary';
  mode = 'indeterminate';
  value = 50;
  loading: boolean;
  constructor(private loaderService: LoaderService) {
    this.loaderService.isLoading.subscribe((v) => {
      console.log(v);
      this.loading = v;
    });
  }
  ngOnInit() {
  }
}

auth.interceptor.ts

import {
  HttpEvent,
  HttpHandler, HttpInterceptor,
  HttpRequest,
  HttpResponse
} from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { LoaderService } from 'src/app/core/services/loader.service';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  private requests: HttpRequest<any>[] = [];
  constructor(private loaderService: LoaderService) { }
  removeRequest(req: HttpRequest<any>) {
    const i = this.requests.indexOf(req);
    if (i >= 0) {
      this.requests.splice(i, 1);
    }
    this.loaderService.isLoading.next(this.requests.length > 0);
  }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.requests.push(req);
    console.log("No of requests--->" + this.requests.length);
    this.loaderService.isLoading.next(true);
    return Observable.create(observer => {
      const subscription = next.handle(req)
        .subscribe(
          event => {
            if (event instanceof HttpResponse) {
              this.removeRequest(req);
              observer.next(event);
            }
          },
          err => {
            alert('error returned');
            this.removeRequest(req);
            observer.error(err);
          },
          () => {
            this.removeRequest(req);
            observer.complete();
          });
      // remove request from queue when cancelled
      return () => {
        this.removeRequest(req);
        subscription.unsubscribe();
      };
    });
  }
}

Não mostrar o componente mat-progress-spinner na tela.

O que pode ser ?

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Guilherme, tudo bem? Apenas olhando os códigos fica complicado te ajudar, isso porque posso estar deixando algum detalhe que à olho não identifiquei.

Sendo assim, consegue compartilhar o projeto comigo? Assim eu consigo simular o problema e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

solução!
por Guilherme Costa Lopes
| 182.2k xp | 609 posts

Consegui após passei o interceptor no comum.module, e coloquei no app.module

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Boa Guilherme, fico feliz que tenha resolvido seu problema, parabéns.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.