5 lines
6.0 KiB
JSON
5 lines
6.0 KiB
JSON
{
|
|
"id": "guide/migration-localize",
|
|
"title": "$localize Global Import Migration",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/migration-localize.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"localize-global-import-migration\"><code><a href=\"api/localize/init/$localize\" class=\"code-anchor\">$localize</a></code> Global Import Migration<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-localize#localize-global-import-migration\"><i class=\"material-icons\">link</i></a></h1>\n<h2 id=\"what-does-this-schematic-do\">What does this schematic do?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-localize#what-does-this-schematic-do\"><i class=\"material-icons\">link</i></a></h2>\n<p>If you're using i18n, this schematic adds an import statement for <code>@angular/localize</code> to <code>polyfills.ts</code> that will look something like this:</p>\n<code-example language=\"ts\">\n/******************************************************************\n * Load `$localize` - used if i18n tags appear in Angular templates.\n */\nimport '@angular/localize/init';\n</code-example>\n<p>It also lists <code>@angular/localize</code> as a dependency in your app's <code>package.json</code> to ensure the import is found.</p>\n<code-example language=\"json\">\n\"dependencies\": {\n ...\n \"@angular/localize\": \"...\",\n ...\n}\n</code-example>\n<p><code>@angular/localize</code> is a new package that supports i18n of messages in Ivy applications.\nThis package requires a global <code><a href=\"api/localize/init/$localize\" class=\"code-anchor\">$localize</a></code> symbol to exist.\nThe symbol is loaded by importing the <code>@angular/localize/init</code> module, which has the side-effect of attaching it to the global scope.</p>\n<h2 id=\"why-is-this-migration-necessary\">Why is this migration necessary?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-localize#why-is-this-migration-necessary\"><i class=\"material-icons\">link</i></a></h2>\n<p>Prior to Angular version 9, Angular's internationalization (i18n) system inlined translated messages into the compiled output as part of this template compilation.\nThis approach required running the template compiler once per target locale, often leading to slow production build times.</p>\n<p>In the new i18n system, the Angular compiler tags i18n messages in the compiled code with a global <code><a href=\"api/localize/init/$localize\" class=\"code-anchor\">$localize</a></code> handler.\nThe inlining of translations then occurs as a post-compilation step for each locale.\nBecause the application does not need to be built again for each locale, this makes the process much faster.</p>\n<p>The post-compilation inlining step is optional—for example during development or if the translations will be inlined at runtime.\nTherefore this global <code><a href=\"api/localize/init/$localize\" class=\"code-anchor\">$localize</a></code> must be available on the global scope at runtime.\nTo make <code><a href=\"api/localize/init/$localize\" class=\"code-anchor\">$localize</a></code> available on the global scope, each application must now import the <code>@angular/localize/init</code> module.\nThis has the side-effect of attaching a minimal implementation of <code><a href=\"api/localize/init/$localize\" class=\"code-anchor\">$localize</a></code> to the global scope.</p>\n<p>If this import is missing, you will see an error message like this:</p>\n<code-example>\nError: It looks like your application or one of its dependencies is using i18n.\nAngular 9 introduced a <a href=\"api/core/global\" class=\"code-anchor\">global</a> `$localize()` function that needs to be loaded.\nPlease run `ng add @angular/localize` from the Angular CLI.\n(For non-CLI projects, add `import '@angular/localize/init';` to your polyfills.ts file)\n</code-example>\n<p>This schematic automatically adds the <code>@angular/localize/init</code> import for you\nif your app uses Angular's i18n APIs.</p>\n<h2 id=\"why-is-my-tslint-failing\">Why is my tslint failing?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-localize#why-is-my-tslint-failing\"><i class=\"material-icons\">link</i></a></h2>\n<p>The import of <code>@angular/localize/init</code> may cause a tslint error for <code>no-import-side-effect</code> because it adds to the global context (that is, a side effect).\nTo fix this error, add the following to your <code>tslint.config</code>:</p>\n<code-example language=\"json\">\n\"no-import-side-effect\": [\n true,\n {\n \"ignore-module\": \"(core-js/.*|zone\\\\.js/.*|@angular/localize/init)$\"\n }\n]\n</code-example>\n<h2 id=\"do-i-need-to-change-how-i-write-i18n-in-my-angular-templates\">Do I need to change how I write i18n in my Angular templates?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/migration-localize#do-i-need-to-change-how-i-write-i18n-in-my-angular-templates\"><i class=\"material-icons\">link</i></a></h2>\n<p>The template syntax for i18n has not changed, so you will still want to use the <code>i18n</code> attribute as you did before.</p>\n\n \n</div>\n\n<!-- links to this doc:\n-->\n<!-- links from this doc:\n - api/core/global\n - api/localize/init/$localize\n - guide/migration-localize#do-i-need-to-change-how-i-write-i18n-in-my-angular-templates\n - guide/migration-localize#localize-global-import-migration\n - guide/migration-localize#what-does-this-schematic-do\n - guide/migration-localize#why-is-my-tslint-failing\n - guide/migration-localize#why-is-this-migration-necessary\n - https://github.com/angular/angular/edit/master/aio/content/guide/migration-localize.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |