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/
|
||
|
|
}
|