Angular 9 $ localize и xi18n: «Выражения с тегами шаблонов не поддерживаются в метаданных»

Question

Мой последний проект Angular будет опубликован на четырех языках. Для этого я подготовил приложение для включения @angular/localize, как описано здесь:

• https://angular.io/guide/i18n
• https://blog.ninja-squad.com/2019/12/10/angular-localize/

Настройка

Angular: 9.0.7
... animations, cli, common, compiler, compiler-cli, core
... elements, forms, language-service, localize
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.0.7
@angular/cdk                      9.1.3
@angular/google-maps              9.1.3
@ngtools/webpack                  9.0.7
@schematics/angular               9.0.7
@schematics/update                0.900.7
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

angular. json

// ...
"projects": {
    // ...
    "my-project": {
        "i18n": {
            "sourceLocale": "de-DE",
            "locales": {
                "fr": {
                    "translation": "messages.fr.xlf",
                    "baseHref": "/fr/"
                },
                "it": {
                    "translation": "messages.it.xlf",
                    "baseHref": "/it/"
                },
                "en": {
                    "translation": "messages.en.xlf",
                    "baseHref": "/en/"
                }
            }
            // ...

tsconfig. json

{
    "compileOnSave": false,
    "compilerOptions": {
        "allowJs": true,
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "module": "esnext",
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2015",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2018",
            "dom"
        ]
    },
    "angularCompilerOptions": {
        "fullTemplateTypeCheck": true,
        "strictInjectionParameters": true
    }
}

Чтобы перевести строки в код (например, маршруты маршрута), я использовал новую функцию $localize, например:

// ...
export class Translations {
    static paths: TranslatedPathsInterface = {
        // App Routing
        home: $localize`startseite`,
        team: $localize`mitarbeiter`,
        about: $localize`ueber-uns`
        // ...
    };
}

Это работает нормально при обслуживании приложения с ng serve. Проблема возникает, когда я хочу извлечь отмеченные строки с ng xi18n для перевода. В консоли такая же ошибка возникает несколько раз:

ERROR in src/app/shared/translations.ts(39,15): Error during template compile of Translations
Tagged template expressions are not supported in metadata.

, что в основном говорит мне, что компилятору не нравится функция $localize.

Я обновил все пакеты. Но сейчас я в растерянности.

Любые советы будут высоко оценены! Что еще можно попробовать?

---

Обновление 2020-03-23 ​​

Я провел еще несколько исследований и заметил, что эта ошибка возникает только при использовании в сочетании с определения маршрута. Любые другие переводы работают нормально.

Так что это работает:

const something = $localize`etwas`;

Это не работает:

const routes: Routes = [
    {
        path: '',
        redirectTo: $localize`startseite`,
        pathMatch: 'full'
    },
    {
        path: $localize`startseite`,
        component: HomeComponent
    }
    // ...
];

@NgModule( {
    imports: [ RouterModule.forRoot( routes, routerOptions ) ],
    exports: [ RouterModule ]
} )
// ...

Answer 1

Я нашел решение этой проблемы. Похоже, если вы завернете свой перевод с помощью функции компилятора, не выдаст ошибку. Пример:

const getTranslation = () => {
  return $localize`:@@title.tasks:Tasks`;
};

export const taskRoutes: Routes = [
  {
    path: '',
    component: ListTaskComponent,
    data: {
      breadcrumb: 'List',
      title: getTranslation(),
      status: true,
      description: 'List of tasks',
    }
  }
];

Кажется, что это проблема в пакете @angular/localize, но пока они не исправят, это можно сделать таким образом

Другое решение может заключаться в пропуске файлов ts из компиляция локализации, но я не нашел такой опции в ng i18n