parcel.md

Microfontend:

Aplicación Parcel:

Parcel se utiliza para empaquetar cada microfrontend de la aplicación, lo que significa que cada microfrontend y sus dependencias se pueden empaquetar en un único archivo JavaScript.

Creación de Aplicación Parcel Angular:

Comando para la creación de aplicaciones con single spa:

npx create-single-spa

Seleccionan las siguientes opciones:

? Directory for new project .

? Select type to generate

 single-spa application / parcel

? Which framework do you want to use? 

angular

? Project name (can use letters, numbers, dash or underscore)

 microcliente01

? Would you like to add Angular routing? Yes

? Which stylesheet format would you like to use? CSS

The package single-spa-angular@9.0.1 will be installed and executed.
Would you like to proceed? Yes

? Does your application use Angular routing? Yes

? What port should your project run on? 4201

Instalación de dependencias:

npm install

Configuración de Aplicación Parcel Angular:

Configuración de variable de entorno:

Creación:

ng g environments 

Valores a agregar:

environment.development.ts

export const environment = {
    production:true
};

environment.ts

export const environment = {
    production:false
};

Configuración selector de componente:

Cambiamos el nombre del selector del app.component.ts:

en este ejemplo se cambia el nombre por mf1

@Component({
  selector: 'mf1',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

Indicamos a single que componente va a tomar para comprimir:

main.single-spa.ts

const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '<mf1 />',
  Router,
  NavigationStart,
  NgZone,
});

En caso de usar una aplicación core utilizar empty-route para el manejo de las rutas:

const routes: Routes = [
  {path:'**',component:EmptyRouteComponent}
];

Verificar microcliente:

Para poder saber si está funcionando correctamente hasta este punto debemos recurrir a la siguiente ruta:

http://localhost:4201/main.js

En esta ruta se mostrará el comprimido de la aplicación lista por ser consumida por el root.