Angular i18n. Как добавить локализацию сайта. Translate. Переводы на сайте. Ngx-translate

Любой сайт требует внедрения механизма переводов. Это делает код SOLID ным и упрощает поддержку сайта. Нужно захардкодить заголовок на сайте, сделай это в специальном файле.
Бонусы от локализации:
- Весь код на английском (легче работать в команде)
- Переиспользование строк в проекте
- За переводы отвечает отдельный человек
Локализация от ангулар достаточно сложная, по этой причине я демонструю другое решение, однако не менее мощное (ngx-translate)
i18n это широко распространенный стандарт для реализации переводов на сайте
github репозиторий github.com/MaksymGrom/angular...
github для начала разработки github.com/MaksymGrom/angular... тег 0.0.1
github для результата урока github.com/MaksymGrom/angular... тег 0.0.3

Пікірлер: 41

  • @user-re5cg7jt5u
    @user-re5cg7jt5u3 жыл бұрын

    чувак, у тебя самые лучшие туториалы в русскоязычном ютубе.

  • @grommaks

    @grommaks

    3 жыл бұрын

    Я больше скажу, у меня самые крутые зрители в русскоязычном ютубе 😎😎😎

  • @shoto_masha
    @shoto_masha4 жыл бұрын

    Спасибо большое за видео! Давно искала нечто подобное. Чтобы все просто и понятно было, без ненужных "заумностей" )) Еще раз спасибо.

  • @grommaks

    @grommaks

    4 жыл бұрын

    Спасибо за отзыв :) я думал у меня заумно как то...но мне приятно что это не так 😀

  • @shoto_masha

    @shoto_masha

    4 жыл бұрын

    @@grommaks нет, как раз для меня было доступно и понятно ☺️ учитывая что это уже не первое ваше видео что я смотрю ) поэтому ещё раз спасибо )

  • @andreifilimonchyk8318
    @andreifilimonchyk83188 ай бұрын

    Как всегда топ! Спасибо!)

  • @mykolastrashok9986
    @mykolastrashok99863 жыл бұрын

    Мужик спасибо за видео!

  • @grommaks
    @grommaks3 жыл бұрын

    Хорошая новость, я не удалил проект с моего ПК и смог его вылить на github. Ссылку ищите в описании к видео 😎

  • @farkhoddaniyarov4909
    @farkhoddaniyarov49093 жыл бұрын

    Спасибо за видео.

  • @cooleekova
    @cooleekova2 жыл бұрын

    Максим, большое спасибо за видео! Смотрела два раза, хотя поняла всё, что мне требовалось с первого. Всё потому, что понравился ваш стиль объяснения - очень спокойный и понятный. Успехов вам и вашему каналу.

  • @user-on9th4lj3i
    @user-on9th4lj3i3 ай бұрын

    Огромное спасибо тебе, Макс. На проекте столкнулся с такой проблемой - в укр. и рус. нужно прописывать доп переводы для падежей. Например - англійська/англійської/англійську. Пока написал для пары случаев pipe решение, но таких вариантов может быть множество. Может быть существует более правильное решение чем pipe?

  • @grommaks

    @grommaks

    3 ай бұрын

    Типичное решение не автоматизировать падежи а переводить фразы целиком, и поддерживать словарь фраз Условно для заголовка будут строки для каждого из языка

  • @user-on9th4lj3i

    @user-on9th4lj3i

    3 ай бұрын

    Спасибо )

  • @grommaks
    @grommaks4 жыл бұрын

    Приятного просмотра :) Если остались вопросы, задавай!) Если есть пожелания к видео, кидай в коментарий!) Хорошего тебе настроения ;)

  • @nurda1997

    @nurda1997

    3 жыл бұрын

    спасибо за видос очень крутые видосы!!! Можешь посоветовать как можно локализировать роуты то есть чтобы было url/ru или url/en и так далее

  • @grommaks

    @grommaks

    3 жыл бұрын

    @@nurda1997 Спасибо за отзыв. По роутам там первым параметром (последним не видел чтобы делали) язык добавить нужно :lang и далее дочерние роуты, это роуты сайта. Плюс нужно добавить canActivate чтобы проверить что ссылка на допустимую локаль, если нет, то делать редирект. Вижу что получится отличный материал для следующего видео) спасибо за наводку Если обязательно нужно последним параметром, то может использовать гет параметр? url?lang=ru Есть еще опция сохранять локацию в localStorage после того как url встретился параметр...и тогда такая ссылка должна быть только один раз. Плюс еще исполтзуют геолокацию, чтобы определить откуда запрос и сразу поставить нужную локацию

  • @nurda1997

    @nurda1997

    3 жыл бұрын

    @@grommaks я совсем новичок пока, не совсем понял, как сделать😅 но все же спасибо, буду ждать видоса, этот таск дали по работе, вот пока ломаю голову, а не знаете, когда снимите видос на эту тему🙏

  • @grommaks

    @grommaks

    3 жыл бұрын

    @@nurda1997 Не раньше воскресенья, надеюсь получится в воскресенье 🤗

  • @nurda1997

    @nurda1997

    3 жыл бұрын

    Уау было бы круто, не думал что так рано будет

  • @viktorm2937
    @viktorm29373 жыл бұрын

    Добавь в заголовок видео ngx-translate. И в тэги. Нашел тебя в последнюю очередь, после всех индусов(

  • @grommaks

    @grommaks

    3 жыл бұрын

    Добавил, спасибо

  • @MrShevrin
    @MrShevrin Жыл бұрын

    не совсем понял как брать переводы с бека. Если делать свой апи сервис для получения переводов,как его правильно пробросить в модуль?!

  • @grommaks

    @grommaks

    Жыл бұрын

    HTTP Loader, если не ошибаюсь, был в этом видео, и в этом видео я грузил из json через запрос на статику фронтенда Как мы грузим json так и мы можем постучаться на АПИ сервера и получить json с переводами Видео давно снимал, нет возможности сейчас пересмотреть, но более чем уверен что там есть пример получения переводов через http client

  • @grommaks

    @grommaks

    Жыл бұрын

    Ага, вижу что нет примера Вместо лоадера надо прокинуть свой сервис загрузки с сервера Через провайд его протолкнуть вместо того что был у меня в примере Можно грузить с сервера переводы или откуда удобно class CustomLoader implements TranslateLoader { getTranslation(lang: string): Observable { return Observable.of({KEY: 'value'}); } }

  • @farkhoddaniyarov4909
    @farkhoddaniyarov49093 жыл бұрын

    Привет. А какую версию Magento используете?

  • @grommaks

    @grommaks

    3 жыл бұрын

    Сейчас основная масса на magento 2.3 ce, и есть еще magento 1.9...стараемся быть на последней актуальной стабильной версии

  • @RedkeiGost
    @RedkeiGost2 жыл бұрын

    А так ли нужен этот компонент? Разве так тяжело в сервисе через HttpClient запросить шаблоны переводов по урлу assets/i18n/locale-name, сохранить это все в какую-нибудь стору, и собрать пайп, чтобы все это отдавать? Разве проблема парсить джейосн? Разве все это не займет того же времени, что ушло на просмотр видео, зачем тогда нужен ngx-translate? Ну ладно еще, если функционал полность устраивает. А если кастомить надо? Лоайдер сделать - фигня вопрос, возможно понадобится своя стора, но что останется от компонента? Просто вот мне например не нужна смена языка. все прилетает из админки по её настройкам. Похоже, что это уже делает бесполезной львиную долю компонента, а плюс еще grpc, свой лоэйдер. Его конечно делать нечего, но все-таки. Плюс возможно, придется менять стору на свою. Ну, и что остается? А от чего оно остается, стоило ли грузить бандл лишними механизмами? Там вроде бы парсер какой-то есть. Но джейсон - это обычное дело, но очень понял, зачем тут выдумывать что-то. Возможно, не прав конечно. Но я не доконца понимаю, зачем такой компонент существует не в виде популярной статьи "как написать переводы для сайта" с кодом, как иллюстрации, а прям отдельным компонентом.

  • @grommaks

    @grommaks

    2 жыл бұрын

    Вопрос в том, зачем нужен компонент перевода? Или зачем нужен компонент загрузки перевода из АПИ? Готовое конфигурируемое решение, используем на проекте, один раз настраивается и работает, возможно самопис будет работать не хуже, но его нужно написать и протестировать и не сломать...тут же все на конфигурациях и пару строчек стандартного кода. Есть другие варианты модулей перевода. Наличие модуля переводов, даже на сайте с одним языком это хорошо, потому что хардкодные текста не смешаны с кодом и могут меняться не ломая тесты. Переводы могут из БД тянуться, на одном из проектов именно так и делается Не помню, интернационализация кажется - разработка с возможностью менять локали в будущем. А локализация - набивание текстами...возможно ошибаюсь... Но этот модуль решает вопрос интернационализации (может ошибся, хз)

  • @katerinak5997
    @katerinak5997 Жыл бұрын

    Скажите как это сделать с существующей бд

  • @SergioUkrAr
    @SergioUkrAr6 ай бұрын

    Привет, эта библиотека так же актуално сегодня ?

  • @grommaks

    @grommaks

    6 ай бұрын

    Привет, на работе используем ее, а вторая команда использует transloco Я бы пользовался бы ею и сейчас если бы начинал проект :)

  • @SergioUkrAr

    @SergioUkrAr

    6 ай бұрын

    @@grommaks Большое спасибо, за ответ и совет.

  • @gurgenkroyan2548
    @gurgenkroyan25482 жыл бұрын

    черезчур плохо обесняеш

  • @grommaks

    @grommaks

    2 жыл бұрын

    Ок, можно ещё поискать авторов

  • @RedkeiGost
    @RedkeiGost2 жыл бұрын

    А если мы все-таки хотим использовать встроенную локализацию т.е. которая добавляется через ng add @angular/localize , то в соответствии с документацией ангулара, например разделом Merge translations into the application (на многих ютуб-каналах банятся сообщения с ссылками, не рискую, а то бы привел), так вот, в соответствии с этой документацией в конфигурации angular.json для переводов нужно указать параметр browserTarget и в нем можно указывать только то, что содержит билдер @angular-builders/custom-webpack:browser А библиотеки собираются билдером @angular-devkit/build-angular:ng-packagr или @nrwl/angular:ng-packagr-lite. И вот если в browserTarget добавить тагет, который содержит билдер без опции outputPath, то в билдере @angular-devkit/build-angular:extract-i18n возникнет ошибка, он получается может работать только с билдарами апликейшинов т.е. @angular-builders/custom-webpack:browser например, но не с билдерами либ. Получается, либу сбилдить переведенную нельзя, как так? Ну хорошо, допустим, но тогда надо как-то экспортировать текст перевода либы в апликейшин, как же это правильно делать?

Келесі