#Mono Repository Angular
sharp void
Abro hilo para esto xd
te recomiendo que si no habra demasiada cosa para el state puedes solo hacerlo con servicios de Angular en lugar de usar NgRx , tienes que evaluarlo bien porque sino tambien va ser una dependencia mas y es algo pesada
O si es algo tipo simple carrito de compras puedes hacer un pequeño gestor de estado tu mismo con Signals , en mi caso lo hice para un ecommerce
raw wedge
Entiendo. La verdad es que va a ser algo grandecita la app porque tiene muchas funcionalidades para diversos procesos de negocio y muchos peros en funcion de los clientes y demas, entonces creo que optare por ngrx
aun soy algo noob con ngrx, solo he hecho una app con ello en este cliente, pero me dio la impresion de que el codigo del componente en general quedaba mas limpio
raw wedge
Tengo una cosa que me ha dejado loco haciendo esta app nueva. Metiendo un APPT_INITIALIZER que llama a una funcion dentro de un servicio que a su vez llama a otra que esta en otro servicio inyectado en el constructor, la funcion del segundo servicio sale undefined. Absolutamente sin sentido, tengo otra app con el mismo codigo y no da ese error 🤣
{
provide: APP_INITIALIZER,
useFactory: (config: AppConfigService) => () => config.loadConfiguration(),
deps: [AppConfigService],
multi: true,
},
sharp void
tendria que saber que hace el appConfigService porque asi ni idea a primera mano
prueba sino con un servicio super simple y console.log dentro para debugearlo por si las dudas , dato adicional si intentas usar el router no te va funcionar con el APP INITIALIZER por un tema tecnico y que no tienes aun las rutas disponible los intente hace poco
raw wedge
Te envio el codigo un poco mas tarde, pero básicamente en el appconfigservice hay un loadconfiguration que si se llama y dentro de ese servicio hay otro inyectado en el constructor al que loadconfiguration llama a un metodo publico para hacer un get, y ese metodo publico es undefined en ese punto
raw wedge
config service es este
import { Injectable } from '@angular/core';
import { MsalService } from '@azure/msal-angular';
import { tap, Observable, catchError, of } from 'rxjs';
import { environment } from '../../environments/environment';
import { Store } from '@ngrx/store';
import { Feature } from '@app/features/settings/model/feature';
import { HttpClient } from '@angular/common/http';
import { SettingsConstants } from '@app/constants/settings.constants';
import { SettingsService } from '@app/features/settings/services/settings.service';
import { loadingFeatures } from '@app/state/actions/feature.actions';
@Injectable({
providedIn: 'root',
})
export class AppConfigService {
public countryISO: string = 'ESP';
public employeeId!: string;
public idTokenClaims!: any;
public features!: Feature[];
constructor(
private authService: MsalService,
private store: Store,
private httpClient: HttpClient,
private settingsService: SettingsService
) {}
loadConfiguration(): Observable<Feature[]> {
this.idTokenClaims = this.authService.instance.getAllAccounts()[0]?.idTokenClaims;
this.employeeId = ''; //<string>this.idTokenClaims?.employeeid;
if (environment.current_environment !== 'int' && <string>this.idTokenClaims?.ctry) {
this.countryISO = SettingsConstants.getCountryISO3FromISO2(<string>this.idTokenClaims?.ctry);
}
this.store.dispatch(loadingFeatures({ params: this.countryISO }));
return this.getFeatures(this.countryISO).pipe(
tap((data) => {
this.features = { ...data };
}),
catchError(() => {
return of([]);
})
);
}
private getFeatures(countryISO: string): Observable<Feature[]> {
return this.httpClient.get<Feature[]>('/fsm/features?countryISO=' + countryISO);
}
}
y el servicio inyectado es este
import { Injectable } from '@angular/core';
import { Feature } from '@app/features/settings/model/feature';
import { HttpClient } from '@angular/common/http';
import { AppConfigService } from '@app/services/appConfig.service';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class SettingsService {
constructor(private httpClient: HttpClient, private appConfigService: AppConfigService) {}
public getFeatures(countryISO: string): Observable<Feature[]> {
return this.httpClient.get<Feature[]>('/fsm/features?countryISO=' + countryISO);
}
}
el getFeatures si lo borro del configService y utilizo el de settings, me dice que no es funcion, loggeandolo veo que es undefined
{
provide: APP_INITIALIZER,
useFactory: (config: AppConfigService) => () => config.loadConfiguration(),
deps: [AppConfigService],
multi: true,
},
solo se me ocurre pasarlo en deps y meterlo como segundo parametro y hacer que loadconfiguration lo acepte, pero no se si es buena idea eso
ese mismo codigo esta funcionando en otra app con angular 14 (esta nueva es 16)
lo haria con ngrx, pero no tengo ni idea de como hacer que eso espere por el dispatch y devuelva un of([]) cuando el state ya tenga valor para que cuando el guard checkee el state, encuentre los roles y pueda mostrar la app
y esto si funciona (lo que dije antes de probar) {
provide: APP_INITIALIZER,
useFactory: (config: AppConfigService, settings: SettingsService) => () => config.loadConfiguration(settings),
deps: [AppConfigService, SettingsService],
multi: true,
},
cambiaron algo de angular 14 a 16 y no me entere?
sharp void
No he terminado de revisar todo el codigo pero tal vez no te esta pasando que haces una funcion de una funcion que llama y por eso es undefined ?
https://stackoverflow.com/questions/73720872/angular-app-initializer-deps-doesnt-work-service-is-undefined
porque asi en simple vista no veo que este mal , por otro lado ahora ando algo ocupado voy a dar un examen
raw wedge
No te preocupes, lo solucione como dije, pero sigue siendo raro el compor
Comportamiento
Te compartiria pantallas, pero es de empresa 🤣
Tuve que anonimizar el codigo vaciando las variables
sharp void
esta bien esta interesante ahi como manejar el tema de tus features flags ( me parece ) , entiendo estas usando Azure , esa libreria para que es exactamente ?
raw wedge
Es para implementar una autenticación con azure active directory
Se integra con windows y con la cuenta de microsoft, saca de azure los datos y perfil del empleado y del app registration los roles del usuario sobre esa app. Luego en un guard simplemente manejas la visibilidad de modulos, componentes y su acceso
Lo de devolver el arrow function es la unica manera para que angular resuelva primero la respuesta de azure y luego del initializer para que no quede rota la app
No me preguntes por que, pero hay bugs abiertos con la libreria de azure por eso
Lo que me jode es que en unas apps funcionen y en otras tenga que puto pasar el servicio como callback y meterlo en depa
Deps
sharp void
en Deps es normal cuando usas el useFactory dado que esa manera sabe que dependencias inicializar/rastrear o no se como sea ese proceso , ahora el callback casi recuerdo que siempre era algo asi
sharp void
No me preguntes por que, pero hay bugs abiertos con la libreria de azure por eso
esta en la issues del repo entonces , si tienes alguno adicional podrias reportarlo
entonces usas una estrategia de Authenticacion Autorization con AD o ahora Microsoft Entra ID ( Creo es el nuevo nombre ahora segun ando leyendo acabo de dar la certificacion AZ 900 ) entiendo
usaras SSO por curiosidad ?
raw wedge
No sabia que le cambiaron el nombre
Pero si
Y también uso el microsoft graph, viene integrado con la libreria, la verdad es que es un coñazo como se trae los atributos
También tengo una paginita de config por features y roles que guardo en la db de mi app para comparar con lo de azure
sharp void
recomendaciones si tendras demasiadas features flags y cosas asi tal vez te convenga usar Redis si ya tienes algun sistema de cache o necesites
ahi me fue bien en un ecommerce , feature flags por suerte no me pidieron aun y si tuviera que hacerlo lo haria junto a Redis para mi el performance es casi una necesidad total por el SEO
raw wedge
entiendo, redis es algo similar al real time database de firebase?
hay unas cuantas features, max 40 o asi, las manejo bien en state
por cierto, en una de las apps utilizo el autocomplete de angular material y en la funcion filter tengo sin mas metido un filter con 4 "||" en la funcion de filter y hace que el keyup sea lento cuando la lista es grande, hay algo que se le pueda hacer ahi para que sea instant el filtrado en keyup?
por cierto, tienes mucha experiencia con entrevistas en esto de software?
sharp void
No se que tanto pero en si pase 3 entrevistas hasta ahora , la primera para practicante hace unos años , y luego dos para posiciones senior en Angular
sharp void
entiendo, redis es algo similar al real time database de firebase?
no tengo tanta experiencia en Firebase pero creo no , Redis es usualmente mas para cache literalmente puedes almacenar lo que sea ahi y recuperarlo rapidamente eso me gusta , tambien puedes usar microservicios bajo pub/sub pero eso ya es otro tema , ahi mas me decanto por un sistema de colas como Kafka o RabbitMQ u otro
sharp void
hay unas cuantas features, max 40 o asi, las manejo bien en state
si eso esta bien ahi se mantiene en el estado
sharp void
por cierto, en una de las apps utilizo el autocomplete de angular material y en ...
no te entendi la verdad te refieres que tienes un debounce y quieres hacer un filtrado que sea rapido para el evento keyup ?
raw wedge
me lo anoto para echarle un ojo
ese codigo de ahi
en el filter, el array es un tochardo de objetos con mil campos y objetos anidados y filtro a la vez por 4 dentro del mismo
raw wedge
no tengo tanta experiencia en Firebase pero creo no , Redis es usualmente mas pa...
tienes algun consejo o info sobre como fueron, me siento mega infravalorado de sueldo en donde estoy ahora y quiero cambiar, me queria sacar si o si esta https://boards.greenhouse.io/paypay/jobs/4710337004?gh_src=d52f7a874us