Интернационализация (i18n) приложений Angular с помощью Localize

В этом видео мы поговорим о том, как выполнять интерационализацию и локализацию в приложениях Angular 9+ с помощью встроенного модуля Localize. Мы также выполним предварительную компиляцию приложения с помощью компилятора AOT и опубликуем финальную версию на Firebase.

Таймкоды:
00:00 Введение
00:55 Установка
01:25 Настройка приложения для работы с несколькими языками
02:45 Выполнение переводов в шаблонах
04:20 Извлечение строк для перевода и хранение переводов в файлах
07:27 Идентификаторы переводов
10:00 Перевод атрибутов (для тегов)
10:47 Работа со множественным числом
12:50 Выражение select (удобно при работе с гендером)
13:55 Перевод текста без тегов
14:15 Работа с Angular Pipes (например, форматирование даты-времени)
15:20 Выполнение переводов внутри компонентов
16:45 Переключение между языками приложения
17:20 Компиляция приложения и публикация на Firebase
19:17 Заключение

Аккаунт Ethereum (ETH): 0x719C2d2bcC155c85190f20E1Cc3710F90FAFDa16

[yurymatatov]

супер! мне понравилось! доходчиво, внятно, быстро!

[allwell]

Спасибо за работу, всё понятно и доходчиво.

[andrewdemidyuk]

С такой внятной подачей я быстро весь ангуляр осилил бы )

[valentinsaik]

Спасибо за туториал, немного честно сказать горит от этого angular localize, на бекенде (php symfony) запустил "extract translations" он тебе и указал что есть неиспользуемые сообщения, и красиво всё смержил сам, и правильно плейсхолдеры определил, а тут просто настолько ужасный "developer experience" что даже не знаю стоит ли это использовать, мержить изменения это же мрак. Перевод ссылок тоже смущает, ну откуда переводчик может знать как у нас урл построены, даже если он и видит href="/en/category/cars" откуда он может знать что на другом языке ссылка будет такая же, может у нас /ru/category/машины? или /ru/категория/машины? Почему нету нормальной интеграции с компонентом роутинга.. Почему что бы организовать дефолтную локаль без указания оной в урл мне надо нджинкс редирект настраивать с site.com на site.com/en, ну или делать symlink, когда это должно решаться на уровне приложения, а не инфраструктуры, туториал хороший, спасибо, а дока и DX у них говно

[DartMitai]

Привет, сделаешь курс по Angulardart?

[rdmammad]

Hello, polucayu takuyu oshibku pri serve

An unhandled exception occurred: Unsupported translation file format.

[RedkeiGost]

Тут вот какая проблема: в ангуларе есть компоненты двух типов - апликейшин и лайбрари. Первое использует билдер и у вас он виден на 14 строке на 1:26 (не custom только, а builder-angular) Позже, когда вы добавляете 6ть строк конфигурации переводов чуть выше, билдер опускается до 20 строки на 1:57. Однако, второй тип приложений ангулар - библиотеки, создаются с помощью ng generate library my-lib-name и имеют билдер
И вот я может быть чего-то не понимаю, как мне сбилдить библиотеку? Если в секции extract-i18n, которую вы добавляете в промежутке 1:26 - 1:57, в параметр browserTarget добавить my-lib-name:build, то файл перевода собираться не будет, ng extract-i18n вернет ошибку "The "path" argument must be of type string. Received undefined"
Пройдясь по стеку ошибки я увидел, что скрипт смотрит на buildOptions.outputPath, которого нет у и быть не может, если добавить - получите ошибку на дополнительный параметр. Тоже самое с другими билдерами для библиотек типа Так как же мне сбилдить переведенную библиотеку? Ок, билдить переводы для библиотек нельзя, можно в приложнеии. Но мы используем её, как либу для другого проекта - мне что, экспортирвоать файлы перевода библиотеку? Ну, как правильно, это же все очень странно.