Nous hébergeons une nouvelle application avec angular 6 et nous avons de nombreux serveurs avec des URL différentes, je veux les changer automatiquement (comme le fichier .property en java). après avoir cherché dans google, j'ai obtenu des réponses comme changer les chemins dans le fichier environment.ts, donc cela affectera tous les composants. mais ce n'est pas exactement mes exigences, cela signifie que si je change d'URL dans le fichier environment.ts, nous devons enregistrer le fichier et nous devons le compiler à nouveau. C'est donc exactement le problème auquel je suis confronté, je ne veux pas enregistrer / compiler le fichier.
Veuillez m'aider dans cette situation.
Fichier service.ts.
export const environment = {
production: false,
baseUrl: "http://rest/somerestservice"
};
J'ai essayé de changer l'URL de base du fichier environment.ts, c'est fonctionne correctement mais après avoir enregistré le fichier, je ne veux pas enregistrer le fichier, il devrait changer automatiquement.
.service.ts file.
emplLoginCheckUrl = this.baseUrl+"/checkValidUser";
validateUserDetails(employeeDetails): Observable<any> {
console.log(this.baseUrl);
return this._httpClinet.post(this.emplLoginCheckUrl, employeeDetails);
}
environment.ts fichier.
emplLoginCheckUrl = this.baseUrl+"/checkValidUser";
Attendu:
Les URL devraient changer automatiquement sans enregistrer / exécuter / compiler / construire encore et encore, car je ne peux enregistrer qu'une seule fois / exécution / compilation / construction pendant l'hébergement. après l'hébergement si je veux changer d'URL, je ne peux pas y aller, changer le chemin et je ne peux pas le recompiler.
3 Réponses :
Vous pouvez transmettre le point de terminaison en tant que paramètre de requête lors de l'accès à l'application pour la première fois comme ceci:
http://localhost/yourapplication?baseUrl=http://rest/somerestservice
, puis lire cette valeur de paramètre de requête dans votre app.component.ts et définissez-le sur la variable d'environnement baseUrl .
Attention, même si cela fonctionnerait, je ne sais pas si ce serait le moyen le plus élégant d'y parvenir.
Mise à jour: comme OP a demandé le code
Démo: https://angular-sku9xx.stackblitz.io/?baseUrl=http://rest/somerestservice
Code de la démo: https://stackblitz.com/edit/angular-sku9xx?file=src/app/app .component.ts
Pouvez-vous partager le code, je suis un peu confus, je ne l'ai pas bien compris.
Réponse mise à jour avec une démo.
Thx @ Awad Maharoof votre solution ne fonctionne pas ici, le même code fonctionne dans votre cas. je ne sais pas où je suis en retard.
@ Awad Maharoof détecte automatiquement les changements dans votre cas, mais dans mon cas, ce n'est pas le cas, pouvez-vous m'aider là où je suis en retard, j'ai essayé le même code que vous avez utilisé.
Il s'agit d'un scénario courant pour l'application Angular.
Autrement dit, vous ne voulez pas construire et compiler à nouveau le code sur le serveur, si vous voulez changer l'URL de l'API backend. Voici l'approche que j'utilise avec mes projets angulaires.
Approche:
1. Créez un fichier config.json dans le dossier assets , car le dossier assets est présent sur le serveur.
{ // in app.module.ts providers
provide: APP_INITIALIZER,
useFactory: ConfigurationServiceFactory,
deps: [ConfigService],
multi: true
}
---------------------------------------------------
// ConfigurationServiceFactory which is used at App initialization
export function ConfigurationServiceFactory(configService: ConfigService) {
return () => configService.load();
};
---------------------------------------------------
// this method is called at application start up
// and config.json file is read here, and the service url from
// constant file is replaced by the value provided in the assets's config.json
load() {
const configUrl = '~/../assets/config.json';
return new Promise((resolve) => {
this.http.get(configUrl)
.toPromise()
.then((config: any) => {
this.config = config;
console.log('Configurationd fetched : ', this.config);
//----- variable is updated now with new value from the file -------
AppConstants.xhr.url.serviceUrl = this.config.serviceUrl;
resolve(true);
})
.catch( (err) => console.log(err));
});
}
2. Créez une variable serviceUrl dans votre fichier constantes , car vous aurez un fichier de constante pour votre application angulaire. Attribuez à cette variable la valeur vide car cette variable conservera l'URL du service mise à jour ultérieurement.
export class AppConstants {
public static xhr = {
url: {
serviceUrl: '' // <===== empty value
}
}
}
3. Implémentez APP_INITIALIZER pour lire le fichier config.json au démarrage de l'application. Et lisez la valeur de serviceUrl dans config.json et affectez cette valeur à la même variable présente dans le fichier constantes .
XXX
Pour chaque appel HTTP , utilisez les constantes du fichier serviceUrl comme URL de base.
this.http.get('${AppConstants.xhr.url.serviceUrl}api/roles/list')
En changeant la valeur de la variable dans le dossier assets config.json sera récupéré au démarrage et remplacera la variable de fichier constante, que nous utiliserons pour apicalls.
Code d'initialisation d'application avec fichier config.json (pour référence)
Pourriez-vous partager votre dossier d'actifs avec le fichier config.json, veuillez publier une démo. Je pense que ce serait utile pour moi, merci @ Abhishek Kumar.
@pktechie Je suis incapable de lire le fichier config.json à partir du dossier assets dans stackblitz, mais j'ai implémenté cette approche dans mes projets, alors essayez cette solution localement sur un projet angulaire factice pour voir cette approche. config.json affiché dans la réponse est la seule chose conservée dans le dossier assets .
actuellement où vous modifiez les valeurs des variables, je veux dire dans quel dossier back-end ou front-end? si je change la valeur du backend, cela affectera-t-il automatiquement, veuillez me le faire savoir.
@pktechie Je prends une variable vide dans mon fichier frontal, et à l'initialisation de l'application angulaire, je lis un fichier à partir du dossier assest sur l'application angulaire et remplace cette variable vide par la valeur du fichier que j'ai lu. Et dans chaque service, utilisé cette variable comme URL de base pour les requêtes http. Donc, tout se passe sur le front-end
@ Abhishek Kumar oui je suis d'accord que vous et moi vous avez, ce que vous m'expliquez. pourquoi j'ai posé la question ci-dessus est tout ce que j'ai fait de la même manière que vous m'avez expliqué, mais si je change l'URL du dossier des actifs, cela devrait affecter automatiquement l'application entière, mais ici ce n'est pas le cas et cela affectera le moment où j'enregistrerai le fichier config.json après changement d'URL. plz aidez-moi dans ce cas, je ne veux pas enregistrer le fichier après avoir changé la valeur de la variable, il devrait fonctionner automatiquement et merci pour l'aide.
@pktechie, d'accord, il existe un autre moyen d'utiliser également environment.ts mais cela aussi nécessitera une sauvegarde de fichier, reportez-vous à: jvandemo.com/... , medium.com/@balramchavan/…
@pktechie donc si vous n'enregistrez pas de fichier, alors d'où vous allez changer l'URL du service. Modifiez-vous l'URL à partir d'un écran de l'interface utilisateur? - si oui, alors à partir de cet écran, vous pouvez obtenir la valeur peut mettre à jour le serviceURL conservé dans le fichier constant, qui est automatiquement utilisé pour toutes les URL de base
voir @ Abhishek Kumar nous utilisons le fichier .property de java là-bas, nous changeons d'url, si nous changeons d'URL là-bas, cela devrait affecter automatiquement ici aussi, je recherche ce genre de scénario avez-vous des suggestions, même si j'ai essayé le fichier d'environnement, mais là aussi, nous devons sauvegarder le fichier / compiler le fichier. ce fichier de changement d'URL doit être commun à la fois au frontal et au back-end.
@pktechie car le déclencheur se produit depuis le backend, donc pour mettre à jour le front-end, le frontend doit demander au backend sur une base particulière pour savoir si l'URL du service est mise à jour ou non (son appel est une interrogation). OU vous pouvez voir les événements envoyés par le serveur.
@ Abhishek Kumar pouvons-nous changer le code d'état d'erreur basé sur l'URL dans la méthode init () de appservice.ts comme .catch ((err) => {if (some error status code == code) {AppConstants.xhr.url.serviceUrl = this .config.serviceUrl;}})
Il s'agit essentiellement du modèle "fichier bien connu". C'est un chemin sur un serveur Web qui expose les informations de configuration. Les applications doivent récupérer la configuration en direct via une requête HTTP pendant le démarrage, et peuvent actualiser la configuration en récupérant à nouveau les données.
https://ma.ttias.be/ bien-connu-annuaire-serveurs-web-aka-rfc-5785 /
Il est basé sur un RFC IETF:
Veuillez vérifier ma réponse. stackoverflow.com/questions/54233032/...