CORRECTA FORMA DE INSERTAR IMÁGENES EN HTML ANGULAR

En el código html las referencias a imágenes se deben agregar de la siguiente manera:
./assets/images/icons/perficon.png

<img class="img-responsive" src="./assets/images/icons/perficon.png">
 
CONFIGURACION DE ENVIRONMENT

Para manejar variables de entorno cambiantes para entorno de desarrollo y producción realiza las configuraciones en los siguientes archivos:

* El archivo environment.ts es reemplazado por el environment.prod.ts en el momento de compilación al ejecutar “ng build –prod –aot”

Archivo environment.ts
 
export const environment = {
  production: false,
  
  backendUrl: 'http://localhost:8080/siserp-pos-backend',
};
 
Archivo environment.prod.ts
export const environment = {
  production: true,
  
  backendUrl: 'http://192.168.43.214:8080/siserp-pos-backend',
};

COMPONENTE LOADING PARA ANGULAR 
 
$ npm install --save  ng4-loading-spinner
1. Importa el modulo en el app.module.ts

import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
 
@NgModule({
  declarations: [
    AppComponent,
    IntranetComponent,
    SesionComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    Ng4LoadingSpinnerModule. forRoot(),//FOR LOADING
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 
2. Agregar la etiqueta en el componente(.ts) deseado
<navbar [showSubmenu2]="true">
  <div class="page">
<ng4-loading-spinner [timeout]="300000" [loadingText]="'Cargando...'">
</ng4-loading-spinner>
 
3.Importa el componente
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
...
...
  constructor(private fb: FormBuilder,
    public dialog: MatDialog,
    private spinnerService: Ng4LoadingSpinnerService, //AGREGAR PARA LOADING
    @Inject(MaestraService) private maestraService: MaestraService,
    private datePipe: DatePipe) { }
 
 
4.Finalmente usar las siguientes para mostrar y ocultar el spinner loading
this.spinnerService.show();
this.spinnerService.hide();
 
 
CREAR SERVICE
$ ng g s modules/services/generic –spec=false
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiOutResponse } from '../dto/response/api-out.response';
import { Observable } from 'rxjs';
import { MaestraRequest } from '../dto/request/maestra.request';
import { environment } from 'src/environments/environment';
 
@Injectable({
  providedIn: 'root'
})
export class GenericService {
 
  constructor(private http: HttpClient) { }
 
  public listarMaestra(request: MaestraRequest): Observable<ApiOutResponse> {
    return this.http.post<ApiOutResponse>(`${environment.backendUrl}egreso/lista`, request);
  }
}
 
 
 
Llamar a un servicio desde componente.ts
listarMaestra(): void {
    this.dataSource = null;
    this.isLoading = true;
 
    let maestra = new MaestraRequest();
    maestra.idMaestra = 0;
    this.genericService.listarMaestra(maestra).subscribe(
      (data: ApiOutResponse) => {
        this.listaMaestraResponse = data.objeto;
        this.cargarDatosTabla();
        this.isLoading = false;
      },
      error => {
        console.error('Error al consultar datos');
        this.isLoading = false;
      }
    );
  }
 
 
 
 
CONFIGURAR MODULO ICONO
$ ng g m modules/icon –flat
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialModule } from './material.module';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material';
 
@NgModule({
  declarations: [],
  imports: [],
  providers: [
    MatIconRegistry
  ]
})
export class IconModule {
  private path: string = '../../assets/images/svg-icons';
 
  constructor(private domSanitizer: DomSanitizer, public matIconRegistry: MatIconRegistry) {
    this.matIconRegistry
      .addSvgIcon('excel', this.setIconPath(`${this.path}//icons8-microsoft-excel.svg`));
  }
 
  private setIconPath(url: string): SafeResourceUrl {
    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
  }
}