Herramientas de usuario
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-microfrontend
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-microfrontend [2025/01/30 15:45] 192.168.175.214 [En cada Microfront] |
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-microfrontend [2025/03/06 16:40] (actual) 192.168.175.219 |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| - | ====== Microfrontends Module federation. ====== | + | ====== Microfrontends Webpack (Module federation). ====== |
| Línea 13: | Línea 13: | ||
| <code> | <code> | ||
| npm i @angular-architects/module-federation@18.0.6 | npm i @angular-architects/module-federation@18.0.6 | ||
| + | </code> | ||
| + | |||
| + | <code> | ||
| ng g @angular-architects/module-federation:init --project remote --port 4201 --type remote | ng g @angular-architects/module-federation:init --project remote --port 4201 --type remote | ||
| </code> | </code> | ||
| Línea 53: | Línea 56: | ||
| shared: { | shared: { | ||
| - | ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }), | + | ...shareAll({ singleton: true, strictVersion: false, requiredVersion: 'auto' }), |
| }, | }, | ||
| Línea 92: | Línea 95: | ||
| </code> | </code> | ||
| + | **Modificacion en la navegacion de los microfrontends** | ||
| + | Anteponer el nombre del microfrontend en todos los enlaces para que pueda ser tomado por el HOST | ||
| + | |||
| + | * router.navigate Asi siendo **"caja-menores/"** el nombre con el que se llamo el microfront en el path de app.routes.ts desde el HOST | ||
| + | |||
| + | <code> | ||
| + | this._router.navigate([`/cajas-menores/gastos`]); | ||
| + | </code> | ||
| + | |||
| + | **Se debe cargar el headerInterceptor en el app.config.ts del HOST** | ||
| + | |||
| + | <code> | ||
| + | |||
| + | const loadInterceptor = async () => { | ||
| + | const headersInterceptor = await loadRemoteModule({ | ||
| + | type: 'module', | ||
| + | remoteEntry: `${environment.mfcajas_menores_url}/remoteEntry.js`, | ||
| + | exposedModule: './HeaderInterceptor' | ||
| + | }).then(m => m.headersInterceptor); | ||
| + | | ||
| + | return headersInterceptor; | ||
| + | }; | ||
| + | |||
| + | // Creamos un interceptor que delegará al interceptor remoto una vez que esté cargado | ||
| + | const delegatingInterceptor: HttpInterceptorFn = (req, next) => { | ||
| + | return new Observable(subscriber => { | ||
| + | loadInterceptor().then(remoteInterceptor => { | ||
| + | remoteInterceptor(req, next).subscribe(subscriber); | ||
| + | }); | ||
| + | }); | ||
| + | }; | ||
| + | |||
| + | </code> | ||
| + | |||
| + | **inyectar la funcion arriba ilustrada "delegatingInterceptor()" de tipo HttpInterceptorFn asi:** | ||
| + | |||
| + | <code> | ||
| + | |||
| + | provideHttpClient( | ||
| + | withInterceptors([delegatingInterceptor]) | ||
| + | ) | ||
| + | | ||
| + | </code> | ||
| + | [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front|←Regresar]] | ||
ada/howto/sicoferp/factory/new-migracion-sicoferp/front/configuracion-microfrontend.1738251928.txt.gz · Última modificación: 2025/01/30 15:45 por 192.168.175.214
Herramientas de la página
