Il n'est pas conseillé d'utiliser l' environment.*.ts vos fichiers de l'API de configuration de l'url. Il semble que vous devriez parce que ce mentionne le travail "environnement".
L'utilisation de ce est en fait la compilation de configuration. Si vous souhaitez modifier l'url de l'API, vous aurez besoin de re-construire. C'est quelque chose que vous ne voulez pas avoir à le faire ... il suffit de demander votre environnement de service d'assurance qualité :)
Ce que vous avez besoin est la configuration de l'exécution, c'est à dire l'application des charges de sa configuration lorsqu'il démarre.
Certains autres réponses toucher sur ce, mais la différence est que la configuration de la charge doit être dès que l'application démarre, de sorte qu'il peut être utilisé par un service normal à chaque fois qu'il en a besoin.
Pour mettre en œuvre la configuration de l'exécution:
- Ajouter un fichier de configuration JSON à l'
/src/assets/ le dossier (si c'est copié sur la compilation)
- Créer un
AppConfigService de la charge et de distribuer la config
- Charger la configuration à l'aide d'un
APP_INITIALISER
1. Ajouter un fichier de configuration pour /src/assets
Vous pourriez ajouter à un autre dossier, mais vous auriez besoin de le dire à la CLI que c'est un atout dans l' angular.json. Commencez en utilisant le dossier assets:
{
"apiBaseUrl": "https://development.local/apiUrl"
}
2. Créer AppConfigService
C'est le service qui sera injecté à chaque fois que vous avez besoin de la valeur de configuration:
@Injectable({
providedIn: 'root'
})
export class AppConfigService {
private appConfig: any;
constructor(private http: HttpClient) { }
loadAppConfig() {
return this.http.get('/assets/config.json')
.toPromise()
.then(data => {
this.appConfig = data;
});
}
// This is an example property ... you can make it however you want.
get apiBaseUrl() {
if (!this.appConfig) {
throw Error('Config file not loaded!');
}
return this.appConfig.apiBaseUrl;
}
}
3. Charger la configuration à l'aide d'un APP_INITIALISER
Pour permettre à l' AppConfigService à injecter en toute sécurité, avec la config complètement chargé, nous avons besoin de charger la config à l'application du temps de démarrage. Surtout, l'initialisation d'usine, la fonction doit renvoyer une Promise , de sorte que Angulaires sait attendre jusqu'à ce qu'il finit de se résoudre, avant de terminer de démarrage:
NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [
{
provide: APP_INITIALIZER,
multi: true,
deps: [AppConfigService],
useFactory: (appConfigService: AppConfigService) => {
return () => {
//Make sure to return a promise!
return appConfigService.loadAppConfig();
};
}
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
Maintenant, vous pouvez injecter partout où vous en avez besoin et toutes les config sera prêt à lire:
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
apiBaseUrl: string;
constructor(private appConfigService: AppConfigService) {}
ngOnInit(): void {
this.apiBaseUrl = this.appConfigService.apiBaseUrl;
}
}
Je ne peux pas dire assez fortement, la configuration de l'API url au moment de la compilation de configuration est un anti-modèle. Utiliser la configuration de l'exécution.
