Según cita Wikipedia

Angular es un framework para aplicaciones web desarrollado en TypeScript, de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas sean más fáciles.

Al entrar en la documentación de cómo iniciar un proyecto con Angular, muchas veces vemos que se asume que lo que se desea crear es un proyecto desde cero y con frecuencia esto no es así. En ocasiones, nos encontramos con la necesidad de querer agregar una funcionalidad en nuestra web que está hecha con Laravel, Django, Spring o cualquier otro framework y asumimos que no podemos usar Angular para esto, o simplemente optamos por alguna otra alternativa como Vue o React.

Por ese motivo, en este Post hablaremos de los Entry Components de Angular que permiten que puedas agregar un componente del mismo sin necesidad de que estén dentro del componente principal de la aplicación.

Nota: En este post no entraremos en detalle de como instalar Angular, ya eso lo puedes consultar en la web oficial del proyecto.

Lo primero es crear una aplicación como normalmente lo harías con Angular:

ng new mi-proyecto-angular
cd mi-proyecto-angular

Ahora, creamos el componente que queremos que sea utilizado en cualquier parte de nuestra aplicación.

ng g component FooBar

Finalmente, ya tenemos nuestro component FooBar en la carpeta src/app/foo-bar/

Normalmente para ejecutar esto en una aplicación de Angular solo deberíamos colocar dentro de nuestro HTML el componente FooBar dentro del componente App así:

<app>
  <foo-bar></foo-bar>
<app>

Pero como comentamos antes, la idea es colocar ese componente foo-bar en cualquier parte de cualquier aplicación, sin importar en cuál framework esté hecho, si es un HTML debería seguir funcionando. Para eso, necesitamos hacer tres cosas.

  1. Definir el componente FooBar como un Entry Component en Angular.
  2. Compilar el código de nuestra aplicación para generar los recursos de Javascript y Css.
  3. Colocar el componente e importar los recursos compilados en el HTML donde queremos usarlo.

Definir el Entry Component

Vamos a definir el componente en nuestra Main app. Lo primero que debemos hacer es actualizar nuestro App Module para que Angular se entere de que existe un Entry Component.

import { BrowserModule } from '@angular/platform-browser';
import { DOCUMENT } from '@angular/common';
import { NgModule, Inject, Component, ApplicationRef } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FooBarComponent } from './foo-bar/foo-bar.component';

@NgModule({
  imports: [
                BrowserModule,
                FormsModule
  ],
  entryComponents: [
                FooBarComponent
  ]
})
export class AppModule {

  private browserDocument;

  ngDoBootstrap(appRef: ApplicationRef) {
                if (this.browserDocument.getElementsByTagName('foo-bar').length > 0) {
                appRef.bootstrap(FooBarComponent);
                }
  }

  constructor(@Inject(DOCUMENT) private document: any) {
                this.browserDocument = document;
  }
}

Como se puede ver en la línea 22, Angular lee las etiquetas del documento y si coincide con el selector de nuestro componente, realiza el boostrap del mismo. En nuestro caso, al encontrar alguna etiqueta , Angular inicializará nuestro componente.

Compilar el código

Como comentamos anteriormente, la idea de todo esto es poder utilizar los entry components en cualquier aplicación ajena a la nuestra. En este caso, es importante tener en cuenta que para realizar esto debemos de compilar el código de nuestra aplicación e importarlo a donde lo queramos utilizar. Esto solo aplica para el caso de usar Entry Components en una aplicación que no sea Angular.

De igual forma, nuestra recomendación es que si vas a iniciar una aplicación desde cero lo hagas como una aplicación SPA tal cual como se realiza en el Hello World de la documentación oficial de Angular.

Para compilar el código de nuestra aplicación debemos ejecutar el siguiente comando:

ng build --prod

Esto compilará y minificara todo el código TypeScript, Sass, módulos, componentes, librerías de terceros, etc. en los siguientes recursos:

Esto compilará y minimizará todo el código TypeScript, Sass, módulos, componentes, librerías de terceros, etc. en los siguientes recursos:

  • inline.bundle.js: Archivo para cargar lo relacionado con WebPack.
  • main.bundle.js: Archivo que contiene el código fuente de nuestros componentes.
  • polyfills.bundle.js: Archivo usado para portar nuestra aplicación a diferentes navegadores.
  • scripts.bundle.js: Archivo que incluye la sección scripts del archivo de configuración .angular-cli.json.
  • styles.bundle.js: Archivo de estilos aunque originalmente están en css o sass.
  • vendor.bundle.js: Archivo que comprime todas las dependencias de nuestros componentes.

Por lo general, Angular coloca estos recursos en la carpeta dist en la raíz de nuestro proyecto.

Importar los recursos compilados del Entry Component.

Una vez compilados los recursos, ahora podemos importarlos en la aplicación donde queramos utilizarla.

<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="scripts.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>

Ahora con incluir nuestro componente en cualquier parte del html, Angular debería renderizarlo correctamente.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My App</title>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="scripts.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</head>

<body>
...
<foo-bar />
...
</body>

</html>

Conclusión

Muchas veces pensamos que para crear un componente que será incrustado en una aplicación externa estamos obligados a usar Vue, React, Polimer y excluimos Angular de las opciones a elegir.

No podemos negar que la creación de un Entry Componente en Angular para ser incluido en otra aplicación es más complicado que en Vue o React, pero si queremos continuar con el estándar y buenas prácticas que nos ofrece Angular para el desarrollo de aplicaciones podemos usarlo tanto como para una aplicación SPA como para un simple componente independiente.

Para mayor información sobre los Entry Components, te invitamos a que leas la documentación oficial de Angular.

Summary
Angular - Entry Components
Article Name
Angular - Entry Components
Description
Cómo crear un Entry Componente en Angular que pueda ser usado para una aplicación SPA o un simple componente independiente según las buenas prácticas de Angular.
Author
Publisher Name
PDG Solutions
Publisher Logo

Compartir:


Omar Yepez

Consultor/Desarollador de aplicaciones Web/Desktop/Mobile desde hace 10 años en los lenguajes Java, PHP y Python.