I have managed to do this now, but it's been a rather complex process. I'll detail my steps below in case this helps someone else at some point.
In order to reduce the number of HTTP requests, I have used gulp-merge-json to combine all files into only 2 (one for CLDR, the other one for the translations); see below for the gulp-task.
I then wait for the files to load through JSON, then call setCulture/setCurrencyCode and raise a custom event. I have overridden EJ Script manager to wait for that custom event.
_Layout.cshtml
(not sure how to do code highlighting here, so here goes plain-text)
<script type="text/javascript" asp-add-nonce="true">
// TODO: currently hardcoded for de, will need to be changed per context's culture
document.addEventListener('DOMContentLoaded', function() {
let cldrPath = location.origin + "/lib/cldr-data/de/";
$.when(
$.getJSON(
cldrPath + "de.json", function(json, textStatus, jqXHR) {
//console.log(jqXHR.responseText);
ej.base.loadCldr(json);
console.log("Loaded CLDR");
}),
// load language files
$.getJSON("/lib/syncfusion-locale/de-DE.json",
function(json, textStatus, jqXHR) {
//console.log(jqXHR.responseText);
ej.base.L10n.load(json);
console.log("Loaded L10N");
})
).then(function() {
ej.base.setCulture("de");
ej.base.setCurrencyCode("EUR");
// dispatch the "LanguageFilesLoaded" event that Syncfusion Scriptmanager is waiting for
let languageFilesLoadedEvent = new CustomEvent("LanguageFilesLoaded", { bubbles: true });
document.dispatchEvent(languageFilesLoadedEvent);
console.log("dispatched LanguageFilesLoaded");
});
});
</script>
The EJS Script manager is overriden as such: (ignore the nonce here, important is output.PreContent/.PostContent)
[HtmlTargetElement("ejs-scripts", Attributes = "asp-add-nonce")]
public class EjsScriptsTagHelper : TagHelper
{
private readonly ICspNonceService _nonceService;
[HtmlAttributeName("asp-add-nonce")]
public bool AddNonce { get; set; }
public EjsScriptsTagHelper(ICspNonceService nonceService) : base()
{
_nonceService = nonceService;
}
public override void Process(TagHelperContext context, TagHelperOutput output)
{
if (AddNonce)
{
// The nonce service is created per request, so we
// get the same nonce here as the CSP header
output.Attributes.Add("nonce", _nonceService.GetNonce());
}
output.PreContent.AppendHtml(@"document.addEventListener('LanguageFilesLoaded', function () { console.log('LanguageFilesLoaded received'); ");
output.PostContent.AppendHtml(@"});");
base.Process(context, output);
}
}
Now, it all works fine, although not everything appears to be translated. Dates and Times are good, but the dialogs still have "Add Title", "Description" etc instead of their non-english equivalents. Well, better than nothing.
