Интернационализация (i18n) приложений Angular с помощью Localize
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2024
- В этом видео мы поговорим о том, как выполнять интерационализацию и локализацию в приложениях 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 Заключение
Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам: / @ilyabodrovkrukowski
Аккаунт Ethereum (ETH): 0x719C2d2bcC155c85190f20E1Cc3710F90FAFDa16
Boosty: boosty.to/bodrovis
Patreon: / bodrovis
DonationAlerts: www.donationalerts.com/r/bodr...
Текстовая версия: lokalise.com/blog/angular-i18n/
Оригинальное видео: • Angular i18n: Performi...
Мой сайт: bodrovis.tech
Пожалуйста, обратите внимание, что на канале вышла ОБНОВЛЁННАЯ ВЕРСИЯ этого видео, поэтому рекомендую сразу перейти к нему th-cam.com/video/0jmBX_5k-sU/w-d-xo.html
Спасибо за работу, всё понятно и доходчиво.
Благодарю за отзыв :)
супер! мне понравилось! доходчиво, внятно, быстро!
Большое спасибо за отзыв!
С такой внятной подачей я быстро весь ангуляр осилил бы )
Благодарю! Ну, пока курс по Angular не планирую, но как знать, может в дальнейшем :)
Спасибо за туториал, немного честно сказать горит от этого angular localize, на бекенде (php symfony) запустил "extract translations" он тебе и указал что есть неиспользуемые сообщения, и красиво всё смержил сам, и правильно плейсхолдеры определил, а тут просто настолько ужасный "developer experience" что даже не знаю стоит ли это использовать, мержить изменения это же мрак. Перевод ссылок тоже смущает, ну откуда переводчик может знать как у нас урл построены, даже если он и видит href="/en/category/cars" откуда он может знать что на другом языке ссылка будет такая же, может у нас /ru/category/машины? или /ru/категория/машины? Почему нету нормальной интеграции с компонентом роутинга.. Почему что бы организовать дефолтную локаль без указания оной в урл мне надо нджинкс редирект настраивать с site.com на site.com/en, ну или делать symlink, когда это должно решаться на уровне приложения, а не инфраструктуры, туториал хороший, спасибо, а дока и DX у них говно
да у них даже про $localize() ничего не сказано (даже мать его упоминания нету) в официальном гайде angular.io/guide/i18n ну пиздец, хоть бери исходники читай вместо доки
Спасибо за отзыв! Скажу честно, опыта Angular+PHP у меня нету, так что подсказать что-то вряд ли смогу... Что касается доков - увы, есть такая проблема. Честно говоря, Angular на данный момент для меня явно не выбор номер 1 - Vue как-то поприятнее будет :)
Привет, сделаешь курс по Angulardart?
Привет! Надо подумать, мысль хорошая :) Не обещаю, что в ближайшее время (есть уже несколько видео в очереди), но постараюсь!
@@IlyaBodrovKrukowski будет просто афигенски! будем ждать)
Друзья, для тех, кому нужно настроить I18n с маршрутами Angular и при этом сделать так, чтобы всё это работало на Firebase, я написал дополнительный раздел в оригинальной статье: lokalise.com/blog/angular-i18n/#Making_it_work_with_Angular_Routing Там всё довольно просто, нужно настроить пару rewrite rules и поставить редирект.
Hello, polucayu takuyu oshibku pri serve
An unhandled exception occurred: Unsupported translation file format.
Привет, пардон за долгий ответ. Ощущение такое, что неправильный формат файла с переводами. Я могу посмотреть, если скинешь свои переводы через gist или pastebin
@@IlyaBodrovKrukowski нужно было срочно интегрировать и18н, по-этому нашла альтернативу, ngx-translate. Но все же, спасибо))
@@rdmammad5721 @ngneat/transloco тоже хорош. Даже лучше
@@biovawan взяла на заметку, спасибо👍
Тут вот какая проблема: в ангуларе есть компоненты двух типов - апликейшин и лайбрари. Первое использует билдер @angular-builders/custom-webpack:browser и у вас он виден на 14 строке на 1:26 (не custom только, а builder-angular) Позже, когда вы добавляете 6ть строк конфигурации переводов чуть выше, билдер опускается до 20 строки на 1:57. Однако, второй тип приложений ангулар - библиотеки, создаются с помощью ng generate library my-lib-name и имеют билдер @angular-devkit/build-angular:ng-packagr
И вот я может быть чего-то не понимаю, как мне сбилдить библиотеку? Если в секции 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, которого нет у @angular-devkit/build-angular:ng-packagr и быть не может, если добавить - получите ошибку на дополнительный параметр. Тоже самое с другими билдерами для библиотек типа @nrwl/angular:ng-packagr-lite. Так как же мне сбилдить переведенную библиотеку? Ок, билдить переводы для библиотек нельзя, можно в приложнеии. Но мы используем её, как либу для другого проекта - мне что, экспортирвоать файлы перевода библиотеку? Ну, как правильно, это же все очень странно.