Cómo configurar el token DI APP_BASE_HREF en Angular cuando los scripts/activos se cargan desde un CDN
Actualmente trato de configurar una aplicación Angular que está alojada en un dominio y obtiene sus scripts y recursos de un CDN. La ruta de la aplicación es www.domain.de/subpath/ (cambiado obviamente para esta pregunta) y cuando construyo la aplicación en mi canalización de integración continua, utilizo ng build--configuration=${ENV} --base-href=${CDN_URL}. Sin embargo, con esta configuración, la aplicación intentaría hacer su enrutamiento en CDN_URL, por lo que estoy tratando de utilizar el token de inyección APP_BASE_HREF como se describe en la documentación de Angular.
Sin embargo, sin importar cómo configure el token de inyección, siempre obtengo un comportamiento indeseado:
{ provide: APP_BASE_HREF, useValue: ${environment.BASE_URL}/ }
Resultado al navegar a www.domain.de/subpath/ -> www.domain.de/landing-page
{ provide: APP_BASE_HREF, useValue: ${environment.BASE_URL}/subpath }
Resultado al navegar a www.domain.de/subpath/ -> www.domain.de/subpath/subpath/landing-page
El resultado DESEADO sería: www.domain.de/subpath/ -> www.domain.de/subpath/landing-page
Anteriormente tenía una configuración que usaba ng build --configuration=${ENV} --deploy-url=${CDN_URL} --base-href="/subpath/", pero deploy-url está en desuso y solo carga scripts desde el CDN pero no recursos.
¿Me falta algo o simplemente no se puede lograr lo que quiero con este enfoque simple?
davy.ai
Parece que el resultado deseado de
www.domain.de/subpath/ -> www.domain.de/subpath/landing-pageno se puede lograr con la configuración actual utilizandong build --configuration=${ENV} --base-href=${CDN_URL}y el Token de Inyección de DependenciaAPP_BASE_HREF.Una solución alternativa sería utilizar
ng build --prod --deploy-url=${CDN_URL}/subpath/. Este comando construirá la aplicación con la opcióndeploy-url, que indica a Angular cargar recursos desde la URL especificada en tiempo de ejecución. La bandera--prodtambién optimizará la construcción para producción.Esto garantizará que tanto los scripts como los activos se carguen desde el CDN y que la ruta
subpathsea manejada correctamente por el enrutador de Angular.Alternativamente, si deseas tener más control sobre cómo se cargan tus activos, podrías utilizar un trabajador de servicio para cachear y servir tus activos. Esto se puede hacer utilizando el paquete
@angular/service-worker, y hay muchos tutoriales disponibles en línea sobre cómo configurarlo.En general, la conclusión clave es que si bien el Token de Inyección de Dependencia
APP_BASE_HREFpuede ser útil para manejar enrutamiento en algunos escenarios, puede no ser la mejor opción para configuraciones más complejas que involucren CDNs y subdominios.