Как обновить Angular до последней версии. Обновление простого проекта с V13 до V16

Обновление angular до последней версии типичная задача, учитывая что angular обновляется каждые пол года. В этом видео я показал общую стратегию для обновления приложения написанного на angular.
В моем случае я обновил angular 13 до версии angular 16. Хоть проект и пустой, но основная идея легко переиспользуется
==============================
Код готового урока:
github.com/MaksymGrom/angular...
==============================
Инструкция по установке angular проекта:
Вариант 1:
Пройдите плейлист: • Как работает WEB. Мест...
Вариант 2:
github.com/MaksymGrom/angular...
Загрузите зависимости (npm install)
Можно запускать проект (ng serve)
==============================
Выбор редактора код это дело каждого, но в этом плейлисте я использую webstorm. Как настроить один из популярнейших редакторов ниже:
VS Code: • VS Code extensions для...
WebStorm: • WebStorm работа с angu...
Архитектурные елементы Angular • Angular архитектурные ...
Основы RxJS • RxJs Теория: Observabl...
Подробнее об OnPush • ngOnChanges vs ngDoChe...
Немного старого видео об иммутабельности • Immutable. Неизменяемо...
Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов.
Курс по SQL можно найти по ссылке: • Что такое SQL? Как раб...
Спасибо что продолжаете смотреть меня и радовать комментариями.
---- Соц сети
Телеграм, где можно узнать о новых видео и получать доп контент
t.me/webDevGromMaxChannel
P.S. В youtube я отвечаю быстрее чем в telegram, буду рад комментам в youtube
----
Чтобы поддержать канал
1) Можно поставить лайк (или дизлайк, если не понравилось видео)
2) Оставить комментарий более 5 слов
3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать
5) Можно стать участником моего канала на платной основе / @grommaks
#directives #angular #grommax
Материально поддержать канал можно следующим способом
1) Перевод на карту send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
forms.gle/ZbFCKJSpDNYp4AMC6
Оглавление
00:00 - Введение
00:13 - src/styles.scss angular.json
02:40 - Подключение в index.html
04:45 - ViewEncapsulation.None
06:32 - ::ng-deep для глобальных стилей
07:21 - Глобальные стили в компоненте - зло
10:09 - не используй ::ng-deep без префикса
10:50 - Use Case для ViewEncapsulation.None
11:54 - Краткий гайд

[@hennadiikhudolieiev2198]

Наконец-то понеслось. Больше видео!

[@SergioUkrAr]

Спасибо очень полезная инфа

[@berdmival]

Спасибо большое за видео 😊. Единственное, я стараюсь не ставить npm пакеты глобально, в т.ч. Angular CLI и Typescript. Связано это с тем, что проекты, над которыми работает компания в которой я тружусь, используют разные версии Ангуляр и т.п. Ноду, кстати, тоже использую через nvm, что позволяет легко переключаться между версиями. Возможно, это причина почему у тебя приходится использовать force (глобальная версия конфликтует), но это не точно )). С нетерпением жду очередных уроков 😊. Я хоть уже давно не новичок и многое из того, о чём ты говоришь, уже знаю, но всегда черпаю что-то полезное (иногда что-то освежается в уме, а порой и что-то новое узнаю). Успехов тебе ;)

[@grommaks]

Спасибо за отзыв)

[@MsEntombed]

Спасибо за видео. Маленькое уточнение npm install -g это команда для установки глобального пакета. Нужна для установки глобального пакета @angular/cli. Раньше при обновлении локального пакета нужно было обновлять глобальный. С версии 9 вроде можно работать в разными версиями глобального и локального cli. По моей практике всегда лучше обновляться постепенно а не прыгать через несколько версия за один раз. Меньше проблем возникнет. Так же если приходится работать с разными версиями angular, которые требуют разные nodejs пригодится nvm.

[@grommaks]

На рабочей машине есть nvm Спасибо за дополнение :)

[@vitaliit.7588]

Спасибо за видео! В цикле видео про модули будет видео про модуль-федерейшн?

[@grommaks]

Неа, это технология вебпак не имеет отношение к angular Мы ее используем с NX + angular, но это совсем другая история

[@user-ve8ux5yy7y]

Спасибо. Как всегда интересно и полезно. Но есть вопрос не по теме. Видео вышло в воскресенье, но некоторые комменты у меня обозначаются как написанные несколько дней назад. Как так?

[@grommaks]

Я снимаю видео не день в день, условно у меня готовы видео на следующие 4 недели, после монтажа они будут доступны при условии платной подписки (сейчас любая платная подписка 0.7$-7$ в месяц дает эту возможность) Каждое воскресенье я публикую один выпуск P.S. У меня не всегда получается делать видео с запасом Ютубу хорошо чтобы была регулярность, мне хорошо делать видео когда получается

[@user-ve8ux5yy7y]

Oh. I see. Thanks:)@@grommaks

[@ewgenbi]

Оглавление поправьте. А так - спасибо!

[@user-san-chous]

Весной проект обновлял с 9 до 15-го. То проблемы относительно серьезные были уже на одной из последних или вообще на 15-ой. С матириалом особенно. Там есть тоже какое-то автоматическое обновление матириала, но у меня оно ломало все, то вручную делал... Не было же еще уроков по формах, вроде? Хотелось бы)

[@grommaks]

Еще по формам не было) хотя самому уже хотелось бы разобраться в формах и поделиться структурированной инфой Сам обновлял с 6 по 13, в разных моментах испытал трудности, но со standalone вангую что много чего переведут и сломают в конце концов

[@VasjaG]

@@grommaks С формами много приключений. У Ангуляра `control.value === string | null`, a в интерфейсе `name?: string === string || undefined`. И поэтому оно ругается, что `string | null | undefined` по типу не подходит к `string | null`. Приходится итграться с кодом. Кажется, что типизированные формы ещё не допилены. И с ними будут обновления, которые будет непросто внедрить в проект.

[@grommaks]

@@VasjaG можно оставаться на старых не типизированных формах пока не стабилизируется Пока не сталкивался сильно с новыми формами, а уже хотелось бы, скорее всего столкнусь когда буду делать видео для ютуба а не на работе

[@1654045]

Ты сказал что используешь только рекомендуемые библиотеки. Это какие? Где посмотреть эти рекомендации?

[@grommaks]

Те которые с установкой проекта идут, роутинг, материал Еще для стейт менеджмента это ngrx В принципе больше ничего не использую Бывает D3, но это не совсем ангулар библиотека Бывает для Канваса, там приходится заниматься любовью с оьновлением

[@user-xg3er7dw8y]

Как?!!! Откуда ты узнал? Я в пятницу начал обновление проекта с 13 до 16 😆😆😆

[@grommaks]

Сам этим на работе занимаюсь :)

[@UC1C0GDMTjasAdhELHZ6lZNg]

Прям как будто мысли читаешь. На улице дождь, заняться нечем. Начал проект обновлять на 16 версию, и как только закончил от тебя сообщение в телеге) Я делал так: пишешь ng update тебе cli сам показывает, что надо обновить и какую команду использовать. Я просто копировал и сверху вниз обновлял, никаких проблем не возникло.

[@grommaks]

Интересненько, надо бы попробовать такое