diff --git a/docs/concepts/localization.md b/docs/concepts/localization.md index 91526653ff..945cc91977 100644 --- a/docs/concepts/localization.md +++ b/docs/concepts/localization.md @@ -83,6 +83,8 @@ The PWA uses an [ICU Message Format](https://unicode-org.github.io/icu/userguide Have a look at the spec for [PWATranslateCompiler](../../src/app/core/utils/translate/pwa-translate-compiler.spec.ts) for an overview of supported methods. +> :warning: Translations with large values (> 1000 characters) will not be compiled to improve performance. We recommend using CMS components instead. If you _really_ need to increase this limit, adapt the `MAX_COMPILATION_LENGTH` variable of [PWATranslateCompiler](../../src/app/core/utils/translate/pwa-translate-compiler.ts). + ### Localization with Formatted Dates The date pipe is used as formatter in texts with dates. diff --git a/src/app/core/utils/translate/pwa-translate-compiler.ts b/src/app/core/utils/translate/pwa-translate-compiler.ts index 177174bb72..6f30d97bad 100644 --- a/src/app/core/utils/translate/pwa-translate-compiler.ts +++ b/src/app/core/utils/translate/pwa-translate-compiler.ts @@ -1,4 +1,4 @@ -import { Injectable, Injector } from '@angular/core'; +import { Injectable, Injector, isDevMode } from '@angular/core'; import { TranslateCompiler, TranslateService } from '@ngx-translate/core'; import { Translations } from './translations.type'; @@ -9,6 +9,8 @@ const cache: Record = {}; export class PWATranslateCompiler implements TranslateCompiler { constructor(private injector: Injector) {} + private static MAX_COMPILATION_LENGTH = 1000; + /** * regular expression for grabbing everything in the form: * {{, plural/select, ...}} @@ -124,10 +126,22 @@ export class PWATranslateCompiler implements TranslateCompiler { return template; } + private sanityCheck(key: string, value: string | Function): boolean { + const sane = typeof value !== 'string' || value.length <= PWATranslateCompiler.MAX_COMPILATION_LENGTH; + if (isDevMode() && !sane) { + console.warn( + 'Not compiling translation with key', + key, + 'as it is too big! - Use CMS! - This is a development mode only warning and can be ignored if the behavior is intended.' + ); + } + return sane; + } + compileTranslations(translations: Translations): Translations { return Object.entries(translations) .map<[string, string | Function]>(([key, value]) => { - if (this.checkIfCompileNeeded(value)) { + if (this.sanityCheck(key, value) && this.checkIfCompileNeeded(value)) { return [key, this.compile(value as string)]; } return [key, value];