Add the localize package

To take advantage of the localization features of Angular, use the [Angular CLI][CliMain] to add the @angular/localize package to your project.

To add the @angular/localize package, use the following command to update the package.json and TypeScript configuration files in your project.

shell

# #docregion add-localize
ng add @angular/localize
# #enddocregion add-localize

# #docregion extract-i18n-default
ng extract-i18n
# #enddocregion extract-i18n-default

# #docregion extract-i18n-output-path
ng extract-i18n --output-path src/locale
# #enddocregion extract-i18n-output-path

# #docregion extract-i18n-formats
ng extract-i18n --format=xlf
ng extract-i18n --format=xlf2
ng extract-i18n --format=xmb
ng extract-i18n --format=json
ng extract-i18n --format=arb
# #enddocregion extract-i18n-formats

# #docregion extract-i18n-out-file
ng extract-i18n --out-file source.xlf
# #enddocregion extract-i18n-out-file

# #docregion build-localize
ng build --localize
# #enddocregion build-localize

# #docregion serve-french
ng serve --configuration=fr
# #enddocregion serve-french

# #docregion build-production-french
ng build --configuration=production,fr
# #enddocregion build-production-french

It adds types: ["@angular/localize"] in the TypeScript configuration files. It also adds line /// <reference types="@angular/localize" /> at the top of the main.ts file which is the reference to the type definition.

If @angular/localize is not installed and you try to build a localized version of your project (for example, while using the i18n attributes in templates), the [Angular CLI][CliMain] will generate an error, which would contain the steps that you can take to enable i18n for your project.

Options

OPTION	DESCRIPTION	VALUE TYPE	DEFAULT VALUE
`--project`	The name of the project.	`string`
`--use-at-runtime`	If set, then `$localize` can be used at runtime. Also `@angular/localize` gets included in the `dependencies` section of `package.json`, rather than `devDependencies`, which is the default.	`boolean`	`false`

For more available options, see ng add in [Angular CLI][CliMain].

What's next

[CliMain]: cli 'CLI Overview and Command Reference | Angular' [GuideNpmPackages]: reference/configs/npm-packages 'Workspace npm dependencies | Angular' [GuideTsConfig]: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 'TypeScript Configuration'