2019-10-10 16:08:59 -04:00
# `$localize` Global Import Migration
2020-06-10 16:08:05 +08:00
# `$localize` 全局导入的迁移
2019-10-10 16:08:59 -04:00
## What does this schematic do?
2020-06-10 16:08:05 +08:00
## 这个原理图做了什么?
2019-10-10 16:08:59 -04:00
If you're using i18n, this schematic adds an import statement for `@angular/localize` to `polyfills.ts` that will look something like this:
2020-06-10 16:08:05 +08:00
如果你正在使用 i18n, 这个原理图会为 `@angular/localize` 添加一个导入 `polyfills.ts` 的语句,就像这样:
2019-10-10 16:08:59 -04:00
```ts
/******************************************************************
* Load `$localize` - used if i18n tags appear in Angular templates.
*/
import '@angular/localize/init ';
```
It also lists `@angular/localize` as a dependency in your app's `package.json` to ensure the import is found.
2020-06-10 16:08:05 +08:00
它还会在应用的 `package.json` 中列出 `@angular/localize` 作为依赖,以确保找到导入。
2019-10-10 16:08:59 -04:00
```json
"dependencies": {
...
"@angular/localize ": "...",
...
}
```
`@angular/localize` is a new package that supports i18n of messages in Ivy applications.
This package requires a global `$localize` symbol to exist.
The symbol is loaded by importing the `@angular/localize/init` module, which has the side-effect of attaching it to the global scope.
2020-06-10 16:08:05 +08:00
`@angular/localize` 是一个新的包,它在 Ivy 应用中支持信息的 i18n。该包需要一个全局的 `$localize` 符号才能存在。该符号是通过导入 `@angular/localize/init` 模块来加载的,该模块的副作用是将其附加到全局作用域。
2019-10-10 16:08:59 -04:00
## Why is this migration necessary?
2020-06-10 16:08:05 +08:00
## 为何这次迁移是必须的?
2019-10-19 08:50:50 -04:00
Prior to Angular version 9, Angular's internationalization (i18n) system inlined translated messages into the compiled output as part of this template compilation.
This approach required running the template compiler once per target locale, often leading to slow production build times.
2019-10-10 16:08:59 -04:00
2020-06-28 14:22:19 +08:00
在 Angular 第 9 版之前, Angular 的国际化( i18n) 系统会把已翻译的消息内联到编译输出中, 作为模板编译的一部分。这种方法要求为每个目标本地环境运行一次模板编译器, 这通常会导致生产构建时间变慢。
2020-06-10 16:08:05 +08:00
2019-10-10 16:08:59 -04:00
In the new i18n system, the Angular compiler tags i18n messages in the compiled code with a global `$localize` handler.
The inlining of translations then occurs as a post-compilation step for each locale.
Because the application does not need to be built again for each locale, this makes the process much faster.
2020-06-28 14:22:19 +08:00
在新的 i18n 系统中, Angular 编译器使用全局 `$localize` 处理函数在已编译的代码中标记 i18n 消息。然后这些翻译的内联工作会作为每种本地环境的后编译步骤。由于不需要为每个本地环境重复构建应用,所以这会让这个过程更快。
2020-06-10 16:08:05 +08:00
2019-10-10 16:08:59 -04:00
The post-compilation inlining step is optional— for example during development or if the translations will be inlined at runtime.
Therefore this global `$localize` must be available on the global scope at runtime.
To make `$localize` available on the global scope, each application must now import the `@angular/localize/init` module.
This has the side-effect of attaching a minimal implementation of `$localize` to the global scope.
2020-06-10 16:08:05 +08:00
编译后的内联步骤是可选的 - 比如在开发过程中,或者运行期内联时。因此,这个 `$localize` 在运行时必须在全局范围内可用。为了让全局范围内的 `$localize` 可用,每个应用程序现在都必须导入 `@angular/localize/init` 模块。这就是把 `$localize` 的一个最小实现附加到全局范围带来的副作用。
2019-10-10 16:08:59 -04:00
If this import is missing, you will see an error message like this:
2020-06-10 16:08:05 +08:00
如果缺少这个导入,你会看到如下错误信息:
2019-10-10 16:08:59 -04:00
```
2019-10-20 17:50:56 +02:00
Error: It looks like your application or one of its dependencies is using i18n.
Angular 9 introduced a global `$localize()` function that needs to be loaded.
Please run `ng add @angular/localize` from the Angular CLI.
(For non-CLI projects, add `import '@angular/localize/init';` to your polyfills.ts file)
2019-10-10 16:08:59 -04:00
```
This schematic automatically adds the `@angular/localize/init` import for you
if your app uses Angular's i18n APIs.
2020-06-10 16:08:05 +08:00
如果你的应用使用的是 Angular 的 i18n API, 此原理图会自动为你添加 `@angular/localize/init` 的导入。
2019-10-10 16:08:59 -04:00
## Why is my tslint failing?
2020-06-10 16:08:05 +08:00
## 为什么我的 tslint 失败了?
2019-10-19 08:50:50 -04:00
The import of `@angular/localize/init` may cause a tslint error for `no-import-side-effect` because it adds to the global context (that is, a side effect).
To fix this error, add the following to your `tslint.config` :
2019-10-10 16:08:59 -04:00
2020-06-10 16:08:05 +08:00
`@angular/localize/init` 的导入可能会导致 `no-import-side-effect` 的 tslint 错误,因为它会添加全局上下文(也就是副作用)。要修复此错误,请在 `tslint.config` 添加如下 `tslint.config` :
2019-10-10 16:08:59 -04:00
```json
"no-import-side-effect": [
true,
{
2019-10-20 17:50:56 +02:00
"ignore-module": "(core-js/.*|zone\\.js/.*|@angular/localize/init )$"
2019-10-10 16:08:59 -04:00
}
]
```
## Do I need to change how I write i18n in my Angular templates?
2020-06-10 16:08:05 +08:00
## 我是否需要改变在 Angular 模板中编写 i18n 的方式?
2019-10-10 16:08:59 -04:00
The template syntax for i18n has not changed, so you will still want to use the `i18n` attribute as you did before.
2020-06-10 16:08:05 +08:00
i18n 的模板语法没有改变,所以你仍要像以前一样使用 `i18n` 属性。