Как вставить номер сборки или временную метку во время сборки в AngularCLI

Я хочу иметь временную метку или номер сборки где-нибудь в моем приложении Angular2, чтобы я мог узнать, использует ли пользователь старую кешированную версию или нет.

Как это сделать с AngularCLI в Angular2 при компиляции/сборке AOT?

Ответ 1

  1. Установите плагин npm install replace-in-file --save-dev
  2. Добавить в prod environment src/environment/environment.prod.ts new собственность

    export const environment = {
      production: true,
      version: '{BUILD_VERSION}'
    }
    
  3. Добавить файл сборки 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);
    }
    
  4. добавить сценарии в package.json

    "updateBuild": "node ./replace.build.js"
    
  5. Используйте environment.version в своем приложении

  6. Перед сборкой позвоните 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, вы получите файл при запуске сценария установки.