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

Поделиться
HTML-код
  • Опубликовано: 8 ноя 2024

Комментарии • 41

  • @shoto_masha
    @shoto_masha 4 года назад +3

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

    • @grommaks
      @grommaks  4 года назад

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

    • @shoto_masha
      @shoto_masha 4 года назад +1

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

  • @Borys-h4s
    @Borys-h4s 4 года назад +5

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

    • @grommaks
      @grommaks  4 года назад +5

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

  • @andreifilimonchyk8318
    @andreifilimonchyk8318 Год назад +1

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

  • @mykolastrashok9986
    @mykolastrashok9986 4 года назад +4

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

  • @VictorKorovin-s9q
    @VictorKorovin-s9q 8 месяцев назад +1

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

    • @grommaks
      @grommaks  8 месяцев назад +1

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

    • @VictorKorovin-s9q
      @VictorKorovin-s9q 8 месяцев назад

      Спасибо )

  • @grommaks
    @grommaks  4 года назад +4

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

  • @viktorm2937
    @viktorm2937 4 года назад +3

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

    • @grommaks
      @grommaks  4 года назад

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

  • @cooleekova
    @cooleekova 3 года назад

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

  • @farkhoddaniyarov4909
    @farkhoddaniyarov4909 4 года назад

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

  • @grommaks
    @grommaks  4 года назад +4

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

    • @nurda1997
      @nurda1997 4 года назад +1

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

    • @grommaks
      @grommaks  4 года назад +1

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

    • @nurda1997
      @nurda1997 4 года назад

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

    • @grommaks
      @grommaks  4 года назад +1

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

    • @nurda1997
      @nurda1997 4 года назад +1

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

  • @SergioUkrAr
    @SergioUkrAr 11 месяцев назад +1

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

    • @grommaks
      @grommaks  11 месяцев назад +1

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

    • @SergioUkrAr
      @SergioUkrAr 11 месяцев назад +1

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

  • @MrShevrin
    @MrShevrin 2 года назад +1

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

    • @grommaks
      @grommaks  2 года назад

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

    • @grommaks
      @grommaks  2 года назад

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

  • @RedkeiGost
    @RedkeiGost 2 года назад +1

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

    • @grommaks
      @grommaks  2 года назад

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

  • @farkhoddaniyarov4909
    @farkhoddaniyarov4909 4 года назад

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

    • @grommaks
      @grommaks  4 года назад +1

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

  • @katerinak5997
    @katerinak5997 Год назад

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

  • @gurgenkroyan2548
    @gurgenkroyan2548 2 года назад

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

    • @grommaks
      @grommaks  2 года назад

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

  • @RedkeiGost
    @RedkeiGost 2 года назад

    А если мы все-таки хотим использовать встроенную локализацию т.е. которая добавляется через 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 например, но не с билдерами либ. Получается, либу сбилдить переведенную нельзя, как так? Ну хорошо, допустим, но тогда надо как-то экспортировать текст перевода либы в апликейшин, как же это правильно делать?