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:libs [2024/07/30 12:15] 192.168.175.41 |
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:libs [2024/08/06 14:23] (actual) 192.168.175.41 |
||
---|---|---|---|
Línea 1: | Línea 1: | ||
- | Paso 1: Crear la Librería en Angular | + | 1: Crear la Librería en Angular |
Instalar Angular CLI si no lo tienes: | Instalar Angular CLI si no lo tienes: | ||
Línea 16: | Línea 16: | ||
</code> | </code> | ||
- | Agregar Código a la Librería: | + | Agregar código a la Librería: |
Modifica los archivos en projects/my-library/src/public-api.ts para exportar tu funcionalidad. Por ejemplo, puedes agregar un servicio: | Modifica los archivos en projects/my-library/src/public-api.ts para exportar tu funcionalidad. Por ejemplo, puedes agregar un servicio: | ||
Línea 38: | Línea 38: | ||
export * from './lib/my-library.service'; | export * from './lib/my-library.service'; | ||
- | </code> | + | Nota: Librería ejemplo |
- | Construir la Librería: | + | </code> |
+ | Para construir la Librería: | ||
<code> | <code> | ||
ng build my-library | ng build my-library | ||
</code> | </code> | ||
- | Paso 2: Publicar la Librería en GitLab | ||
- | Configurar el Registro de GitLab en .npmrc: | ||
- | Crea o modifica el archivo .npmrc en tu directorio de usuario (C:\Users\<tu_usuario>\.npmrc en Windows o ~/.npmrc en Linux/Mac): | + | 2. Configurar Nexus. |
+ | |||
+ | - Ve a la pestaña de "Repository" en la configuración. | ||
+ | - Haz clic en "Create repository" y selecciona "npm (hosted)". | ||
+ | - Configura el repositorio con un nombre, como npm-hosted, y ajusta las demás configuraciones según tus necesidades. | ||
+ | - Guarda los cambios. | ||
+ | |||
+ | 3. Preparar Librería para Publicar en Nexus | ||
+ | |||
+ | Para publicar librería es necesario configurar Nexus local con credenciales, entonces en una consola dentro del proyecto. | ||
<code> | <code> | ||
- | @mflibs:registry=http://10.1.140.120/api/v4/projects/133/packages/npm/ | + | |
- | //10.1.140.120/api/v4/projects/133/packages/npm/:_authToken=<your-token | + | npm login --registry=http://10.1.40.130:8081/repository/npm-hosted/ |
+ | |||
+ | Ingresa usuario y contraseña de Nexus | ||
+ | |||
+ | |||
+ | En el archivo C:\Users\{usuario}\.npmrc se genera la credencial como el siguiente ejemplo; | ||
+ | |||
+ | //10.1.40.130:8081/repository/npm-hosted/:_authToken=NpmToken.963f3fcd-2bb5-3570-aa39-acb05c1fe44f | ||
+ | |||
+ | </code> | ||
+ | |||
+ | Asegurate de agregar al archivo .npmrc de la librería la ruta y las credenciales. | ||
<code> | <code> | ||
+ | @mflibs:registry=http://10.1.40.130:8081/repository/npm-hosted/ | ||
+ | //10.1.40.130:8081/repository/npm-hosted/:_authToken=NpmToken.963f3fcd-2bb5-3570-aa39-acb05c1fe44f | ||
+ | </code> | ||
- | 2. **Publicar la Librería**: | + | Aegurate de agregar el publishConfig en el package.json |
+ | |||
+ | <code> | ||
+ | "publishConfig": { | ||
+ | "@mflibs:registry": "http://10.1.40.130:8081/repository/npm-hosted/" | ||
+ | } | ||
+ | </code> | ||
+ | |||
+ | |||
+ | |||
+ | 4. Publicar la Librería: | ||
Primero, asegúrate de estar en el directorio del workspace (donde está el archivo `package.json` principal) y luego publica la librería: | Primero, asegúrate de estar en el directorio del workspace (donde está el archivo `package.json` principal) y luego publica la librería: | ||
Línea 63: | Línea 96: | ||
<code> | <code> | ||
cd dist/my-library | cd dist/my-library | ||
- | npm publish --registry http://10.1.140.120/api/v4/projects/133/packages/npm/ | + | |
+ | npm publish ó npm publish --registry=http://10.1.40.130:8081/repository/npm-hosted/ | ||
</code> | </code> | ||
- | Paso 3: Instalar la Librería usando npm link | + | {{:ada:howto:sicoferp:factory:new-migracion-sicoferp:front:exito_publicanco.png?600|}} |
+ | |||
+ | Paso 5: Instalar la Librería usando npm link (Para probar local) | ||
Crear un enlace simbólico global: | Crear un enlace simbólico global: | ||
<code> | <code> | ||
- | Copy code | ||
cd dist/my-library | cd dist/my-library | ||
npm link | npm link | ||
Línea 85: | Línea 120: | ||
- | Paso 4: Importar la Librería desde GitLab | + | 6: Importar la Librería desde Nexus; |
- | Instalar la Librería desde el Registro de GitLab: | + | |
- | En el directorio de tu proyecto Angular, ejecuta: | + | En el directorio de tu proyecto principal de angular Angular, debe crear .npmrc y agregar las credenciales; |
<code> | <code> | ||
- | npm install @mflibs/my-library --registry http://10.1.140.120/api/v4/projects/133/packages/npm/ | + | @mflibs:registry=http://10.1.40.130:8081/repository/npm-hosted/ |
+ | //10.1.40.130:8081/repository/npm-hosted/:_authToken=NpmToken.963f3fcd-2bb5-3570-aa39-acb05c1fe44f | ||
</code> | </code> | ||
- | Paso 5: Descargar la Librería usando curl | ||
- | Descargar el Archivo del Paquete: | ||
- | Usa curl para descargar el archivo .tgz: | + | En el directorio de tu proyecto principal de Angular, ejecutar en la consola; |
<code> | <code> | ||
- | $ mkdir -p ./mflibs && curl -H "Authorization: Bearer jwPyfnRVxbD2ihgVPByN" http://10.1.140.120/api/v4/projects/133/packages/npm/@mflibs/encryption-lib/-/@mflibs/my-library.tgz -o ./mflibs/encryption-lib.tgz | + | npm install @mflibs/encryption-lib@1.0.15 --registry=http://10.1.40.130:8081/repository/npm-hosted/ |
</code> | </code> | ||
- | <code> | + | **Nota**: Con la librería ya agregada al package.json y el archivo .npmrc con las credenciales, no es necesario volver a instalar en el proyecto, solo es para la primera construcción. |
- | npm install ./@mflibs/my-library.tgz | + | |
- | </code> | + | **El orden adecuado para realizar cambios y publicar sería el siguiente; ** |
+ | |||
+ | - Realizar cambios | ||
+ | - git add . | ||
+ | - git commit -m 'fix: comentario' | ||
+ | - git push (Aquí se aumenta la versión con la tarea del Hook, si no lo tiene configurado debe aumentar manual en package.json y utilizar git push --no-verify) | ||
+ | - npm install | ||
+ | - npm run build | ||
+ | - cd dist/my-library | ||
+ | - npm publish | ||
+ | |||
**Consideraciones Finales** | **Consideraciones Finales** | ||
- | Asegúrate de tener correctamente configurado tu archivo .npmrc y de utilizar el token de acceso adecuado para autenticarte en el registro de GitLab. Además, asegúrate de que la URL del registro sea accesible desde tu red. | + | Asegúrate de tener correctamente configurado tu archivo .npmrc y de utilizar el token de acceso adecuado para autenticarte en el registro de Nexus. Además, asegúrate de que la URL del registro sea accesible desde tu red. |
+ | |||
+ | Si sigues estos pasos, deberías poder crear, publicar, y consumir tu librería Angular de manera efectiva utilizando tanto npm link como el registro privado de Nexus. | ||
+ | |||
+ | |||
+ | [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front|←Regresar]] | ||
- | Si sigues estos pasos, deberías poder crear, publicar, y consumir tu librería Angular de manera efectiva utilizando tanto npm link como el registro privado de GitLab. |