Как использовать файл JSON в качестве объекта JS, не импортируя его в скомпилированный код веб-пакета?

Question

Во время начальной загрузки моего приложения Angular Hybrid (Angular7 и AngularJS работают бок о бок).Я хочу использовать мою конфигурацию из отдельного файла конфигурации json в качестве переменной окна.На данный момент я использую:

setAngularLib(AngularJs);
platformBrowserDynamic().bootstrapModule(CatalogModule).then(platformRef => {
  const config = require('./config.json');
  (<any>window).__APP_CONFIG__ = config;

  const appMountPoint = document.querySelector('[xs-app-mountpoint]');
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(appMountPoint, [Ng1Module], {strictDi: false});

  console.log('hybrid app bootstrapped');
})
  .catch(err => console.log(err));

Однако в данный момент Webpack после компиляции помещает все содержимое файла config.json в один файл main.js, чего я не хочу.Я хотел бы получить конфигурационный файл и использовать его в качестве переменной Window, но держа файл config.json отдельно от main.js.

Как это возможно?Я пытался использовать

const config = JSON.parse(fs.readFileSync('./config.json', 'utf8'));

Но это не сработало.

Answer 1

Мне удалось найти решение с помощью Fetch API:

fetch('config.json')
  .then(response => response.json())
  .then((config) => {
    platformBrowserDynamic().bootstrapModule(CatalogModule).then(platformRef => {
      (<any>window).__APP_CONFIG__ = config;
      const appMountPoint = document.querySelector('[xs-app-mountpoint]');
      const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
      upgrade.bootstrap(appMountPoint, [Ng1Module], {strictDi: false});

      console.log('hybrid app bootstrapped');
    }).catch(err => console.log(err));
  });