Как вставить номер сборки или временную метку во время сборки в AngularCLI
Я хочу иметь временную метку или номер сборки где-нибудь в моем приложении Angular2, чтобы я мог узнать, использует ли пользователь старую кешированную версию или нет.
Как это сделать с AngularCLI в Angular2 при компиляции/сборке AOT?
Ответы
Ответ 1
- Установите плагин
npm install replace-in-file --save-dev
Добавить в prod environment src/environment/environment.prod.ts new
собственность
export const environment = {
production: true,
version: '{BUILD_VERSION}'
}
Добавить файл сборки replace.build.js
в корневой каталог вашей папки
var replace = require('replace-in-file');
var buildVersion = process.argv[2];
const options = {
files: 'src/environments/environment.prod.ts',
from: /{BUILD_VERSION}/g,
to: buildVersion,
allowEmptyPaths: false,
};
try {
let changedFiles = replace.sync(options);
console.log('Build version set: ' + buildVersion);
}
catch (error) {
console.error('Error occurred:', error);
}
добавить сценарии в package.json
"updateBuild": "node ./replace.build.js"
Используйте environment.version
в своем приложении
Перед сборкой позвоните npm run updateBuild -- 1.0.1
PS. Вы всегда должны помнить, что {BUILD_VERSION} никогда не фиксируется.
PS. Я написал немного лучшее решение в моем блоге
PS.3, как @julien-100000 упомянул, вы не должны фиксировать environment.prod.ts с обновленной версией. Обновление версии должно происходить только в процессе сборки. И никогда не должно быть совершено.
Ответ 2
Добавьте этот шаг к своей работе jenkins:
echo export class MyVersion {public static readonly number = '%SVN_REVISION%'} > src\my-version.ts
Вы можете получить доступ к номеру, как это:
import {MyVersion} from "../my-version";
export class AppComponent {
constructor() {
console.log("Welcome to MyApp version " + MyVersion.number);
}
}
Это решение + lightweight, + easy to read, + robust.
Ответ 3
Там нет необходимости устанавливать replace-in-file
или делать какие-либо шаги, упомянутые @VolodymyrBilyachat.
Простое решение: использование угловых сред
Просто внутри вашей желаемой среды. *. Ts file (для получения дополнительной информации о средах читайте angular-2-and-environment-variable) требуется package.json
следующим образом:
export const environment = {
version: require('../package.json').version
};
Затем в среде импорта вашего приложения:
import { environment } from '../environments/environment';
И у вас есть environment.version
. Если вы не cannot find name 'require'
, прочтите этот ответ
Больше информации
Примечание. Как упоминается в комментариях @VolodymyrBilyachat, он будет включать ваш файл package.json
в окончательный файл пакета.
Ответ 4
Я решил это, добавив комментарий в конце index.html
с последним хэшем коммита. Например:
ng build --prod
git rev-parse HEAD | awk '{print "<!-- Last commit hash: "$1" -->"}' >> dist/index.html
Затем вы можете выполнить "Просмотр источника" в браузере, посмотреть на нижнюю часть HTML-кода и увидеть развернутую версию вашего приложения.
Это, конечно, предполагает, что вы используете git в качестве системы управления версиями. Вы можете легко изменить git rev-parse HEAD
с помощью любой другой команды, которая выводит уникальную версию.
Ответ 5
Я думаю, для вашего случая: ng build
или ng serve
add в environment.ts
:
export class environment {
production: false,
buildTimestamp: new Date()
}
Тогда в вашем компоненте:
import { environment } from 'src/environments/environment'; // or path to your environment.ts file
...
const buildTimestamp = environment.buildTimestamp;
Это то, что я искал.
Ответ 6
Возможно, это хорошее решение для кого-то.. https://medium.com/@amcdnl/version-stamping-your-app-with-the-angular-cli-d563284bb94d
Он описывает, как использовать ваши git-данные и использовать в качестве номера сборки последний коммит-хеш.
Добавив шаг postinstall в файл package.json, вы получите файл при запуске сценария установки.