angular - Angular 9 $localize 和 xi18n：“元数据中不支持标记的模板表达式”

问题描述

我最新的 Angular 项目将以四种语言发布。因此，我准备了要包含的应用程序，@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

角.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 ]
} )
// ...

标签： angularlocalizationinternationalization

我找到了解决此问题的方法。看起来如果你用函数编译器包装你的翻译不会抛出错误。例子：

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包中的一个问题，但在他们修复之前，可以通过这种方式完成

另一种解决方案可能是从 licalization 编译中跳过 ts 文件，但我在ng i18n

angular - Angular 9 $localize 和 xi18n：“元数据中不支持标记的模板表达式”

问题描述

解决方案

推荐阅读