Настройка производственных файлов angular после сборки

Question

У меня есть проект angular 9, который является частью установщика набора приложений [установщик Wix]. Одной из настроек, используемых приложением angular, является адрес API, данные которого оно извлекает с некоторого настраиваемого адреса. Я знаю, что могу иметь много файлов окружения angular и просто использовать такие команды, как следующие:

environment.env1.ts

export const environment = {
  production: true,
  apiAddress: "http://apiAddress1/api/",
};


ng build --prod --configuration=env1    

или

environment.env2.ts

    export const environment = {
      production: true,
      apiAddress: "http://apiAddress2/api/",
    };

    ng build --prod --configuration=env2

Это означает, что для каждого потенциального адреса API мне нужно выполнить новую сборку и выполнить указанную выше команду. Как я могу преодолеть описанный выше сценарий и настроить выходные двоичные файлы после сборки?

Предполагая, что нет четкого способа получить конфигурацию после сборки, могу ли я выполнить "простую замену строки" для адреса API в сгенерированных основных файлах *.js? Будут ли побочные эффекты?

Answer 1

Вы можете передать свою конечную точку api на аутсорсинг в файле конфигурации. И предоставитьAppInitializerчтобы использовать ваш файл конфигурации. Вот пример:

функция загрузчика, которая загружает конфигурацию через http из /config/config.json и устанавливает конфигурацию api:

export function loadConfig(http: HttpClient, config: ApiConfiguration): (() => Promise<boolean>) {
  return (): Promise<boolean> => {
    return new Promise<boolean>((resolve: (a: boolean) => void): void => {
      http.get('./config/config.json')
        .pipe(
          map((x: any) => {
            config.rootUrl = x.rootUrl + '/v2';
            resolve(true);
          }),
          catchError((x: { status: number }, caught: Observable<void>): ObservableInput<{}> => {
            // 404 local development, other errors are strange
            resolve(x.status === 404);
            return of({});
          })
        ).subscribe();
    });
  };
}

JSON содержит только одну строку с именем rootUrl.

И чтобы использовать эту функцию, перед инициализацией приложения предоставьте AppInitializer в вашем app.module.ts:

providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadConfig,
      deps: [
        HttpClient,
        ApiConfiguration
      ],
      multi: true
    }

ApiConfiguration хранит конечную точку api, которая представляет собой просто класс со значением по умолчанию (для разработки):

@Injectable({
  providedIn: 'root',
})
export class ApiConfiguration {
  rootUrl: string = 'localhost:8080';
}

Просто поместите файл конфигурации в свой /dist папка и она должна работать:)

Answer 2

Вероятно, можно выполнить поиск и замену сгенерированных файлов после завершения сборки, но это кажется неправильным.

Вместо этого создайте файл configuration.json и поместите его в папку с ресурсами. Затем в приложении укажите ссылку на файл напрямую с помощью импорта. Возможно, вам придется включить эту функцию, установивresolveJsonModule к trueв вашем tsconfig.json.

Теперь, после создания приложения, значение можно заменить в configuration.json, не опасаясь непреднамеренных побочных эффектов, используя простые методы, такие как в NodeJs сfs.readFileSync(path) а также fs.writeFileSync(path, JSON.stringify(data)).

Пример раздела xyz.module.ts

import dynamicConfig from '../assets/configuration.json';
@NgModule({
  providers: [
    {
      provide: API_BASE_URL,
      useValue: dynamicConfig.apiAddress
    }
  ]
})
export class XyzModule { }