Angular 4 crée des assets/fichiers par environnement?

Nous utilisons des variables d'environnement dans notre application angulaire pour lire les paramètres, etc. mais y a-t-il un moyen de générer des assets/fichiers lors de la construction?Angular 4 crée des assets/fichiers par environnement?

Fondamentalement, nous aimerions créer un fichier 'auth/settings.js' dans le dossier assets contenant les identifiants client et apiUrl propres à chaque environnement. Ceux-ci seront utilisés dans l'index.html (donc en dehors du bootstrap de l'application angulaire)

par exemple. les valeurs des environment.ts exportées dans un fichier de sortie js/JSON dans le dossier des actifs afin qu'ils puissent être lus index.html

export const environment = { 
production: false, 
title: 'default', 
clientId: 'xxxx-xxxx-xxxx-xxxx-xxxx', 
clientUrl: 'https://localhost:4200/app', 
apiUrl: 'https://localhost/api' 

};

J'ai lu que vous pouvez utiliser mulitapps:

https://github.com/angular/angular-cli/wiki/stories-multiple-apps

Cela peut fonctionner, mais ressemble à beaucoup de copier-coller et nous aurons quelques versions de la construction - je ne suis pas sûr si vous pouvez déclarer les paramètres communs une fois et juste étendre les paramètres supplémentaires de l'application (héritage)?

Merci

Source

2017-10-18 Michael Harper

La question est de large, mais je crois quand même avez-vous regardé dans ce https://github.com/AngularClass/angular-starter, en l'utilisant J'ai été capable de faire 2 projets différents, chaque projet a 4 environnements différents, avec base de code unique, donc en utilisant webpack et avec ma version lisait le fichier de configuration JSON que je fournis en utilisant la variable EVN. –

Angular cli vous donne par défaut les fichiers d'environnement de développement et de production que vous pouvez utiliser. Pour stocker des informations comme ça. Vous pouvez également définir un fichier proxy pour vous aider à utiliser différents points de terminaison. Vous pouvez passer le fichier proxy en tant que paramètre à servir. –

@JamesQuick vous semble parler de https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md mais que ce n'est pas le point et que vous ne courez pas non plus 'sur la production. – Kuncevic

Ce que nous faisons dans notre cas est d'avoir fait un fichier config.json et config.[env-name].json dans app/config dossier configurés dans project assets. Le fichier config.json devient tiré par les cheveux avant de bootstrap angulaire en utilisant le navigateur Fetch API

Sur notre serveur de build nous remplaçons simplement le contenu de config.json avec config.staging.json ou config.prod.json basé sur la construction de l'environnement. Nous avons aussi la classe AppSettings qui est créée sur bootstrap. Voici comment il est ressemble à:

fetch(configUrl, { method: 'get' }) 
.then((response) => { 
    response.json() 
    .then((data: any) => { 
     if (environment.production) { 
     enableProdMode(); 
     }; 
     platformBrowserDynamic([{ provide: AppSettings, useValue: new AppSettings(data.config) }]).bootstrapModule(AppModule); 
    }); 
});

MISE À JOUR: Si vous avez besoin de coller des valeurs basées sur votre env pour index.html peut que vous deviez envisager de le faire sur votre serveur de build. Vous pouvez plutôt string replace les valeurs ou vous pouvez avoir index.[env-name].thml fichiers de sorte que vous venez d'écraser le index.html basé sur la construction de l'environnement.

Consultez également cette questions
- https://github.com/angular/angular-cli/issues/7506
- https://github.com/angular/angular-cli/issues/3855

Source

2017-10-21 01:18:28 Kuncevic

Salut Kuncevic - c'est ce que nous avons fini par faire :) –

Angular 4 crée des assets/fichiers par environnement?

Répondre

Questions connexes