Si alguna vez has tenido que modificar un componente ya sea por algún nuevo requerimiento o bug, basta tal vez con aplicar la solución sobre el mismo componente o de algún otro si hay herencia. Ahora bien, si por alguna necesidad tienes que crear otro componente nuevo que cumple con la misma (ó similar) funcionalidad quizás te plantees el versionado.

¿A qué nos referimos con el versionado de componentes de Angular?

Bueno, tan sencillo como crear un nuevo componente añadiendo por ejemplo el sufijo “Vi” en el nombre de la clase y “-vi” en su selector siendo “i” el número de versión. Así por ejemplo tener la segunda versión de un componente sería “V2” para los nombres de la clase del componente y “-v2” de su selector. Si es el vaso de una directiva, su selector sería “V2”. Siempre intentando seguir la guía de estilos promovida desde el propio Angular. ¿Y los nombres de los archivos? Pues en este caso el sufijo “-vi”.

De esta forma tan visual se sabe si ese componente es una versión de otro existente.

Componente

Tenemos un componente cuyo nombre de archivo es “user-profile.component.ts”:

@Component({
  selector: 'af-user-profile',
  ...
})
export class UserProfileComponent { }

Ahora queremos crear una segunda versión del componente anterior. El nombre del archivo sería: “user-profile-v2.component.ts”.

@Component({
  selector: 'af-user-profile-v2',
  ...
})
export class UserProfileV2Component { }

Directiva

Tenemos una directiva con el nombre de archivo “highlight.directive.ts”:

@Directive({
  selector: '[afHighlight]',
})
export class HighlightDirective {}

Y ahora con una segunda versión de la directiva anterior. El nombre del archivo sería: “highlight-v2.directive.ts”.

@Directive({
  selector: '[afHighlightV2]',
})
export class HighlightV2Directive {}

Resumen

Ya has visto la operativa del naming usado para los componentes y directivas donde podría encajar también para los servicios. Es una manera de versionar manteniendo el antiguo componente por algún motivo. Si necesitas crear más versiones básicamente sería seguir aumentando el valor de la versión: “V3”, “V4”, etc. También puedes crearlo desde cero pero con otro nombre (sin aplicar los sufijos).

Ante esto, tan solo recordar que existen fórmulas que también pueden ayudar los patrones de diseño como el patrón Adaptador (ó Adapter ó Wrapper) si es que quieres compatibilizar el contenido de cara hacia afuera mientras haces cambios dentro de él.