В приложениях Angular есть некоторые данные, которые разработчик должен изменять для каждой сборки в зависимости от типа использования.
Например, вам может потребоваться изменить путь или URL-адрес API для локальной разработки и тестирования или развертывания сервера в реальном времени.
И, конечно же, раздражает, что вам может потребоваться перестроить все приложение, чтобы изменить это крошечное значение свойства внутри вашего приложения.
Бывает много..
Это происходит все время…
В этом посте я хотел бы помочь вам легко выйти из этой глупой ситуации.
За несколько шагов вы измените содержимое уже созданных и развернутых файлов приложения, и это изменение вступит в силу немедленно.
{ property : value , property2 : value2, }
1- создайте новый файл типа json и сохраните его в папке с ресурсами, так как эта папка не компилируется при каждом запуске приложения. 089
import { Injectable } from ‘@angular/core’; @Injectable({ providedIn: ‘root’ }) export class ConfigService { config_data: any; // replace any with the type of data you want to store constructor() {} }
2- создайте службу для хранения данных (в нашем случае я назвал ее ConfigService
3- мы будем использовать HttpClient для получения данных из файла json в службу каждый раз, когда приложение запускается.
поэтому мы будем внедрять HttpClient в нашу функцию конструктора в ConfigService
import { HttpClient } from ‘@angular/common/http’; constructor (private http: HttpClient) {}
Этот шаг является самым важным. Мы создадим функцию load(), которая будет получать данные из файла json и сохранять их в этом ConfigService.
load() { const json_file_path= ‘assets/replace_this_with_json_file_path’; return new Promise((resolve, reject) => { this.http.get<any>(json_file_path).toPromise().then( result => { this.config_data = result; resolve(this.config_data); }).catch(() => { reject(`couldn’t load file ‘${json_file_path}’ : ${JSON.stringify(result)}`); }); }); }
4- это функция load(), в которой мы используем HttpClient для загрузки данных из json-файла в ConfigService.
Возврат нового Promise() при работе с асинхронным потоком данных (HttpClient), что означает, что нам нужно подождать пока мы не получим один из двух результатов ответа/ошибки и с помощью этого обещания обработаем их в форме разрешения/отклонения соответственно.
обратите внимание, что после того, как мы использовали свойство config_data для хранения данных, которые мы извлекаем из http-запроса внутри наша функция. Чтобы мы могли внедрить наш сервис везде, где нам нужно в нашем приложении, и использовать это свойство.
Таким образом, вы можете изменить данные внутри файла json даже после завершения сборки, даже после завершения развертывания, и вы повторяете файл содержимое на реальном сервере, и используя этот запрос внутри функции load(), вы получите новое значение.
5- теперь мы должны вызвать функцию load() после инициализации приложения. для этого мы создаем функцию в app.module.ts и используем ее внутри массива провайдеров следующим образом:
import { ConfigService } from 'ConfigService_path'; /* before @NgModule({}) */ export function getConfigData(configSer: ConfigService) { return () => configSer.load(); }
затем мы используем эту функцию внутри массива провайдеров следующим образом:
import { APP_INITIALIZER } from '@angular/core'; @NgModule({ declarations: [...], imports: [...], providers: [ { provide: APP_INITIALIZER, useFactory: getConfigData, deps: [ConfigService], multi: true }, ...]
чтобы узнать больше о APP_INITIALIZER, вы можете проверить эту ссылку: https://angular.io/api/core/APP_INITIALIZER#app_initializer
теперь каждый раз, когда вы меняете значения внутри файла json, новые значения будут использоваться после повторного запуска приложения.
Надеюсь, это информативно и полезно…