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/31 13:44] 192.168.175.60 [Forma de exponer Microfrontends] |
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-microfrontend [2025/03/06 16:40] (actual) 192.168.175.219 |
||
|---|---|---|---|
| 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 96: | Línea 99: | ||
| Anteponer el nombre del microfrontend en todos los enlaces para que pueda ser tomado por el HOST | 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 en le path de app.routes.ts en 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> | <code> | ||
| Línea 102: | Línea 105: | ||
| </code> | </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.1738331063.txt.gz · Última modificación: 2025/01/31 13:44 por 192.168.175.60
Herramientas de la página
