Обзор
У меня есть приложение Angular 6, созданное Angular CLI. Приложение написано на нескольких языках. Каждый язык имеет JSON-файл с переводами всех текстов приложения. Имена файлов: ${language}.json, например en.json, es.json, pl.json.
Я бы хотел установить язык приложения во время сборки - собирайте приложение только на одном языке. Для этого при сборке мне нужно импортировать один файл перевода, который выбирается в зависимости от того, для какого языка я создаю.
Задача
Как условно импортировать один файл перевода только для языка, выбранного при сборке?
Кроме того, я бы хотел, чтобы файл перевода был связан с остальной частью JavaScript моего приложения, а не загружался по требованию во время выполнения.
Эскиз решения
const translations = import(`./translations/${lang}.json`);
На самом деле приведенный выше код работает в Angular 6 / Webpack (нужно только установить compilerOptions.module: 'ESNext' в tsconfig.app.json), но не так, как я хочу. Вместо разрешения импорта во время сборки и объединения файла перевода вместе с остальным кодом, он создает отдельные файлы (куски) для всех переводов, один из которых затем загружается по требованию во время выполнения в зависимости от значения JavaScript lang переменная.
Итак, как мне разрешить импорт во время сборки, а не во время выполнения? Также, где и как мне установить переменную lang во время сборки, так как у меня нет доступа к конфигурации Webpack (она скрыта внутри Angular CLI)
Только веб-пакет
При использовании только Webpack это можно реализовать, например, с помощью NormalModuleReplacementPlugin . Но так как Angular CLI скрывает всю конфигурацию Webpack, я не знаю, как интегрировать его в Angular проект. Извлечение конфигурации Webpack из Angular CLI - последнее средство для меня.