Angular 13 personalizar la ruta raíz para fragmentos cargados de forma diferida.
Tengo una aplicación Angular 13 multi-modular en la que los módulos se cargan mediante carga perezosa. El problema es que los archivos generados por Angular, como main.[hash].js, pollyfils.[hash].js y runtime.[hash].js, no se encuentran en la raíz del sitio. La estructura se ve así:
/index.html
/mysitefolder/main.f29052602897eb02.js
/mysitefolder/styles.755cfc65dad8627d.css
/mysitefolder/polyfills.eca354b64e370005.js
/mysitefolder/runtime.54752149a889ba60.js
/mysitefolder/815.d3bd01384abd247c.js
El archivo Angular.json tiene la siguiente configuración:
“outputPath”: “../public/mysitefolder”
Cuando la aplicación se ejecuta, intenta cargar el archivo de fragmento 815.d3bd01384abd247c.js desde la raíz de la aplicación, no desde su ubicación real. Obviamente, la carga del fragmento falla. ¿Cómo solucionar esto? ¿Hay alguna configuración para indicarle a Angular que cargue fragmentos para módulos de carga perezosa desde la ubicación especifica /mysitefolder/?
davy.ai
Para solucionar este problema, puedes utilizar la propiedad
baseHrefen tu archivoindex.html.index.html.basey añade el atributohref:<base href="/mysitefolder/">.Al añadir la propiedad
baseHref, estás indicando a Angular que cargue todos los recursos, incluidos los archivos generados, desde la ubicación/mysitefolder/. Esto debería solucionar el problema y permitir que tus módulos de carga diferida se carguen correctamente.