from - ¿Cómo incluir la revisión de git en la aplicación angular-cli?
deploy angular 6 heroku (5)
Fui con una versión modificada de Vilmantas Baranauskas.
src/index.base.html src/index.html a src/index.base.html y agregué un <meta name="revision" content=""> vacío dentro de HEAD
Ejemplo:
<head>
<meta charset="utf-8">
<title>MySuperAwesome Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="revision" content="">
<link rel="icon" type="image/x-icon" href="favicon.ico">
Luego modifico git.version.ts como este:
import ''rxjs/add/observable/combineLatest'';
import { readFileSync, writeFileSync } from ''fs'';
import { join } from ''path'';
import { Observable } from ''rxjs/Observable'';
const indexBasePath = join(__dirname, ''src'');
const exec = require(''child_process'').exec;
const revObs = new Observable<string>(s => {
exec(''git rev-parse --short HEAD'',
function (error: Error, stdout: Buffer, stderr: Buffer) {
if (error !== null) {
console.log(''git error: '' + error + stderr);
}
s.next(stdout.toString().trim());
s.complete();
});
});
const branchObs = new Observable<string>(s => {
exec(''git rev-parse --abbrev-ref HEAD'',
function (error: Error, stdout: Buffer, stderr: Buffer) {
if (error !== null) {
console.log(''git error: '' + error + stderr);
}
s.next(stdout.toString().trim());
s.complete();
});
});
Observable
.combineLatest(revObs, branchObs)
.subscribe(([revision, branch]) => {
console.log(`revision: ''${revision}'', branch: ''${branch}''`);
const baseHTML = readFileSync(join(indexBasePath, ''index.base.html''), ''utf8'');
const html = baseHTML
.replace(''<meta name="revision" content="">'', `<meta name="revision" content="${ revision }">`);
writeFileSync(
join(indexBasePath, ''index.html''),
html,
{ encoding: ''utf8'' }
);
});
En este ejemplo, solo pongo la revisión, pero puede ser más exhaustivo y poner la rama y la versión dentro de su sección HEAD de html
Necesito mostrar la revisión de git en la página de mi aplicación angular2. El proyecto se basa en angular-cli.
¿Cómo se puede extender la construcción para que la revisión de git se coloque, por ejemplo, en environment.ts u otro lugar accesible a la aplicación?
Las otras respuestas fueron útiles, pero preferí un enfoque más simple y directo. Aquí está el mío.
Ejecute npm install --save dev git-describe . Luego agrega git-version.js a la raíz:
// This script runs operations *synchronously* which is normally not the best
// approach, but it keeps things simple, readable, and for now is good enough.
const { gitDescribeSync } = require(''git-describe'');
const { writeFileSync } = require(''fs'');
const gitInfo = gitDescribeSync();
const versionInfoJson = JSON.stringify(gitInfo, null, 2);
writeFileSync(''git-version.json'', versionInfoJson);
Opcionalmente, puede agregar /git-version.json a su archivo .gitignore .
Actualice su package.json para hacer algo como esto:
"scripts": {
"build": "node git-version.js && ng build"
}
Luego agregue version-info.ts a la raíz de su proyecto:
export const versionInfo = (() => {
try {
// tslint:disable-next-line:no-var-requires
return require(''../../git-version.json'');
} catch {
// In dev the file might not exist:
return { tag: ''v0.0.0'', hash: ''dev'' };
}
})();
E import el versionInfo en su app.component.ts o en cualquier otro lugar donde quiera usarlo.
Para angular 6
1 Instalar git-describe como una dependencia de desarrollo
npm i git-describe -s
2 En su proyecto raíz cree un grab-git-info.js
const { gitDescribeSync } = require(''git-describe'');
const { writeFileSync } = require(''fs'');
const path = require(''path'');
const info = gitDescribeSync();
const infoJson = JSON.stringify(info, null, 2);
writeFileSync(path.join(__dirname, ''/src/git-version.json''), infoJson);
La salida del script grab-git-info.js será el archivo ''git-version.json'' en / src / que contendrá toda la información de git que necesita nuestra aplicación.
Para poder importar el archivo json (o cualquier otro archivo json) necesitamos agregar un archivo de definición declarando el módulo agregado para que el compilador Typescript lo reconozca.
- Bajo su / src cree el archivo typings.d.ts (lea más acerca de typings.d.ts aquí: https://angular.io/guide/typescript-configuration#typescript-typings )
/src/typings.d.ts:
declare module ''*.json'' {
const value: any;
export default value;
}
¡A partir de este momento, puede importar cualquier archivo json ubicado en / src como módulo!
En tu componente puedes importar este json.
import * as data from ''../../../git-version.json'';
...
public git = data;
En el html
Rev: {{git.hash}}
Finalmente agregue y lo más importante, ejecute el script antes de construir
En package.json agregar:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "node grab-git-info && ng build",
Y ejecuta la aplicación con
npm run build
Según lo sugerido por @Yuri, pude resolver esto mediante el uso de scripts npm .
Se definió
git.version.tsen la raíz del proyecto angular-cli:import fs = require(''fs''); import { Observable } from ''rxjs''; let exec = require(''child_process'').exec; const revision = new Observable<string>(s => { exec(''git rev-parse --short HEAD'', function (error: Error, stdout: Buffer, stderr: Buffer) { if (error !== null) { console.log(''git error: '' + error + stderr); } s.next(stdout.toString().trim()); s.complete(); }); }); const branch = new Observable<string>(s => { exec(''git rev-parse --abbrev-ref HEAD'', function (error: Error, stdout: Buffer, stderr: Buffer) { if (error !== null) { console.log(''git error: '' + error + stderr); } s.next(stdout.toString().trim()); s.complete(); }); }); Observable .combineLatest(revision, branch) .subscribe(([revision, branch]) => { console.log(`version: ''${process.env.npm_package_version}'', revision: ''${revision}'', branch: ''${branch}''`); const content = ''// this file is automatically generated by git.version.ts script/n'' + `export const versions = {version: ''${process.env.npm_package_version}'', revision: ''${revision}'', branch: ''${branch}''};`; fs.writeFileSync( ''src/environments/versions.ts'', content, {encoding: ''utf8''} ); });Agregado gancho pre-build en
package.json:"scripts": { "ng": "ng", ... "start": "ng serve --proxy proxy-config.json", "prebuild.prod": "ts-node git.version.ts", "build.prod": "ng build -prod", ... },Utilice el
src/environments/versions.tsgenerado en la aplicación.ACTUALIZACIÓN 10/2018: Aquí está la versión más legible de la secuencia de comandos, rxjs-version-agnostic:
import { writeFileSync } from ''fs''; import { dedent } from ''tslint/lib/utils''; const util = require(''util''); const exec = util.promisify(require(''child_process'').exec); async function createVersionsFile(filename: string) { const revision = (await exec(''git rev-parse --short HEAD'')).stdout.toString().trim(); const branch = (await exec(''git rev-parse --abbrev-ref HEAD'')).stdout.toString().trim(); console.log(`version: ''${process.env.npm_package_version}'', revision: ''${revision}'', branch: ''${branch}''`); const content = dedent` // this file is automatically generated by git.version.ts script export const versions = { version: ''${process.env.npm_package_version}'', revision: ''${revision}'', branch: ''${branch}'' };`; writeFileSync(filename, content, {encoding: ''utf8''}); } createVersionsFile(''src/environments/versions.ts'');
Tenga en cuenta que al usar angular-cli v7.0.6, también tuve que cambiar la invocación de script en package.json :
"scripts": {
...
"prebuild.prod": "ts-node -O ''{/"module/": /"commonjs/"}'' git.version.ts",
...
},
Use gulp task usando gulp-replace y git-rev-sync para agregar el hash y la rama en la compilación:
1) Crear la tarea trilla
var gulp = require(''gulp''),
replace = require(''gulp-replace''),
git = require(''git-rev-sync''),
gulp.task(''git'', function () {
gulp.src(''src/index.html'')
.pipe(replace(''{{git-branch}}'', git.branch()))
.pipe(replace(''{{git-hash}}'', git.short()))
.pipe(gulp.dest(''src/''))
});
// Build Tasks
gulp.task(''build'', [''git'']);
2) Agregue el siguiente código a index.html:
{{git-branch}}@{{git-hash}}
3) Ejecutar
gulp build