web-dev-qa-db-fra.com

Puis-je passer des arguments à angular-cli au moment de la construction

Je souhaite transmettre des arguments personnalisés à angular-cli lors de la construction d'un Angular2 (TypeScript) app. Est-ce possible? Comment puis-je accéder à ces arguments dans mon code?

Le scénario est le suivant: j'en ai un Angular2 application avec 2 dispositions. Chaque mise en page a 3 couleurs (rouge, bleu, vert). Je veux construire toutes les combinaisons possibles. Une application par mise en page et couleur => layout1red, layout1green, layout2blue, ...

Je veux créer 6 fichiers de configuration JSON pour chaque build où je définis la disposition et la couleur, et peut-être quelques propriétés supplémentaires.

typescriptangularbuild-toolsangular-cli
29
Arthur Helmel

Il est possible de créer plusieurs fichiers de configuration avec @angular/cli.

Comme mentionné dans docs les fichiers de configuration personnalisés peuvent être ajoutés de la manière suivante:

  • créer un src/environments/environment.NAME.ts
  • ajouter { "NAME": 'src/environments/environment.NAME.ts' } à la apps[0].environments objet dans .angular-cli.json
  • utilisez-les via le --env=NAME flag sur les commandes build/serve.

Donc, vous auriez probablement besoin de 6 fichiers de configuration pour le dev et de 6 fichiers de configuration pour la prod.

Et puis pour accéder à ces variables, il suffit d'importer un objet d'environnement à partir de environment.ts fichier.

17
mikedanylov

Je n'ai pas bien compris votre question, je peux penser à deux façons d'y arriver:

A- Passer des arguments lors de la génération d'un nouveau projet:

1- Afin de pouvoir passer des arguments au angular cli, vous devez comprendre où voudriez-vous qu'il soit utilisé.

Si ces configurations sont utilisées dans votre mise en page, vous pouvez bifurquer le Angular cli et mettre à jour son plan et ajouter facilement votre propre configuration.

Voici le plan des composants:

     angular-cli/packages/@angular/cli/blueprints/component/files/__path__/__name__.component.ts

Qui ressemble à ceci:

@Component({
  selector: '<%= selector %>',<% if(inlineTemplate) { %>
  template: `

vous voyez selector? c'est le nom du composant avec lequel vous pouvez jouer et à la fin lorsque vous créez un nouveau projet, vous pouvez y passer vos propres drapeaux et l'utiliser.

Mais ce n'est pas la meilleure idée car vous avez toujours des ennuis lorsque Angular cli est mis à jour.

2- L'autre solution possible est d'utiliser ng eject

Cela générera la configuration webpack dans un fichier séparé et la placera dans le dossier racine de votre projet, vous pourrez ensuite jouer avec ce fichier et fournir votre configuration et la personnaliser selon votre application.

Mais encore une fois, je ne sais pas comment voulez-vous utiliser cette configuration.

C'est un candidat parfait pour votre build time configuration.

3- Utilisez la configuration environments:

Comme il a déjà été répondu, cela est également très pratique pour fournir build time configuration :

Suivre @mikedanylov, puis utilisez-le comme ceci dans vos fichiers:

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

if(environment.colorRed==='blue'){

     console.log('the color is blue');

}


 npm build -e=colorRed

B: Run time:

C'est une meilleure option, vous pouvez créer un appel dans votre index.html comme ceci:

  <script src="wherever/configurations/blue"></script>

puis à l'intérieur de la configuration, vous pourriez avoir:

  var configuration = {
      whatEver:"blue"
  }

et parce que c'est un script, il sera disponible partout et vous pourrez y accéder dans vos composants:

export class MyComponent{


    ngOnInit(){
        console.log('colour is : '+window['configuration.whatEver']); // obviously you can improve this and create type definitions and what not.
    }
}

Cela vous donnera plus de flexibilité pour mettre à jour votre configuration à l'avenir sans avoir à reconstruire votre application.

Évidemment, vous pouvez faire le même appel via un appel Ajax, mais je trouve ci-dessus plus agnostique aux applications.

3
Milad