web-dev-qa-db-fra.com

Comment insérer un numéro de construction ou un horodatage au moment de la construction dans l'interface de ligne de commande angulaire

Je souhaite disposer d'un numéro d'horodatage ou de construction quelque part sur mon application Angular2 afin de pouvoir savoir si un utilisateur utilise une ancienne version en cache ou non.

Comment faire cela avec AngularCLI dans Angular2 au moment de la compilation/compilation AOT?

angularangular-cli
32
Rodney
  1. Installer pluginnpm install replace-in-file --save-dev

  2. Ajouter à l'environnement de production src/environment/environment.prod.ts new property

    export const environment = {
  production: true,
  version: '{BUILD_VERSION}'
}

  3. Ajouter le fichier de construction replace.build.js à la racine de votre dossier

    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. ajouter des scripts à package.json

    "updateBuild": "node ./replace.build.js"

  5. Utilisation environment.version dans votre application

  6. Avant la construction appelez npm run updateBuild -- 1.0.1

PS Vous devez toujours vous rappeler que {BUILD_VERSION} n'est jamais engagé.

PS J'ai écrit une meilleure solution en mon blog

PS.3 comme @ julien-100000 a mentionné que vous ne devriez pas valider environment.prod.ts avec la version mise à jour. La mise à jour de version doit avoir lieu uniquement dans le processus de construction. Et ne devrait jamais être commis.

35
Volodymyr Bilyachat

Ajoutez cette étape à votre travail en jenkins:

echo export class MyVersion {public static readonly number = '%SVN_REVISION%'} > src\my-version.ts

Vous pouvez accéder au numéro comme ceci:

import {MyVersion} from "../my-version";

export class AppComponent {
    constructor() {
        console.log("Welcome to MyApp version " + MyVersion.number);
    }
}

Cette solution est + lightweight, + easy to read, + robust.

15
slartidan

Il n'y a pas besoin d'installer replace-in-file ou faites l’une des étapes @VolodymyrBilyachat mentionnées.

Solution simple: Utilisation des environnements Angular

Juste à l’intérieur de l’environnement de votre choix. Le fichier *. Ts (Pour plus d’informations sur les environnements, lisez variables angulaires-2-et-d'environnement ) nécessite package.json ainsi:

export const environment = {
    version: require('../package.json').version
};

Ensuite, dans votre environnement d'importation d'applications:

import { environment } from '../environments/environment';

Et tu as environment.version. Si vous obtenez cannot find name 'require' _ erreur, Lire cette réponse

Plus d'infos

Remarque: Comme @VolodymyrBilyachat est mentionné dans les commentaires, cela inclura votre package.json fichier dans le fichier de paquet final.

7
Vahid

J'ai résolu ce problème en ajoutant un commentaire à la fin de index.html avec le dernier hachage de commit. Par exemple:

ng build --prod

git rev-parse HEAD | awk '{print "<!-- Last commit hash: "$1" -->"}' >> dist/index.html

Vous pouvez ensuite faire un "View Source" dans le navigateur, regarder au bas du code HTML et voir la version déployée de votre application.

Bien entendu, cela suppose que vous utilisiez git comme système de gestion de versions. Vous pouvez facilement changer git rev-parse HEAD avec toute autre commande générant une version unique.

2
tedw