{"id":331431,"date":"2022-04-03T09:00:27","date_gmt":"2022-04-03T09:00:27","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=331431"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=331431","title":{"rendered":"<span>\u041a\u0430\u043a \u044f \u0434\u0435\u043b\u0430\u043b \u0441\u0430\u0439\u0442 \u0432\u0438\u0437\u0438\u0442\u043a\u0443 \u043d\u0430 Angular<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/10e\/6e2\/8d5\/10e6e28d5e22c812101e72da8b2f1c74.jpg\" width=\"1920\" height=\"1016\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/10e\/6e2\/8d5\/10e6e28d5e22c812101e72da8b2f1c74.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043d\u0430\u0437\u0430\u0434 \u044f \u0437\u0430\u0433\u043e\u0440\u0435\u043b\u0441\u044f \u0436\u0435\u043b\u0430\u043d\u0438\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 pet-\u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0431\u044b \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u0430\u0439\u0442\u0430 \u0432\u0438\u0437\u0438\u0442\u043a\u0438 \u043d\u0430 Angular. \u0418 \u0442\u0430\u043a \u043a\u0430\u043a Angular \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0435\u0442 SSR* \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u0434\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 SEO \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0435\u043c\u0430\u043b\u044b\u0445 \u0442\u0435\u043b\u043e\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0439**, \u0442\u043e \u0441\u0430\u043c\u0430 \u0438\u0434\u0435\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043e\u043c\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439.<\/p>\n<blockquote>\n<p>\u041a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0438\u043a &#8212; \u0412\u044b\u0431\u043e\u0440 \u2014 \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0438\u0447\u044c, \u043f\u0440\u044f\u043c \u043b\u044e\u0442\u0443\u044e \u0433\u0440\u044f\u0437\u044c-\u0433\u0440\u044f\u0437\u044c, \u043b\u0438\u0431\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0433\u0440\u044f\u0437\u044c, \u043d\u043e \u043d\u0435 \u043f\u0440\u044f\u043c \u0441\u043e\u0432\u0441\u0435\u043c \u0433\u0440\u044f\u0437\u044c.\u00a0<\/p>\n<\/blockquote>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0448\u043b\u043e \u0438 \u0441\u0442\u043e\u0438\u0442 \u043b\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0430\u0439\u0442\u044b \u0432\u0438\u0437\u0438\u0442\u043a\u0438 \u043d\u0430 Angular.<\/p>\n<p><sup>* Universal \u043d\u0435 \u0431\u0435\u0440\u0435\u043c \u0432 \u0440\u0430\u0441\u0447\u0435\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0440\u044f\u0434 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c, \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0431\u0435\u0441\u0448\u043e\u0432\u043d\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430.<br \/>** \u0412\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 sitemap, \u0438\u043b\u0438 \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0435\u0435 \u0440\u0443\u043a\u0430\u043c\u0438, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c robots, manifest, meta \u0442\u0435\u0433\u0438 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435.<\/sup><\/p>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043e \u043f\u0440\u043e\u0434\u0430\u0436\u0435 \u043a\u0440\u043e\u0441\u0441\u043e\u0432\u043e\u043a.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/72f\/46b\/fe8\/72f46bfe8b29b3da19a00f0ffb4950bc.gif\" width=\"800\" height=\"450\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/72f\/46b\/fe8\/72f46bfe8b29b3da19a00f0ffb4950bc.gif\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0418\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0442\u0430\u043a\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043a\u0430\u043a <s>Adobe Phpotoshop<\/s> Gimp \u0438<s> Adobe Premiere<\/s> Davinci Resolve, \u0432\u044b\u0448\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0444\u0435\u0439\u043a\u043e\u043c \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0421 \u0434\u0435\u043c\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0437\u0434\u0435\u0441\u044c &#8212; <a href=\"https:\/\/banshop.fafn.ru\/\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/banshop.fafn.ru<\/u><\/a><u>.<\/u><\/p>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043d\u0430 github: <a href=\"https:\/\/github.com\/Fafnur\/banshop\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/Fafnur\/banshop<\/a><\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f ubuntu, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d nginx \u0438 nodejs. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f pm2.<\/p>\n<p>\u0410\u0440\u043f\u0438\u043e\u0440\u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440 \u0440\u0443\u043a\u0430\u043c\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439. \u0421\u0435\u0439\u0447\u0430\u0441 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043a\u0430\u043a kubernates, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u0437\u044f\u0442\u044c \u043d\u0430 \u0441\u0435\u0431\u044f \u0432\u0441\u044e \u0440\u0443\u0442\u0438\u043d\u0443 \u0438 \u0434\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043a\u043b\u0430\u0441\u0442\u0435\u0440.\u00a0<\/p>\n<blockquote>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u044f \u043f\u043e\u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u043a\u043b\u0430\u0441\u0442\u0435\u0440 \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0430\u0439\u0442\u0430 \u0432\u0438\u0437\u0438\u0442\u043a\u0438, \u0442\u043e \u0442\u043e\u0447\u043d\u043e \u043c\u043e\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u0438\u0447\u043a\u0430 \u0432\u0435\u0437\u0451\u0442 \u043c\u0435\u043d\u044f \u0442\u0443\u0434\u0430, \u043a\u0443\u0434\u0430 \u044f \u043d\u0435 \u0445\u043e\u0447\u0443.<\/p>\n<\/blockquote>\n<h2>\u0424\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e<\/h2>\n<p>\u0421\u0430\u0439\u0442 \u0432\u0438\u0437\u0438\u0442\u043a\u0430 &#8212; \u044d\u0442\u043e \u0440\u0430\u0441\u043f\u043b\u044b\u0432\u0447\u0430\u0442\u043e\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u0435. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u0434 \u0441\u0430\u0439\u0442\u043e\u043c \u0432\u0438\u0437\u0438\u0442\u043a\u043e\u0439 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 web \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u201c\u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438\u201d, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0432\u0430\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043a\u0443\u043f\u0438\u0442\u044c, \u043e\u0444\u043e\u0440\u043c\u0438\u0432 \u0437\u0430\u043a\u0430\u0437 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435.\u00a0<\/p>\n<p>\u0414\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 <code>e-commerce<\/code> \u044f \u043d\u0435 \u0440\u0435\u0448\u0438\u043b\u0441\u044f \u0437\u0430 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e, \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043b \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f.\u00a0<\/p>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438:<\/p>\n<ol>\n<li>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u0442\u043e\u0432\u0430\u0440\u043e\u0432\u00a0 &#8212; \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0442\u043e\u0432\u0430\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0442\u043e\u0432\u0430\u0440\u043e\u0432. \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0442\u043e\u0432\u0430\u0440\u0430 \u0432\u0435\u0434\u0435\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0442\u043e\u0432\u0430\u0440\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u043a\u043e\u0440\u0437\u0438\u043d\u044b &#8212; \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443 \u0442\u043e\u0432\u0430\u0440\u044b \u0441 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c\u0438 \u043e\u043f\u0446\u0438\u044f\u043c\u0438 (\u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u0446\u0432\u0435\u0442\u0430, \u2026). \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043a\u043e\u0440\u0437\u0438\u043d\u044b \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\/\u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0438\u0437 \u043a\u043e\u0440\u0437\u0438\u043d\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043a\u0430\u0437\u0430 &#8212; \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0441\u0435\u0431\u0435 \u0438 \u043e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u0437\u0430\u043a\u0430\u0437, \u0433\u0434\u0435 \u0432 \u0437\u0430\u043a\u0430\u0437\u0435 \u0431\u0443\u0434\u0443\u0442 \u0442\u043e\u0432\u0430\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443 \u0440\u0430\u043d\u0435\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u0441\u043b\u0443\u0436\u0431\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 &#8212; \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0433\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0441\u0432\u044f\u0437\u0430\u0442\u044c\u0441\u044f \u0441 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c \u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0438\u0435 \u0435\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u043f\u0440\u0430\u0432\u043e\u0432\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 &#8212; \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u0435(\u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438), \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043f\u0440\u043e\u0434\u0430\u0436\u0438 \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0430.<\/p>\n<\/li>\n<\/ol>\n<p>\u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u0434\u043b\u044f \u0442\u0440\u0435\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c:<\/p>\n<ul>\n<li>\n<p>\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043b\u0435\u0444\u043e\u043d (<code>handset<\/code>);<\/p>\n<\/li>\n<li>\n<p>\u043f\u043b\u0430\u043d\u0448\u0435\u0442 (<code>tablet<\/code>);<\/p>\n<\/li>\n<li>\n<p>\u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043e\u0432 (<code>web<\/code>).<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043d\u043b\u0430\u0439\u043d \u043f\u0440\u043e\u0434\u0430\u0436, \u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c SEO \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043c\u043e\u0447\u044c \u0432 \u043f\u0440\u043e\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u0441\u0430\u0439\u0442\u0430 \u0432 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445. \u0421\u043f\u0438\u0441\u043e\u043a \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a SEO:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u0430\u0440\u0442\u0443 \u0441\u0430\u0439\u0442\u0430 (<code>sitemap<\/code>), \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432\u0441\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u044b\u043c\u0438 \u0442\u043e\u0432\u0430\u0440\u0430\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d <code>robots.txt<\/code> \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u0430\u0432\u0438\u043b \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u043c\u0438 \u0440\u043e\u0431\u043e\u0442\u0430\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0444\u0430\u0439\u043b <code>manifest<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c <code>PWA<\/code> \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043c\u0435\u0442\u0430 \u0442\u0435\u0433\u0438 (<code>keywords<\/code>, <code>title<\/code>, <code>description<\/code>) \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043c\u0435\u0442\u0430 \u0442\u0435\u0433\u0438 \u0434\u043b\u044f <a href=\"https:\/\/ogp.me\/\" rel=\"noopener noreferrer nofollow\">og<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0438\u0441\u043a\u043e\u0432\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u0443\u044e, \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 (<code>SSR<\/code>), \u0430 \u043d\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 <code>HTML<\/code> \u0444\u0430\u0439\u043b \u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c <code>javascript<\/code>.<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0435\u0449\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0438\u0434\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u043f\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c, \u043d\u043e \u0432\u0438\u0434\u0438\u043c\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u043b\u0430\u0442\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438.<\/p>\n<\/blockquote>\n<h2>\u0412\u044b\u0431\u043e\u0440 \u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0438, \u043f\u0440\u043e\u0434\u0443\u043a\u0446\u0438\u0438 \u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0430<\/h2>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u0445\u043e\u0442\u0435\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0430\u0439\u0442 \u0432\u0438\u0437\u0438\u0442\u043a\u0443 \u043d\u0430 Angular \u0441 \u044f\u0445\u0442\u0430\u043c\u0438 \u0438 \u0448\u043b\u044e\u043f\u043a\u0430\u043c\u0438, \u043d\u043e \u043f\u043e\u0442\u043e\u043c \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u044f \u0434\u0430\u043b\u0435\u043a \u043e\u0442 \u044f\u0445\u0442. \u0418 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0438 \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u043f\u0440\u043e\u0434\u0430\u0436\u0443 \u043a\u0440\u043e\u0441\u0441\u043e\u0432\u043e\u043a.\u00a0<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0434\u0435\u043b\u043e \u0441\u0442\u043e\u044f\u043b\u043e \u0437\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0422\u0430\u043a \u043a\u0430\u043a \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0438\u0437 \u043c\u0435\u043d\u044f \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439, \u044f \u0438\u0437\u0443\u0447\u0438\u043b \u0441\u0430\u0439\u0442\u044b \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0441\u043f\u043e\u0440\u0442\u0438\u0432\u043d\u044b\u0445 \u0431\u0440\u0435\u043d\u0434\u043e\u0432 \u0438 \u043f\u0440\u0438\u043a\u0443\u043f\u0438\u043b \u0441\u0435\u0431\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440 \u043a\u0440\u043e\u0441\u0441\u043e\u0432\u043e\u043a. \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u0432 \u043e \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435, \u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u043d\u0430 \u0431\u0440\u0435\u043d\u0434\u0435 Reebok.<\/p>\n<blockquote>\n<p>\u041d\u0435 \u0432\u0441\u0435 \u0436\u0435 \u0414\u0443\u0434\u044e \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043f\u0438\u0430\u0440\u0438\u0442\u044c Adidas.<\/p>\n<\/blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438 \u0441\u0430\u0439\u0442\u044b \u043d\u0430 \u0437\u0430\u043a\u0430\u0437, \u0442\u043e \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u0435\u0442\u0435\u043d\u0446\u0438\u0438 \u043b\u044e\u0434\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0438\u0445 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c &#8212; \u043e\u0447\u0435\u043d\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0430\u0439\u0442\u043e\u043c, \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0432 \u0433\u0443\u0433\u043b \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0438 \u0434\u0430\u0442\u044c \u043a \u043d\u0435\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0432\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u0443 \u0440\u0435\u0441\u0443\u0440\u0441\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0441\u0430\u043c \u043c\u043e\u0433 \u043c\u0435\u043d\u044f\u0442\u044c \u0442\u043e\u0432\u0430\u0440\u044b, \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u044f \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434.<\/p>\n<p>\u0412\u0437\u044f\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0441 \u0441\u0430\u0439\u0442\u0430 Reebok \u0438 \u0431\u0435\u0441\u0447\u0435\u0441\u0442\u043d\u043e \u0443\u043a\u0440\u0430\u0434\u044f \u043e\u0434\u0438\u043d \u0438\u0437 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u044f \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0442\u0430\u0431\u043b\u0438\u0447\u043a\u0443 \u0432 <u>Google Sheet<\/u>.\u00a0<\/p>\n<p>\u0425\u043e\u0442\u044f \u0431\u0440\u0435\u043d\u0434\u044b \u0442\u0440\u0430\u0442\u044f\u0442 \u043c\u043d\u043e\u0433\u043e \u0434\u0435\u043d\u0435\u0433 \u043d\u0430 \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433, \u043d\u043e \u043a\u0430\u043a \u043d\u0438 \u043a\u0440\u0443\u0442\u0438 \u0434\u0438\u0437\u0430\u0439\u043d \u0443 \u043d\u0438\u0445 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043f\u043e\u043b\u043d\u044b\u0439 \u043e\u0442\u0441\u0442\u043e\u0439. \u041c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0447\u0435\u0433\u043e-\u0442\u043e \u043b\u0435\u0433\u043a\u043e\u0433\u043e \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0443, \u043d\u043e \u0438 \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435 \u0432\u043e\u0440\u043e\u0442\u0438\u043b\u043e \u0433\u043b\u0430\u0437.<\/p>\n<p>\u0418 \u0442\u043e\u0433\u0434\u0430 \u044f \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u043a \u043b\u0443\u0447\u0448\u0435\u043c\u0443 \u0434\u0440\u0443\u0433\u0443 \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 Google. Material Design \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043d\u0438\u0447\u0435\u0433\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0432\u0437\u044f\u043b Angular Material \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 UI KIT\u2019\u0430 \u0438 \u0440\u0435\u0448\u0438\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0430\u0440\u0443 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.\u00a0<\/p>\n<h2>\u0421\u0442\u0430\u0440\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b\u0431\u043e\u0440 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u043f\u043e\u0437\u0430\u0434\u0438, \u0430 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u043b\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b, \u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u0441\u0442\u0430\u043b\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u043c\u0443 &#8212; \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>\u042f \u0441\u043e\u0437\u0434\u0430\u043b \u043d\u043e\u0432\u044b\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431\u0435 &#8212; <u>banshop<\/u>. \u041f\u0435\u0440\u0432\u044b\u0439 \u043a\u043e\u043c\u043c\u0438\u0442 \u0431\u044b\u043b \u0441\u0434\u0435\u043b\u0430\u043d 24 \u044f\u043d\u0432\u0430\u0440\u044f 2022 \u0433\u043e\u0434\u0430. \u041f\u0440\u043e\u0448\u043b\u043e \u0431\u043e\u043b\u0435\u0435 \u0434\u0432\u0443\u0445 \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u0438 \u044f \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b \u043f\u0440\u043e\u0435\u043a\u0442, \u0433\u0434\u0435 \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 176 \u043a\u043e\u043c\u043c\u0438\u0442\u043e\u0432.\u00a0<\/p>\n<blockquote>\n<p>\u0414\u0443\u043c\u0430\u044e, \u0435\u0441\u043b\u0438 \u044f \u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0432 \u0430\u0443\u0442\u0441\u043e\u0440\u0441\u0438\u043d\u0433\u043e\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u0442\u043e \u043c\u0435\u043d\u044f \u043d\u0435\u043f\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0431\u044b \u0443\u0432\u043e\u043b\u0438\u043b\u0438 \u0437\u0430 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0443\u044e \u043e\u0446\u0435\u043d\u043a\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u044f \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0437\u0430 \u043d\u0435\u0434\u0435\u043b\u044e. \u041d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0443\u0448\u043b\u043e \u043e\u043a\u043e\u043b\u043e \u0434\u0432\u0443\u0445 \u043c\u0435\u0441\u044f\u0446\u0435\u0432, \u0433\u0434\u0435 \u0432\u0435\u0447\u0435\u0440\u0430\u043c\u0438 \u044f \u0448\u0435\u043b \u0441 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<\/blockquote>\n<p>\u0421\u0442\u0435\u043a \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438:<\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/nx.dev\/\" rel=\"noopener noreferrer nofollow\">Nx<\/a> &#8212; \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0435\u043c.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/angular.io\/\" rel=\"noopener noreferrer nofollow\">Angular<\/a> &#8212; \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/ngrx.io\/\" rel=\"noopener noreferrer nofollow\">Ngrx<\/a> &#8212; \u043e\u0434\u043d\u0430 \u0438\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 <code>Redux<\/code> \u0432 Angular.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/angular.io\/guide\/universal\" rel=\"noopener noreferrer nofollow\">Universal<\/a> &#8212; \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f Server Side Rendering.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/angular.io\/guide\/i18n-overview\" rel=\"noopener noreferrer nofollow\">Angular Localization<\/a> &#8212; \u043c\u043e\u0434\u0443\u043b\u044c \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/jestjs.io\/\" rel=\"noopener noreferrer nofollow\">Jest<\/a> &#8212; \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f unit \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.cypress.io\/\" rel=\"noopener noreferrer nofollow\">Cypress<\/a> &#8212; \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f <code>e2e<\/code> \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u043d\u0435\u0448\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043f\u043e\u043c\u0438\u043c\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0432\u044b\u0448\u0435, \u043d\u043e \u0431\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c:<\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/hammerjs.github.io\/\" rel=\"noopener noreferrer nofollow\">Hammerjs<\/a> &#8212; \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0442\u0430\u043f\u043e\u0432, \u0441\u0432\u0430\u0439\u043f\u043e\u0432 \u0438 \u0442.\u0434.;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/just-jeb\/angular-builders\" rel=\"noopener noreferrer nofollow\">@angular-builders\/custom-webpack<\/a> &#8212; \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0438\u043b\u0434\u0435\u0440\u043e\u0432 Angular\u2019\u0430;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/ike18t\/ng-mocks\" rel=\"noopener noreferrer nofollow\">ng-mocks<\/a> &#8212; \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u0432 Angular;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/NagRock\/ts-mockito\" rel=\"noopener noreferrer nofollow\">ts-mockito<\/a> &#8212; \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0447\u0435\u0433\u043e \u0443\u0433\u043e\u0434\u043d\u043e \u0432 Typescript;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/uNmAnNeR\/imaskjs\" rel=\"noopener noreferrer nofollow\">angular-imask<\/a>\u00a0 &#8212; \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441 \u043c\u0430\u0441\u043a\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 &#8212; \u044d\u0442\u043e \u0432\u043a\u0443\u0441\u043e\u0432\u0449\u0438\u043d\u0430 (<code>husky<\/code>, <code>eslint<\/code>,&#8230;).<\/p>\n<blockquote>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u043e\u0438 \u0441\u0442\u0430\u0442\u044c\u0438, \u0442\u043e \u0432\u0435\u0441\u044c \u0432\u044b\u0448\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0441\u0442\u0435\u043a \u0435\u0441\u0442\u044c \u043f\u043e\u0447\u0442\u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u043e\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u041e\u0434\u043d\u0438\u043c \u0441\u043b\u043e\u0432\u043e\u043c \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0435\u043a \u0438 \u044f \u0435\u0433\u043e \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0441\u044c.<\/p>\n<\/blockquote>\n<h2>\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>\u0412\u0435\u0441\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0448\u0430\u0433\u043e\u0432:<\/p>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 <code>workspace<\/code> \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0432\u0441\u0435\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 <code>core<\/code> \u043c\u043e\u0434\u0443\u043b\u0435\u0439.\u00a0 \u0422\u0430\u043a \u043a\u0430\u043a \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0442\u043e \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0435\u0441\u0442\u044c \u0441\u043c\u044b\u0441\u043b \u0437\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u044c \u044f\u0434\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 <code>UI KIT<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u0441\u0435 \u043e\u0431\u0449\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u042f\u0440\u043a\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043c\u043e\u0434\u0443\u043b\u0438 \u0441\u0435\u0442\u043e\u043a, \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432, \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u044b, \u0441\u0441\u044b\u043b\u043a\u0438, \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u043c\u043e\u0434\u0443\u043b\u044c \u0442\u043e\u0432\u0430\u0440\u043e\u0432, \u043c\u043e\u0434\u0443\u043b\u044c \u043a\u043e\u0440\u0437\u0438\u043d\u044b, \u043c\u043e\u0434\u0443\u043b\u044c \u0447\u0430\u0442\u0430, \u043c\u043e\u0434\u0443\u043b\u044c \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043a\u0430\u0437\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>SEO<\/code>, \u0433\u0434\u0435 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>SSR<\/code> \u0438 \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0430. \u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u0448\u0430\u0433\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430\u0442\u043e\u0447\u043a\u0430 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0434 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 <code>SSR<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0442\u0435\u0441\u0442\u044b \u043f\u0438\u0448\u0443\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043d\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 c <code>TODO: Add test<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u0448\u0430\u0433\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c. \u0414\u0430 \u0438 e2e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c \u0448\u0430\u0433\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u0445 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u043d\u043d\u0438\u0445 \u0448\u0430\u0433\u0430\u0445 \u0431\u0435\u0441\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0431 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432. \u041a\u0430\u043a \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>Lighthouse<\/code> \u043e\u0442 <code>Google chrome<\/code>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u043a\u0440\u0430\u0442\u0446\u0435 \u043e\u043f\u0438\u0448\u0443 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u0448\u0430\u0433\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0441\u0430\u0439\u0442 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b.<\/p>\n<blockquote>\n<p>\u041e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d \u0432 \u043c\u043e\u0435\u043c \u0446\u0438\u043a\u043b\u0435 \u0441\u0442\u0430\u0442\u0435\u0439 \u043d\u0430 <a href=\"https:\/\/medium.com\/fafnur\/%D1%81%D0%B0%D0%B9%D1%82-%D0%B2%D0%B8%D0%B7%D0%B8%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-angular-%D0%B2%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-9bc18c25fe37\" rel=\"noopener noreferrer nofollow\">\u043c\u0435\u0434\u0438\u0443\u043c\u0435<\/a>.<\/p>\n<\/blockquote>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 workspace<\/h2>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e workspace \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043e\u0434\u043d\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0438 NX CLI \u0441\u043e\u0437\u0434\u0430\u0434\u0443\u0442 \u043d\u043e\u0432\u044b\u0439 workspace \u0438 \u0435\u0441\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043e\u043f\u0446\u0438\u044e \u0441 Angular, \u0442\u043e \u0435\u0449\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043d\u043e\u0432\u043e\u0435 Angular \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">yarn create nx-workspace --package-manager=yarn<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0442\u0435\u043a\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e nx, \u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f SSR:<\/p>\n<pre><code class=\"bash\">yarn nx add @nguniversal\/express-engine<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 Ngrx \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c Root State, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<pre><code class=\"bash\">nx g @nrwl\/angular:ngrx rs --module=path\/to\/app.module.ts<\/code><\/pre>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"bash\">nx add @angular\/localize<\/code><\/pre>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 Angular Material:<\/p>\n<pre><code class=\"bash\">nx add @angular\/material<\/code><\/pre>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a:<\/p>\n<pre><code class=\"bash\">yarn add hammerjs angular-imask<\/code><\/pre>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a:<\/p>\n<pre><code class=\"bash\">yarn add -D ng-mocks ts-mockito<\/code><\/pre>\n<p>\u0418 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0432\u043a\u0443\u0441\u043e\u0432\u0449\u0438\u043d\u044b:<\/p>\n<pre><code class=\"bash\">yarn add -D eslint-plugin-import eslint-plugin-jsdoc eslint-plugin-ngrx eslint-plugin-prettier eslint-plugin-simple-import-sort<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0432 \u0432\u0441\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0432 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u0430\u0433\u0438\u0438 \u0434\u043b\u044f <code>eslint<\/code>\u2019\u0430, \u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0442\u044c\u0441\u044f \u043d\u043e\u0432\u043e\u0435 \u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e (<code>workspace<\/code>) \u0441 Angular \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c.<\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 core \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/h2>\n<p>Core \u043c\u043e\u0434\u0443\u043b\u0438 &#8212; \u043d\u0430\u0431\u043e\u0440 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0435\u0448\u0438\u0442\u044c \u0443\u0437\u043a\u0438\u0435 \u043c\u0435\u0441\u0442\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.\u00a0<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0443\u0437\u043a\u0438\u0445 \u043c\u0435\u0441\u0442:<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a Window;<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0445 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449 <code>localStroge<\/code>, <code>sessionStrorage<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0438 \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 (<code>PageObject<\/code>) \u0438 DI \u043c\u043e\u043a-\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u0423\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u041c\u0430\u043f\u043f\u0438\u043d\u0433 <code>FormControl<\/code> \u0438\u0437 <code>FormGroup<\/code>;<\/p>\n<\/li>\n<li>\n<p><code>ApiService<\/code>\u00a0 &#8212; \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 <code>HttpClient<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439 \u0438 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c <code>core<\/code> &#8212; \u044d\u0442\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044e\u0442 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0438\u043b\u0438 \u0440\u0435\u0448\u0430\u044e\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u043c\u0438, \u0442\u0430\u043a\u0438\u043c\u0438 \u043a\u0430\u043a \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a web \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430\u043c \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0435\u0442 <code>window<\/code>.<\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c \u043a <code>window<\/code>:<\/p>\n<pre><code class=\"javascript\">import { DOCUMENT } from '@angular\/common'; import { Inject, Injectable } from '@angular\/core';  @Injectable({   providedIn: 'root', }) export class WindowService {   constructor(@Inject(DOCUMENT) public readonly document: Document) {}    get window(): Window | null {     return this.document.defaultView;   } }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a window:<\/p>\n<pre><code class=\"javascript\">const navigator = this.windowService.window?.navigator<\/code><\/pre>\n<blockquote>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 window \u0431\u0443\u0434\u0435\u0442 null, \u043d\u043e \u043b\u0443\u0447\u0448\u0435 null, \u0447\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/blockquote>\n<p>\u0412 \u0441\u0435\u0440\u0432\u0438\u0441 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c window \u0438 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0440\u0432\u0438\u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u044f\u0432\u043d\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438:<\/p>\n<pre><code class=\"javascript\">import { DOCUMENT } from '@angular\/common'; import { Inject, Injectable } from '@angular\/core';  @Injectable({   providedIn: 'root', }) export class WindowService {   constructor(@Inject(DOCUMENT) public readonly document: Document) {}    get window(): Window {     const window: Window | null = this.document.defaultView;      if (window === null) {       throw new Error('Default view is not defined!');     }      return window;   } }<\/code><\/pre>\n<p>\u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 core \u043c\u043e\u0434\u0443\u043b\u044f\u0445 \u0442\u0430\u043a\u0436\u0435 \u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u044b, \u043a\u0430\u043a \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441 Window. \u041e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043d\u0438\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431\u0435 &#8212; <a href=\"https:\/\/github.com\/Fafnur\/banshop\/tree\/main\/libs\/core\" rel=\"noopener noreferrer nofollow\">banshop\/core<\/a>.<\/p>\n<h2>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 UI KIT<\/h2>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 &#8212; \u044d\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 UI KIT.<\/p>\n<p>UI KIT &#8212; \u043d\u0430\u0431\u043e\u0440 \u043e\u0431\u0449\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\u00a0\u00a0<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043e\u0431\u0449\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0442\u043e \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c, \u043f\u043e\u0445\u043e\u0436\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434, \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u0445\u043e\u0436\u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430. \u0418 \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.\u00a0<\/p>\n<blockquote>\n<p>\u0410 \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043f\u0435\u0440\u0444\u0435\u043a\u0446\u0438\u043e\u043d\u0438\u0441\u0442 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430, \u0442\u043e UI KIT \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u0430 \u0432\u0438\u0437\u0438\u0442\u043a\u0438 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c.<\/p>\n<\/blockquote>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u044f \u0440\u0435\u0448\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u044b <a href=\"https:\/\/material.angular.io\/\" rel=\"noopener noreferrer nofollow\">Angular Material<\/a>, \u0442\u043e \u0443\u0436\u0435 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u0421\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043c\u0443 \u0434\u043b\u044f material \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u0430\u043a\u0435\u0442\u0430 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430.<\/p>\n<p>\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0442\u043e \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043f\u043b\u043e\u0445\u043e \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u043e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u043e Angular Material &#8212; \u044d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043b\u0435\u0439\u0430\u0443\u0442\u043e\u0432. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043b\u0435\u0439\u0430\u0443\u0442\u0430\u0445 \u0432 <a href=\"https:\/\/material.angular.io\/cdk\/layout\/overview\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n<p>Angular Material \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0440\u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0440\u0435\u0434\u0441\u0442\u0432 CDK. \u0412 CDK \u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 Breakpoints \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438:<\/p>\n<pre><code class=\"javascript\">export declare const Breakpoints: {     XSmall: string;     Small: string;     Medium: string;     Large: string;     XLarge: string;     Handset: string;     Tablet: string;     Web: string;     HandsetPortrait: string;     TabletPortrait: string;     WebPortrait: string;     HandsetLandscape: string;     TabletLandscape: string;     WebLandscape: string; };<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u044f\u0434 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0439 \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <code>BreakpointObserver<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0442\u0438\u043f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b.<\/p>\n<p>\u0421\u0435\u0440\u0432\u0438\u0441 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">import { BreakpointObserver, Breakpoints } from '@angular\/cdk\/layout'; import { Injectable } from '@angular\/core'; import { BehaviorSubject, Observable, tap } from 'rxjs';  export const LAYOUT_SHORT_TYPES_MAP = {   [Breakpoints.Handset]: Breakpoints.Handset,   [Breakpoints.HandsetPortrait]: Breakpoints.Handset,   [Breakpoints.HandsetLandscape]: Breakpoints.Handset,   [Breakpoints.Tablet]: Breakpoints.Tablet,   [Breakpoints.TabletPortrait]: Breakpoints.Tablet,   [Breakpoints.TabletLandscape]: Breakpoints.Tablet,   [Breakpoints.Web]: Breakpoints.Web,   [Breakpoints.WebPortrait]: Breakpoints.Web,   [Breakpoints.WebLandscape]: Breakpoints.Web, };  export const LAYOUT_TYPES = [Breakpoints.Handset, Breakpoints.Tablet, Breakpoints.Web];  @Injectable({   providedIn: 'root', }) export class LayoutService {   private readonly layoutSubject$ = new BehaviorSubject&lt;string>(Breakpoints.Handset);    get layoutType$(): Observable&lt;string> {     return this.layoutSubject$.asObservable();   }    get snapshotLayoutType(): string {     return this.layoutSubject$.value;   }    constructor(private readonly breakpointObserver: BreakpointObserver) {     this.breakpointObserver       .observe(LAYOUT_TYPES)       .pipe(         tap((result) => {           let type;           for (const query of Object.keys(result.breakpoints)) {             if (result.breakpoints[query]) {               type = LAYOUT_SHORT_TYPES_MAP[query];               break;             }           }            this.layoutSubject$.next(type ?? Breakpoints.Handset);         })       )       .subscribe();   }    is(size: string): boolean {     return size === this.snapshotLayoutType;   } }<\/code><\/pre>\n<p>\u0412\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0448\u0430\u0433\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0440\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430, \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0430 \u0438 \u041f\u041a.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/77b\/904\/8e8\/77b9048e84c39f7e151fcf4eb4930d59.jpeg\" width=\"700\" height=\"838\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/77b\/904\/8e8\/77b9048e84c39f7e151fcf4eb4930d59.jpeg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u043b\u0435\u0439\u0430\u0443\u0442\u0430 \u044f \u0441\u043e\u0437\u0434\u0430\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435: <code>GridModule<\/code> \u0438 <code>ContainerModule<\/code>.<\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0435\u0442\u043a\u0438 \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u0441\u0435\u0442\u043a\u0430\u043c\u0438 \u0432 Twitter Bootstrap.<\/p>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0430\u043d\u0430\u043b\u043e\u0433 \u043a\u043b\u0430\u0441\u0441\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438\u0437 Twitter Bootstrap, \u0433\u0434\u0435 \u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0435\u0441\u0442\u044c \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0431\u043b\u043e\u043a \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443.<\/p>\n<p>\u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0432 UI KIT \u0441\u0442\u0430\u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u0438 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u0438. \u041a\u0430\u0440\u0443\u0441\u0435\u043b\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0442\u043e\u043f\u043e\u0440\u043d\u043e, \u0433\u0434\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ebe\/11b\/a64\/ebe11ba648cb03c31f3691cffa65c846.gif\" width=\"800\" height=\"576\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ebe\/11b\/a64\/ebe11ba648cb03c31f3691cffa65c846.gif\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/h2>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u0441\u0435\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u043c\u043e\u0434\u0443\u043b\u044c \u0442\u043e\u0432\u0430\u0440\u043e\u0432, \u043c\u043e\u0434\u0443\u043b\u044c \u043a\u043e\u0440\u0437\u0438\u043d\u044b, \u043c\u043e\u0434\u0443\u043b\u044c \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043a\u0430\u0437\u0430 \u0438 \u043c\u043e\u0434\u0443\u043b\u044c \u0447\u0430\u0442\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/05c\/87d\/823\/05c87d8232550c981714b1204cac0eef.gif\" width=\"800\" height=\"450\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/05c\/87d\/823\/05c87d8232550c981714b1204cac0eef.gif\"\/><figcaption><\/figcaption><\/figure>\n<p>\u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0430\u0441\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u043b\u0430 \u0432 \u0441\u0435\u0431\u044f \u0432\u0441\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0438 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f.\u00a0<\/p>\n<blockquote>\n<p>\u0412\u044b\u043d\u0435\u0441\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0438\u043c\u0435\u0435\u0442 \u043e\u0434\u043d\u043e \u0432\u0435\u0441\u043e\u043c\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e &#8212; \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438 \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0448\u0430\u043d\u0441\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0446\u0438\u043a\u043b\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b.<\/p>\n<\/blockquote>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0431\u044b\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0432\u0441\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0441\u044f \u043d\u043e\u0432\u044b\u0439 state (feature state), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u043b \u0432 \u0441\u0435\u0431\u044f \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u044f. \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 <code>state<\/code> \u0431\u044b\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u044d\u043a\u0448\u0435\u043d\u044b \u0438 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440, \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0432\u0441\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f state, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0431\u044b\u043b\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0446\u0435\u043f\u043e\u0447\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0432 \u0444\u0430\u0441\u0430\u0434.<\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0431\u044b\u043b\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 UI \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438\u0441\u044c \u0432\u0438\u0434\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 &#8212; \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0442\u043e\u0432\u0430\u0440\u043e\u0432, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043a\u043e\u0440\u0437\u0438\u043d\u044b, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043a\u0430\u0437\u043e\u0432, \u0430 \u0443\u0436\u0435 \u043f\u043e\u0442\u043e\u043c \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b. \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 &#8212; \u044d\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443, \u0433\u0434\u0435 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u0432\u0430\u0440 \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0435 \u043e\u043a\u043d\u043e, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0430\u0441\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0442\u043e\u0432\u0430\u0440\u0430 \u0438 \u0431\u044b\u043b\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u0432\u0430\u0440 \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443 \u0441 \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445   \u043f\u043e\u043b\u0435\u0439.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f UI \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0430\u0441\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043c\u043e\u0434\u0443\u043b\u044f, \u0433\u0434\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u043b\u0438\u0441\u044c \u0440\u0430\u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u0437 UI KIT \u0438 UI \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0434\u0443\u043b\u044f.<\/p>\n<p>\u0412 \u043a\u043e\u043d\u0446\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u043e\u0434\u0443\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438\u0441\u044c \u0433\u0443\u0430\u0440\u0434\u044b (<code>can-active<\/code>), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u043b\u0438 \u043f\u0440\u0430\u0432\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c. <\/p>\n<h2>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/h2>\n<p>\u042f \u0436\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0443\u044e \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u0433\u0434\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <s>\u0440\u0443\u043d\u0433\u043b\u0438\u0448<\/s> \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439, \u0430 \u0441\u0430\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0440\u0443\u0441\u0441\u043a\u0438\u0439 \u044f\u0437\u044b\u043a.\u00a0<\/p>\n<blockquote>\n<p><em>\u042d\u0442\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0448\u0430\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043e\u0432\u0441\u0435\u043c &#8212; \u044d\u0442\u043e \u043f\u0440\u0438\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432 Angular. \u0422\u043e\u0447\u043d\u0435\u0435 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0443\u0436\u043d\u043e, \u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u043c\u0443\u043b\u044c\u0442\u0438\u044f\u0437\u044b\u0447\u043d\u044b\u043c\u0438 &#8212; \u0442\u043e\u0447\u043d\u043e \u043d\u0435\u0442.<\/em><\/p>\n<\/blockquote>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u044f\u0437\u044b\u043a\u0438, \u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c \u0432 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442. \u042f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043d\u0435 \u0445\u043e\u0442\u0435\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0443\u0441\u0441\u043a\u0438\u0439 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.\u00a0 \u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u041b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f Angular \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u043e\u0438\u0441\u043a\u0430 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0430\u0439\u043f\u0430 <code>i18n<\/code> \u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>$localize<\/code>.<\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432 Angular \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0435\u0433\u043e-\u043b\u0438\u0448\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0430\u043a\u0435\u0442:<\/p>\n<pre><code class=\"bash\">nx add @angular\/localize<\/code><\/pre>\n<p>\u0418 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e. \u041f\u043e\u043c\u0435\u0447\u0430\u0435\u0442\u0435 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0430\u0439\u043f\u043e\u043c (<code>i18n<\/code>) \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0435 \u0444\u0430\u0439\u043b \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"xml\">&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?> &lt;xliff version=\"1.2\" xmlns=\"urn:oasis:names:tc:xliff:document:1.2\">   &lt;file source-language=\"en-US\" datatype=\"plaintext\" original=\"ng2.template\">     &lt;body>       &lt;trans-unit id=\"5888897186275347598\" datatype=\"html\">         &lt;source>Cart | Online store Banshop&lt;\/source>         &lt;target state=\"translated\">\u041a\u043e\u0440\u0437\u0438\u043d\u0430 | Online store Banshop&lt;\/target>         &lt;context-group purpose=\"location\">           &lt;context context-type=\"sourcefile\">libs\/cart\/page\/src\/lib\/cart-page-routing.module.ts&lt;\/context>           &lt;context context-type=\"linenumber\">17&lt;\/context>         &lt;\/context-group>         &lt;note priority=\"1\" from=\"meaning\">Cart meta&lt;\/note>       &lt;\/trans-unit>     &lt;\/body>   &lt;\/file> &lt;\/xliff><\/code><\/pre>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f SSR. \u041d\u0435 \u0437\u043d\u0430\u044e \u0441 \u0447\u0435\u043c \u044d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e, \u043d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435 \u043d\u0430\u0439\u0442\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f <code>angular + universal + localization<\/code> \u0432 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.\u00a0<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0433\u0443\u0433\u043b\u0438\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043c\u043e\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 2019 \u0433\u043e\u0434\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f \u043f\u0440\u0438\u0432\u043e\u0436\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0432\u044f\u0437\u043a\u0438 angular + universal + localization.<\/p>\n<blockquote>\n<p>\u041d\u0435 \u043c\u043e\u0433\u0443 \u043d\u0435 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0443 \u043c\u0435\u043d\u044f \u0432 \u0431\u043b\u043e\u0433\u0435 \u043d\u0430 \u043c\u0435\u0434\u0438\u0443\u043c\u0435. \u042f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0440\u0430\u0437 \u0432 \u0433\u043e\u0434, \u0438 \u0441\u043f\u0443\u0441\u0442\u044f \u0433\u043e\u0434 \u0443\u0436\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u0448\u044c \u0432\u0441\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0438 \u043d\u044e\u0430\u043d\u0441\u044b. \u0418 \u0441\u0442\u0430\u0442\u044c\u044f \u043c\u0435\u043d\u044f \u0443\u0436\u0435 \u0434\u0432\u0430\u0436\u0434\u044b \u0432\u044b\u0440\u0443\u0447\u0430\u043b\u0430.<\/p>\n<\/blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u0434\u0432\u0443\u0445 \u0441\u043b\u043e\u0432\u0430\u0445, \u0442\u043e \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 <code>univesral<\/code> \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u043f\u0440\u0438 \u0431\u0438\u043b\u0434\u0435 <code>es\/ru\/en-IN<\/code>. \u0418 \u0435\u0441\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0441\u0431\u043e\u0440\u043a\u0430 \u0430\u0434\u0435\u043a\u0432\u0430\u0442\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u0442\u043e <code>dev-server<\/code> \u043d\u0435 \u043c\u043e\u0436\u0435\u0442. \u0418 \u0442\u0443\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0442\u0430\u043d\u0446\u044b \u0441 \u0431\u0443\u0431\u043d\u043e\u043c, \u043a\u0430\u043a \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0434\u0435\u0432 \u0441\u0435\u0440\u0432\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.\u00a0 <\/p>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u044b\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u0433\u0434\u0435 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0443\u0436\u0435 \u0440\u0443\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043b\u043e\u043a\u0430\u043b\u044c, \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0431\u0435\u0437 \u043b\u043e\u043a\u0430\u043b\u0438.<\/p>\n<h2>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 SEO<\/h2>\n<p>\u041a\u0430\u043a \u044f \u0438 \u043f\u0438\u0441\u0430\u043b \u0432\u044b\u0448\u0435, \u0434\u043b\u044f Angular \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0448\u0430\u0433\u043e\u0432, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0441\u0442\u0430\u043b\u0438 \u0430\u0434\u0435\u043a\u0432\u0430\u0442\u043d\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u0441\u043e\u0437\u0434\u0430\u043b \u043d\u0430\u0431\u043e\u0440 favicon\u2019\u043e\u0432, \u0433\u0434\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0438\u043a\u043e\u043d\u043e\u043a \u0441\u043e\u0437\u0434\u0430\u043b\u0438\u0441\u044c \u0444\u0430\u0439\u043b\u044b \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0430.\u00a0 \u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043b robots.txt, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u043b \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0443\u0442\u0438 \u043a API.<\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0441\u0442\u0430\u043b\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u0435\u0442\u0430 \u0442\u0435\u0433\u043e\u0432. <\/p>\n<blockquote>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a Angular \u043d\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0438\u0437\u043e\u0431\u0440\u0435\u0441\u0442\u0438 \u0441\u0432\u043e\u0439 \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434 <s>\u0438 \u0443\u0435\u0445\u0430\u0442\u044c \u0432 \u0433\u043b\u0443\u0445\u043e\u043c\u0430\u043d\u044c<\/s>.<\/p>\n<\/blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0433\u0440\u0443\u0431\u043e \u043e\u0447\u0435\u0440\u0442\u0438\u0442\u044c, \u0442\u043e \u043d\u0443\u0436\u0435\u043d \u0441\u0435\u0440\u0432\u0438\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043d\u0430\u0431\u043e\u0440 \u043c\u0435\u0442\u0430 \u0442\u0435\u0433\u043e\u0432 \u0438 \u0441\u043e\u043f\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0442\u0435\u0433\u043e\u0432: <code>canonical<\/code> , <code>title<\/code>, <code>description<\/code>, <code>keywords<\/code>. \u041c\u0435\u0442\u0430 \u0442\u0435\u0433\u0438 OG: <code>title<\/code>, <code>description<\/code>, <code>type<\/code>, <code>locale<\/code>, <code>siteName<\/code>, <code>image<\/code>, <code>imageType<\/code>, <code>imageWidth<\/code>, <code>imageHeight<\/code>.<\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439:<\/p>\n<pre><code class=\"javascript\">import { DOCUMENT } from '@angular\/common'; import { Inject, Injectable, LOCALE_ID, Optional } from '@angular\/core'; import { Meta, MetaDefinition, Title } from '@angular\/platform-browser'; import { Router } from '@angular\/router';  import { EnvironmentService } from '@banshop\/core\/environments\/service'; import {   META_CONFIG,   META_CONFIG_DEFAULT,   META_CONFIG_OG,   META_CONFIG_OG_DEFAULT,   MetaConfig,   MetaConfigOg, } from '@banshop\/core\/meta\/common';  @Injectable({   providedIn: 'root', }) export class MetaService {   private readonly metaConfig: MetaConfig;   private readonly metaConfigOg: MetaConfigOg;    constructor(     private readonly titleService: Title,     private readonly router: Router,     private readonly meta: Meta,     private readonly environmentService: EnvironmentService,     @Inject(DOCUMENT) private readonly document: Document,     @Inject(LOCALE_ID) private readonly localeId: string,     @Optional() @Inject(META_CONFIG) metaConfig: MetaConfig | null,     @Optional() @Inject(META_CONFIG_OG) metaConfigOg: MetaConfigOg | null   ) {     this.metaConfig = metaConfig ?? META_CONFIG_DEFAULT;     this.metaConfigOg = metaConfigOg ?? META_CONFIG_OG_DEFAULT;   }    update(metaConfig?: Partial&lt;MetaConfig>, metaConfigOg?: Partial&lt;MetaConfigOg>): void {     const config: MetaConfig = { ...this.metaConfig, ...metaConfig };     const configOg: MetaConfigOg = { ...this.metaConfigOg, ...metaConfigOg };     this.setCanonicalUrl(config.url);     this.titleService.setTitle(`${config.title} | ${this.environmentService.environments.brand}`);     this.setMetaProperty('description', config.description);     this.setMetaProperty('keywords', config.keywords);     this.setMetaProperty('og:title', `${configOg.title ?? config.title} | ${this.environmentService.environments.brand}`);     this.setMetaProperty('og:description', configOg.description ?? config.description);     this.setMetaProperty('og:type', configOg.type);     this.setMetaProperty('og:locale', configOg.locale ?? this.localeId);     this.setMetaProperty('og:site_name', configOg.siteName ?? this.environmentService.environments.brand);     this.setMetaProperty('og:image', `${this.environmentService.environments.appHost}${configOg.image}`);     this.setMetaProperty('og:image:type', configOg.imageType);     this.setMetaProperty('og:image:width', configOg.imageWidth);     this.setMetaProperty('og:image:height', configOg.imageHeight);   }    private setCanonicalUrl(url?: string): void {     const link = (this.document.getElementById('canonical') ?? this.document.createElement('link')) as HTMLLinkElement;     link.setAttribute('rel', 'canonical');     link.setAttribute('id', 'canonical');     link.setAttribute('href', this.getCanonicalURL(url));     if (!this.document.getElementById('canonical')) {       this.document.head.appendChild(link);     }   }    private getCanonicalURL(url?: string): string {     return `${this.environmentService.environments.appHost}${url ?? this.router.url}`;   }    private setMetaProperty(name: string, content: string): void {     const id = `meta-${name}`;     const has = !!this.document.getElementById(id);      const meta: MetaDefinition = { id, name, content };      if (has) {       this.meta.updateTag(meta);     } else {       this.meta.addTag(meta);     }   } }<\/code><\/pre>\n<p>\u042f \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u043c\u0435\u0442\u0430 \u0442\u0435\u0433\u043e\u0432, \u043d\u043e \u043b\u0443\u0447\u0448\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u0435\u0442\u0430 \u0442\u0435\u0433\u043e\u0432 \u043f\u0440\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0440\u043e\u0443\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<pre><code class=\"javascript\">import { NgModule } from '@angular\/core'; import { RouterModule, Routes } from '@angular\/router';  import { RouteData } from '@banshop\/core\/navigation\/common';  import { CartPageComponent } from '.\/cart-page.component';  const routes: Routes = [   {     path: '',     component: CartPageComponent,     data: {       sitemap: {         loc: '\/cart',         priority: '1.0',       },       meta: {         title: $localize`:Cart meta|:Cart | Online store Banshop`,         description: $localize`:Cart meta|:It is very easy to buy on banshop. To place an order, click the order button.`,         keywords: $localize`:Cart meta|:cart, banshop`,       },     } as Partial&lt;RouteData>,   }, ];  @NgModule({   imports: [RouterModule.forChild(routes)],   exports: [RouterModule], }) export class CartPageRoutingModule {}<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0442\u0435\u0433\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u0441\u0430\u043c\u0438, \u044f \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u044e \u043d\u043e\u0432\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 ngrx \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0435 \u0441\u043c\u0435\u043d\u044b \u0440\u043e\u0443\u0442\u0430 \u0438 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 \u0441\u0435\u0440\u0432\u0438\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u0430 \u0442\u0435\u0433\u0438 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0441 SEO &#8212; \u044d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b \u0441\u0430\u0439\u0442\u0430.\u00a0<\/p>\n<blockquote>\n<p>\u0421\u043d\u043e\u0432\u0430 Angular \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0430\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0431\u043b\u0435\u0441\u043d\u0443\u0442\u044c \u0442\u0430\u043b\u0430\u043d\u0442\u043e\u043c \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0430\u043c\u043e\u043c\u0443.\u00a0<\/p>\n<\/blockquote>\n<p>\u041e\u0434\u043d\u0430\u0436\u0434\u044b \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430 NodeJS, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438 \u0438\u0449\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0412 \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445 \u0438\u0449\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0444\u0438\u0433 \u0432 data, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0443\u0442\u0438 \u0432 sitemap. \u0415\u0441\u043b\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043d\u0430\u0439\u0434\u0435\u043d\u0430, \u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0440\u0442\u0443 \u0441\u0430\u0439\u0442\u0430.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">import { config } from 'dotenv'; import * as fs from 'fs'; import * as https from 'https'; import * as path from 'path';  import { SitemapConfig } from '@banshop\/core\/navigation\/common';  import { environment } from '.\/src\/environments\/environment.prod';  config({ path: 'apps\/store\/.env' });  const routes = new Set&lt;string>();  \/**  * Find file on folders  *\/ export function fromDir(startPath: string, filter: string): string[] {   if (!fs.existsSync(startPath)) {     console.warn('no dir ', startPath);     return [];   }   const founded = [];   const files = fs.readdirSync(startPath);   for (const file of files) {     const filename = path.join(startPath, file);     const stat = fs.lstatSync(filename);     if (stat.isDirectory()) {       const foundedIn = fromDir(filename, filter);       founded.push(...foundedIn);     } else if (filename.indexOf(filter) >= 0) {       founded.push(filename);     }   }    return founded; }  \/**  * Find sitemap config on file content  *\/ export function parseSitemapConfig(source: string): Partial&lt;SitemapConfig> {   let sitemapConfig = source     .slice(8)     .replace(\/\\n|\\t|\\s\/g, '')     .replace(\/'\/g, '\"')     .trim();   if (sitemapConfig[sitemapConfig.length - 1] === ',') {     sitemapConfig = sitemapConfig.slice(0, sitemapConfig.length - 1);   }   sitemapConfig = sitemapConfig + '}';   sitemapConfig = sitemapConfig.replace(     \/(\\w+:)|(\\w+ :)\/g,     (matchedStr: string) => '\"' + matchedStr.substring(0, matchedStr.length - 1) + '\":'   );    return JSON.parse(sitemapConfig); }  \/**  * Generate sitemap url  *\/ export function getSitemapUrl(sitemap: Partial&lt;SitemapConfig>): string {   if (sitemap.loc) {     routes.add(sitemap.loc.length > 0 ? sitemap.loc : '\/');   }   return `&lt;url>&lt;loc>${environment.appHost}${sitemap.loc}&lt;\/loc>&lt;lastmod>${(sitemap.lastmod     ? new Date(sitemap.lastmod)     : new Date()   ).toISOString()}&lt;\/lastmod>&lt;changefreq>${sitemap.changefreq ?? 'daily'}&lt;\/changefreq>&lt;priority>${sitemap.priority ?? 0.8}&lt;\/priority>&lt;\/url>`; }  \/**  * Load data and generate sitemap config  *\/ export function getServerData(cb: (data: string) => void): void {   let data = '';   const { GOOGLE_KEY, GOOGLE_ID, GOOGLE_NAME } = process.env;    if (GOOGLE_KEY &amp;&amp; GOOGLE_ID &amp;&amp; GOOGLE_NAME) {     const options = {       hostname: 'sheets.googleapis.com',       path: `\/v4\/spreadsheets\/${GOOGLE_ID}\/values\/${GOOGLE_NAME}?key=${GOOGLE_KEY}`,       method: 'GET',     };      const req = https.request(options, (res) => {       let body = '';        res.on('data', (chunk) => {         body += chunk;       });        res.on('end', () => {         const response = JSON.parse(body);          if (response.values) {           for (const product of response.values) {             data += getSitemapUrl({               loc: `\/product\/${product[0]}`,               lastmod: new Date().toISOString(),               changefreq: 'daily',               priority: '0.8',             });           }         }         cb(data);       });     });      req.end();   } }  export function getUrls(): string {   let data = '';   const files = [...fromDir('.\/apps\/store\/src', '-routing.module.ts'), ...fromDir('.\/libs', '-routing.module.ts')];    for (const file of files) {     const fileContent = fs.readFileSync(file, 'utf8');     const sources = fileContent.replace(\/\\s+\/, ' ').match(\/sitemap:\\s{[^}]+\/g);      if (sources) {       for (const source of sources) {         data += getSitemapUrl(parseSitemapConfig(source));       }     }   }    return data; }  export function generate(): void {   const urls = getUrls();    getServerData((data) => {     fs.writeFileSync(       'apps\/store\/src\/sitemap.xml',       \/\/ eslint-disable-next-line max-len       `&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?>&lt;urlset xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:schemaLocation=\"http:\/\/www.sitemaps.org\/schemas\/sitemap\/0.9 http:\/\/www.sitemaps.org\/schemas\/sitemap\/0.9\/sitemap.xsd\" xmlns=\"http:\/\/www.sitemaps.org\/schemas\/sitemap\/0.9\">${urls}${data}&lt;\/urlset>`     );     const routePaths = [...Array.from(routes), '\/not-found', '\/server-error'].sort().join('\\n');     fs.writeFileSync('apps\/store\/routes.txt', routePaths);   }); }  \/\/ generate generate();<\/code><\/pre>\n<p>\u0413\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0439:<\/p>\n<ul>\n<li>\n<p><code>fromDir<\/code> \u2014 \u0447\u0438\u0442\u0430\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0438 \u0438\u0449\u0435\u0442 \u0444\u0430\u0439\u043b\u044b \u043f\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0443;  <\/p>\n<\/li>\n<li>\n<p><code>parseSitemapConfig<\/code> \u2014 \u043f\u0430\u0440\u0441\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 \u0438 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0439\u0442\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e <code>sitemap<\/code>;<\/p>\n<\/li>\n<li>\n<p><code>getSitemapUrl<\/code> \u2014 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u0443\u0442\u0438 \u0432 sitemap \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0432\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0430;<\/p>\n<\/li>\n<li>\n<p><code>getServerData<\/code> \u2014 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f url\u2019\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445;<\/p>\n<\/li>\n<li>\n<p><code>getUrls<\/code> \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0430\u0440\u0441\u0438\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430;<\/p>\n<\/li>\n<li>\n<p><code>generate<\/code> \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u043a\u0430\u0440\u0442\u044b \u0441\u0430\u0439\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Typescript, \u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c tsconfig, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u0438\u043f\u0442 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0438\u0437 \u043a\u043e\u0440\u043d\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<pre><code class=\"json\">{   \"extends\": \"..\/..\/tsconfig.base.json\",   \"files\": [],   \"include\": [],   \"compilerOptions\": {     \"module\": \"CommonJS\",     \"lib\": [\"DOM\", \"ESNext\"]   } }<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043a\u0430\u0440\u0442\u044b \u0441\u0430\u0439\u0442\u0430:<\/p>\n<pre><code class=\"xml\">&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?> &lt;urlset xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"         xsi:schemaLocation=\"http:\/\/www.sitemaps.org\/schemas\/sitemap\/0.9 http:\/\/www.sitemaps.org\/schemas\/sitemap\/0.9\/sitemap.xsd\"         xmlns=\"http:\/\/www.sitemaps.org\/schemas\/sitemap\/0.9\">   &lt;url>     &lt;loc>https:\/\/banshop.fafn.ru\/cart&lt;\/loc>     &lt;lastmod>2022-03-19T09:38:02.917Z&lt;\/lastmod>     &lt;changefreq>daily&lt;\/changefreq>     &lt;priority>1.0&lt;\/priority>   &lt;\/url> &lt;\/urlset><\/code><\/pre>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439, \u0432 \u043a\u0430\u0440\u0442\u0443 \u0441\u0430\u0439\u0442\u0430 \u043f\u043e\u043f\u0430\u043b\u0438 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0443\u0442\u0438. \u042d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 Google Sheets, \u0442\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0444\u0430\u0439\u043b\u0430 \u0438 \u043f\u043e\u0442\u043e\u043c \u0432 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043a\u0430\u0440\u0442\u0443 \u0441\u0430\u0439\u0442\u0430 \u0432\u0441\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.\u00a0<\/p>\n<p>\u0418\u0437 \u0432\u0430\u0436\u043d\u043e\u0433\u043e, \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u043a\u0430\u0440\u0442\u044b \u0441\u0430\u0439\u0442\u0430, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0434\u043b\u044f prerender\u2019\u0430:<\/p>\n<pre><code class=\"javascript\">const routePaths = [...Array.from(routes), '\/not-found', '\/server-error'].sort().join('\\n'); fs.writeFileSync('apps\/store\/routes.txt', routePaths);<\/code><\/pre>\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432 \u0444\u0430\u0437\u0435 prerender\u2019\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. <\/p>\n<h2>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 SSR<\/h2>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/580\/f45\/86a\/580f4586a86cba2de322f563c697c8f6.png\" width=\"1918\" height=\"1012\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/580\/f45\/86a\/580f4586a86cba2de322f563c697c8f6.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u043c\u043e\u0442\u0438\u0432\u0430\u0442\u043e\u0440\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u044b\u043b\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Universal.<\/p>\n<blockquote>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 SSR &#8212; \u043e\u0434\u0438\u043d \u0438\u0437 \u043c\u043e\u0438\u0445 \u043b\u044e\u0431\u0438\u043c\u044b\u0445 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0438. \u041f\u0440\u0430\u0432\u0434\u0430 \u0441\u043e \u043c\u043d\u043e\u0439 \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0445\u043e\u0447\u0435\u0442 \u0440\u0430\u0437\u0433\u043e\u0432\u0430\u0440\u0438\u0432\u0430\u0442\u044c. \u00a0<\/p>\n<\/blockquote>\n<p>\u041a\u0430\u043a \u0431\u044b\u043b\u043e \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u0440\u0430\u043d\u0435\u0435, \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u043b\u044e\u0441 Angular \u044d\u0442\u043e \u0441\u0445\u0435\u043c\u0430\u0442\u0438\u043a\u0438 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438. \u041f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 SSR, \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0430.<\/p>\n<pre><code class=\"bash\">yarn nx add @nguniversal\/express-engine<\/code><\/pre>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434 SSR, \u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u0441\u044f.<\/p>\n<p>\u041a\u0430\u043a\u0438\u0435 \u043d\u044e\u0430\u043d\u0441\u044b \u0441\u0442\u043e\u0438\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SSR:<\/p>\n<ul>\n<li>\n<p>\u0414\u043e\u0441\u0442\u0443\u043f \u043a <code>Window<\/code>. \u0412\u0435\u0437\u0434\u0435, \u0433\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f web \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 (<code>localstrorage<\/code>, <code>navigator<\/code>, \u2026) \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443, \u0447\u0442\u043e \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u044c <code>observable<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0446\u0438\u043a\u043b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>interval<\/code> \u0431\u0435\u0437 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0438\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0442 \u043f\u043e\u0442\u043e\u043a \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0431\u0440\u0430\u043d\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 (\u0447\u0430\u0449\u0435 \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440) \u043f\u043e\u0432\u0438\u0441\u043d\u0435\u0442 \u043d\u0430 \u0441\u0442\u0430\u0434\u0438\u0438 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u0442\u043e\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0441\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u044c observable guard\u2019\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0436\u0438\u0434\u0430\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0442\u043e\u0436\u0435 \u0443\u043c\u0440\u0435\u0442 \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0436\u0434\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u0442\u043e\u043a\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u0442\u0438\u043b\u0435\u0439, \u0432\u0441\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e style.css, \u0430 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043c\u043e\u0433\u0443\u0442 \u0434\u0435\u0440\u0433\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u0442\u044c \u0441\u043c\u044b\u0441\u043b \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u043e\u0441\u0442\u0430\u0432\u0438\u0432 \u0442\u0430\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f Angular CDK \u0438 Angular Material<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u044c state \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u0432 Universal \u0435\u0441\u0442\u044c \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0449\u0435 \u0440\u044f\u0434 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0439, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 NodeJS \u0440\u0430\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/90a\/6f6\/b6c\/90a6f6b6c1549878f31b371c52e6687b.png\" width=\"1087\" height=\"883\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/90a\/6f6\/b6c\/90a6f6b6c1549878f31b371c52e6687b.png\"\/><figcaption><\/figcaption><\/figure>\n<p><strong>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u043f\u043e \u0448\u0430\u0433\u0430\u043c, \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/strong><\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043b \u0444\u0430\u0439\u043b\u044b \u0438 \u0441\u043e\u0437\u0434\u0430\u043b \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u043c\u043e\u0434\u0443\u043b\u044f \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p><code>app.module.ts<\/code> &#8212; \u043e\u0431\u0449\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u0442\u0430\u043a \u0438 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439<\/p>\n<\/li>\n<li>\n<p><code>app.browser.module.ts<\/code> &#8212; \u043c\u043e\u0434\u0443\u043b\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0440\u0435\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438. \u041c\u043e\u0434\u0443\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043d\u043e \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0441\u0440\u0435\u0434\u0435 node<\/p>\n<\/li>\n<li>\n<p><code>app.server.module.ts<\/code> &#8212; \u043c\u043e\u0434\u0443\u043b\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0440\u0435\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438. \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>path<\/code>, <code>fs<\/code> \u0438 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043b\u044e\u0448\u043a\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0442 <code>nodejs<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043b <code>main.ts<\/code>\u00a0 \u0432 <code>main.browser.ts<\/code>, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043a\u0430\u043a\u0430\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>\u0412 \u0441\u0430\u043c\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u044f \u0438\u0437\u043c\u0435\u043d\u0438\u043b \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446:<\/p>\n<pre><code class=\"javascript\">\/\/ All regular routes use the Universal engine   server.get('*', (req, res) => {     const filePath = join(distFolder, req.path, 'index.html');      \/\/ For prerender, use exists file     if (existsSync(filePath)) {       res.sendFile(filePath);     } else {       res.render(indexHtml, {         req,         providers: [           {             provide: APP_BASE_HREF,             useValue: req.baseUrl,           },           {             provide: REQUEST,             useValue: req,           },           {             provide: RESPONSE,             useValue: res,           },         ],       });     }   });<\/code><\/pre>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u043f\u0443\u0442\u0438 \u0438\u0449\u0435\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0433 \u0431\u044b\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d prerender\u2019\u043e\u043c. \u0415\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0439 \u0444\u0430\u0439\u043b \u0435\u0441\u0442\u044c, \u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u043e\u043d \u043e\u0442\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u0438\u043d\u0430\u0447\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0430\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u043a \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u0442\u0440\u043d\u0438\u0446\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c &#8212; \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u0440\u043e\u0433\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f.<\/p>\n<blockquote>\n<p>\u0422\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0414\u0436\u0435\u0444 \u0411\u0435\u0437\u043e\u0441 \u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0430 \u0430\u043c\u0430\u0437\u043e\u043d\u0435.<\/p>\n<\/blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u0434\u0430\u0447\u0438 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b SSR\u00a0 &#8212; 800 \u043c\u0438\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/302\/7dc\/d74\/3027dcd7442395753847fa35c668467c.png\" width=\"821\" height=\"439\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/302\/7dc\/d74\/3027dcd7442395753847fa35c668467c.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0436\u0435 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u043e\u043c, \u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u043e\u0442\u0432\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 20 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/26c\/44a\/43a\/26c44a43af0d0222335e4d96e1a3a32b.png\" width=\"824\" height=\"466\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/26c\/44a\/43a\/26c44a43af0d0222335e4d96e1a3a32b.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043e\u0449\u0443\u0442\u0438\u043c\u0430.<\/p>\n<blockquote>\n<p>\u0410 \u0435\u0441\u043b\u0438 \u0435\u0449\u0435 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0430\u0447\u0443 \u0441\u0442\u0430\u0442\u0438\u043a\u0438 \u043d\u0430 \u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0449\u0438\u043a, \u0433\u0434\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e nginx, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0435\u0449\u0435 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437. \u0418 \u0442\u043e\u0433\u0434\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0441\u0442\u0430\u0442\u0438\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u043e\u0434\u044b.\u00a0<\/p>\n<\/blockquote>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043d\u044e\u0430\u043d\u0441 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0441 SSR &#8212; \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0432\u0430\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0442\u043e\u043c \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 Ngrx state. \u0415\u0441\u043b\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e API, \u0442\u043e \u0432 \u043e\u0442\u0432\u0435\u0442\u0435 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043f\u0440\u0438\u043b\u0435\u0442\u0438\u0442 \u0433\u043e\u0442\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430.<\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 API, \u0442\u043e \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e API \u0435\u0449\u0435 \u0440\u0430\u0437, \u043d\u043e \u0432 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438.<\/p>\n<p>\u0422\u0443\u0442 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435 \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u043b\u0430, \u0430 \u043f\u043e\u0442\u043e\u043c \u0441\u043d\u043e\u0432\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u0441 \u0442\u0435\u043c\u0438 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u043c\u0438.\u00a0<\/p>\n<p>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1. \u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043e \u043f\u043e \u0443\u043c\u0443, \u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u0430\u043a\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0435 \u043e\u0442 \u0442\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0447\u0442\u043e \u0431\u044b\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u0442\u043e \u0442\u043e\u0433\u0434\u0430, \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>TransferState<\/code> &#8212; \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u0432 Angular. \u041f\u0435\u0440\u0435\u0434 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 <code>TransferState<\/code>. \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 <code>TransferState<\/code> \u043d\u0435\u0442\u0443, \u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 <code>TransferState<\/code>, \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u043a\u043b\u044e\u0447\u0443. \u0418 \u043a\u043e\u0433\u0434\u0430, \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441, \u043e\u043d\u0430 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442, \u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u0437\u0430\u043f\u0440\u043e\u0441.<\/p>\n<pre><code class=\"javascript\">  load$ = createEffect(() => {     return this.actions$.pipe(       ofType(ProductActions.load),       fetch({         id: () => 'load-products',         run: () =>           this.productApiService.load().pipe(             map((products) => {               this.localAsyncStorage.setItem(ProductKeys.Products, products);                if (this.platformService.isServer &amp;&amp; products.length) {                 this.transferState.set&lt;Product[]>(PRODUCTS_META, products);               }                return ProductActions.loadSuccess({ products });             })           ),         onError: (action, error) => {           console.error(`Error: ${action.type}\\n`, error);            return ProductActions.loadFailure({ error });         },       })     );   });<\/code><\/pre>\n<p>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 2: \u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0442\u044c, \u0438 \u0434\u0430\u0432\u0430\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b. \u041e\u0434\u043d\u0430\u043a\u043e, \u0441\u0442\u043e\u0438\u0442 \u0443\u0447\u0435\u0441\u0442\u044c \u044d\u0442\u043e \u0432 \u043b\u043e\u0433\u0438\u043a\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>TransferState<\/code> \u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u0434\u0430\u043d\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f, \u0442\u043e Angular \u0441\u043c\u043e\u0436\u0435\u0442 \u0438\u0445 \u0431\u0435\u0437\u0431\u043e\u043b\u0435\u0437\u043d\u0435\u043d\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c. <\/p>\n<blockquote>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0447\u0442\u043e-\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u044b\u0433\u0430\u0442\u044c \u0438 \u0434\u0435\u0440\u0433\u0430\u0442\u044c\u0441\u044f, \u043d\u043e \u044d\u0442\u043e \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e.<\/p>\n<\/blockquote>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u0442\u043e\u0447\u0438\u0442\u044c UI KIT \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e2a\/521\/8b6\/e2a5218b66a2be4667cdd57015610e6f.gif\" width=\"800\" height=\"422\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e2a\/521\/8b6\/e2a5218b66a2be4667cdd57015610e6f.gif\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041e\u0442\u0434\u0430\u0432\u0430\u0435\u043c\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430.<\/p>\n<blockquote>\n<p>Javascript \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u0441\u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439, \u0432\u0441\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0435 \u043f\u043b\u043e\u0445\u043e<\/p>\n<\/blockquote>\n<h2>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0d9\/fd0\/113\/0d9fd0113dba58fe9ebf756025911134.png\" width=\"3840\" height=\"1080\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0d9\/fd0\/113\/0d9fd0113dba58fe9ebf756025911134.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0435\u0441\u0442\u044c \u0441\u043c\u044b\u0441\u043b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0432\u0441\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u0435\u0441\u044c \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u043a\u043e\u0434 \u0443\u0434\u0430\u043b\u0435\u043d, \u0430 \u0432\u0441\u0435 \u0447\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c &#8212; \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e.<\/p>\n<p>Lighthouse &#8212; \u043e\u0434\u0438\u043d \u0438\u0437 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 Google Chrome.<\/p>\n<p>Lighthouse \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442 \u0443\u0434\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0442\u0435\u0441\u0442\u0430, \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043d\u0430 \u0447\u0435\u0440\u043d\u043e\u043c \u0444\u043e\u043d\u0435 &#8212; \u043c\u043e\u0436\u043d\u043e \u0432\u0430\u0441 \u043f\u043e\u0437\u0434\u0440\u0430\u0432\u0438\u0442\u044c!<\/p>\n<p>\u0414\u043b\u044f \u043c\u043e\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435:<\/p>\n<p>\u0414\u043b\u044f desktop: ~99\/100\/100\/100:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/347\/dcf\/cfd\/347dcfcfd5188be1566e5b90ff3e9f76.png\" width=\"851\" height=\"890\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/347\/dcf\/cfd\/347dcfcfd5188be1566e5b90ff3e9f76.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0414\u043b\u044f mobile: ~80\/100\/100\/100<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f49\/54c\/2b8\/f4954c2b8177dd5972a078e08debcb57.png\" width=\"920\" height=\"957\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f49\/54c\/2b8\/f4954c2b8177dd5972a078e08debcb57.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043c\u043e\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f &#8212; \u044d\u0442\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0436\u0430\u0442\u044c \u0447\u0443\u0442\u044c \u043d\u0435 \u0432 2 \u0440\u0430\u0437\u0430. \u041d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0435, \u0442\u043e \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0448\u0435. \u041d\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0435.\u00a0<\/p>\n<p>\u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u0430\u0439\u0442\u044b \u043d\u0430 Angular, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<ul>\n<li>\n<p>Mvideo<\/p>\n<\/li>\n<li>\n<p>\u041f\u0421\u0411 \u0411\u0430\u043d\u043a<\/p>\n<\/li>\n<li>\n<p>\u0411\u0430\u043d\u043a \u0442\u043e\u0447\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>\u0422\u0438\u043d\u044c\u043a\u043e\u0444\u0444 \u0411\u0438\u0437\u043d\u0435\u0441<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u041c\u043e\u0436\u043d\u043e \u0433\u043b\u044f\u043d\u0443\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 Angular &#8212; <a href=\"https:\/\/www.madewithangular.com\/categories\/angular\/\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a>.<\/p>\n<\/blockquote>\n<p>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0443\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0447\u0435\u0442\u043a\u043e \u0438 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0434\u043e\u0447\u0435\u0442\u044b, \u043e\u0431\u044b\u0447\u043d\u043e, \u043d\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0440\u0443\u0434\u0430.<\/p>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u044f \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u044f \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043b \u0442\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f SSR \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u0441\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0438 \u043b\u043e\u0433\u0438\u043a\u0430 \u044d\u0442\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u043b\u043e.<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 SSR \u0434\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0435 \u0434\u0430\u0441\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0440\u044f\u0434 \u043b\u0438 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>ssr-serve<\/code> \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e <code>ssr-serve<\/code> \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u0447\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0435\u043c\u043a\u043e \u0438 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u043b\u0433\u043e.<\/p>\n<p>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 \u0441\u0442\u0430\u0442\u044c\u0438.\u00a0<\/p>\n<blockquote>\n<p>\u041d\u043e \u044f \u0435\u0435 \u0438 \u043d\u0435 \u0434\u0435\u043b\u0430\u043b, \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c gzip \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 nginx\u2019\u0430. \u041d\u043e \u0432 \u0446\u0435\u043b\u043e\u043c, \u043e\u043f\u044b\u0442\u043d\u044b\u0439 devOps \u043c\u043e\u0436\u0435\u0442 \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0442\u0430\u043a \u043d\u0430\u043a\u043e\u043b\u0434\u043e\u0432\u0430\u0442\u044c \u0438 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.\u00a0<\/p>\n<\/blockquote>\n<h2>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 Angular \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u042d\u0442\u043e \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0435\u0441\u0442\u044b \u043f\u0438\u0448\u0443\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0446\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043d\u043e \u0441\u0430\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430.\u00a0<\/p>\n<blockquote>\n<p>\u0414\u0430, \u044d\u0442\u043e \u043d\u0435 TDD. \u041f\u043e\u043a\u0430 \u043d\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b \u043d\u0438 \u043e\u0434\u043d\u043e\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u0433\u0434\u0435 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0431\u044b \u0445\u043e\u0440\u043e\u0448\u043e.<\/p>\n<\/blockquote>\n<p>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 Angular \u0435\u0441\u0442\u044c \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0432 \u0432\u0438\u0434\u0435 <code>karma<\/code>, \u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Nx \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u0435\u0449\u0435 \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u044b\u043c, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>jest<\/code>.<\/p>\n<blockquote>\n<p>\u0427\u0430\u0441\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u0440\u0435\u043d\u0435\u0431\u0440\u0435\u0433\u0430\u044e\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432. \u0418 \u043a\u0430\u0436\u0434\u044b\u0439 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0430\u0436\u043d\u043e, \u043d\u043e \u0441\u0430\u043c \u043e\u043d \u0442\u0435\u0441\u0442\u044b \u043d\u0435 \u043f\u0438\u0448\u0435\u0442. <\/p>\n<\/blockquote>\n<p>\u0412 Angular \u043c\u043e\u0436\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u043b\u0435\u0436\u0430\u0442 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e:<\/p>\n<ul>\n<li>\n<p>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0432 Angular. \u041a\u0430\u0436\u0434\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u043e\u043a\u0440\u044b\u0442 \u0445\u043e\u0442\u044f \u0431\u044b \u043e\u0434\u043d\u0438\u043c \u0442\u0435\u0441\u0442\u043e\u043c.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0432\u044f\u0437\u043a\u0438 HTML + JavaScript. \u042d\u0442\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 Angular \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0433\u0434\u0435 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0434\u043e\u043b\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u0439\u043f\u043e\u0432 \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432. \u0412\u0441\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0434\u0435\u043a\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u043e\u043a\u0440\u044b\u0442\u044b \u0442\u0435\u0441\u0442\u0430\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 Ngrx State|Redux. \u0415\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Redux, \u0442\u043e \u0432\u0441\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b state \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 redux \u044d\u0442\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440, \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438 \u0444\u0430\u0441\u0430\u0434.<\/p>\n<\/li>\n<\/ul>\n<p>E2E \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f &#8212; \u0432\u0435\u043b\u0438\u043a\u0430\u044f \u0432\u0435\u0449\u044c. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0448\u0438\u0431\u043a\u043e\u0432 \u0432 \u0440\u0430\u0437\u044b, \u043d\u043e \u043f\u0440\u0430\u0432\u0434\u0430 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0446\u0435\u043d\u043e\u0439.\u00a0<\/p>\n<p>\u0412 Angular \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f protractor, Nx \u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 cypress.<\/p>\n<blockquote>\n<p>\u042f \u043d\u0435 \u043f\u0438\u0441\u0430\u043b e2e \u0442\u0435\u0441\u0442\u044b, \u0442\u0430\u043a \u043a\u0430\u043a \u044f \u043c\u0443\u0445\u043e\u0436\u0443\u043a.\u00a0\u0418 \u0442\u0430\u043a \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0431\u0443\u043a\u0432.<\/p>\n<\/blockquote>\n<p>\u0412 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0442\u0435\u0441\u0442\u044b \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430. \u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0442\u0435\u0441\u0442\u043e\u0432 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u043a\u0435\u0439\u0441\u044b, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0442\u0435\u0441\u0442\u043e\u0432 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043b\u0438\u0448\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0431\u044b\u043b\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e 72* \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438: <\/p>\n<pre><code class=\"bash\">nx run-many --target=test --all --parallel --maxParallel=8<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9b8\/ade\/569\/9b8ade569ae0bad10583ed880dd8f76c.png\" width=\"1132\" height=\"943\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9b8\/ade\/569\/9b8ade569ae0bad10583ed880dd8f76c.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412\u0441\u0435 \u0442\u0435\u0441\u0442\u043a\u0435\u0439\u0441\u044b \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e.<\/p>\n<h2>\u0420\u0435\u0437\u044e\u043c\u0435<\/h2>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u0436\u0438 \u043a\u0440\u043e\u0441\u0441\u043e\u0432\u043e\u043a, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0442\u043e\u0432\u0430\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443 \u0438 \u043e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u0437\u0430\u043a\u0430\u0437.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1a9\/0fc\/0f9\/1a90fc0f93eecda230f384897dd2cfcd.gif\" width=\"222\" height=\"480\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1a9\/0fc\/0f9\/1a90fc0f93eecda230f384897dd2cfcd.gif\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u0430 \u0432\u0438\u0437\u0438\u0442\u043a\u0438, \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Angular:<\/p>\n<ul>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Server Side Rendering<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Angular, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f \u043f\u0440\u0438 SSR<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u0443\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u043c\u0435\u043d \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u043c\u0435\u0436\u0434\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c SEO, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e sitemap \u0438 \u043c\u0435\u0442\u0430 \u0442\u0435\u0433\u043e\u0432<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043f\u043e\u043b\u043d\u043e\u043c \u0446\u0438\u043a\u043b\u0435 &#8212; \u0441 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c, \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u043e\u043f\u0440\u0430\u0432\u0434\u0430\u043d\u043d\u043e \u0434\u043e\u0440\u043e\u0433\u043e\u0439.<\/p>\n<p>\u041f\u043b\u044e\u0441\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Angular\u00a0<\/p>\n<ul>\n<li>\n<p>\u0412\u0441\u044f \u043c\u043e\u0449\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0434\u043b\u044f \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u043d\u0443\u0436\u0434.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u0438\u043d\u0443\u0441\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<\/li>\n<li>\n<p>SEO \u0441\u0430\u043c\u043e\u0435 \u0443\u0437\u043a\u043e\u0435 \u043c\u0435\u0441\u0442\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 SSR, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u043b\u0435\u0447\u0435\u0442 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0434 universal.<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0441\u0442\u043e\u0438\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0430\u0439\u0442 \u0432\u0438\u0437\u0438\u0442\u043a\u0443 \u043d\u0430 Angular?<\/p>\n<ul>\n<li>\n<p>\u041d\u0438\u043a\u043e\u0433\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u041c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u043e \u0437\u0430 \u044d\u0442\u043e \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0437\u0430\u043f\u043b\u0430\u0442\u0438\u0442 \u0441\u0442\u043e\u043b\u044c\u043a\u043e, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u0441\u0442\u043e\u0438\u0442.<\/p>\n<\/blockquote>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0430.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/658787\/\"> https:\/\/habr.com\/ru\/post\/658787\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043d\u0430\u0437\u0430\u0434 \u044f \u0437\u0430\u0433\u043e\u0440\u0435\u043b\u0441\u044f \u0436\u0435\u043b\u0430\u043d\u0438\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 pet-\u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0431\u044b \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u0430\u0439\u0442\u0430 \u0432\u0438\u0437\u0438\u0442\u043a\u0438 \u043d\u0430 Angular. \u0418 \u0442\u0430\u043a \u043a\u0430\u043a Angular \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0435\u0442 SSR* \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u0434\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 SEO \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0435\u043c\u0430\u043b\u044b\u0445 \u0442\u0435\u043b\u043e\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0439**, \u0442\u043e \u0441\u0430\u043c\u0430 \u0438\u0434\u0435\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043e\u043c\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439.<\/p>\n<blockquote>\n<p>\u041a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0438\u043a &#8212; \u0412\u044b\u0431\u043e\u0440 \u2014 \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0438\u0447\u044c, \u043f\u0440\u044f\u043c \u043b\u044e\u0442\u0443\u044e \u0433\u0440\u044f\u0437\u044c-\u0433\u0440\u044f\u0437\u044c, \u043b\u0438\u0431\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0433\u0440\u044f\u0437\u044c, \u043d\u043e \u043d\u0435 \u043f\u0440\u044f\u043c \u0441\u043e\u0432\u0441\u0435\u043c \u0433\u0440\u044f\u0437\u044c.\u00a0<\/p>\n<\/blockquote>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0448\u043b\u043e \u0438 \u0441\u0442\u043e\u0438\u0442 \u043b\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0430\u0439\u0442\u044b \u0432\u0438\u0437\u0438\u0442\u043a\u0438 \u043d\u0430 Angular.<\/p>\n<p><sup>* Universal \u043d\u0435 \u0431\u0435\u0440\u0435\u043c \u0432 \u0440\u0430\u0441\u0447\u0435\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0440\u044f\u0434 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c, \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0431\u0435\u0441\u0448\u043e\u0432\u043d\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430.<br \/>** \u0412\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 sitemap, \u0438\u043b\u0438 \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0435\u0435 \u0440\u0443\u043a\u0430\u043c\u0438, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c robots, manifest, meta \u0442\u0435\u0433\u0438 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435.<\/sup><\/p>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043e \u043f\u0440\u043e\u0434\u0430\u0436\u0435 \u043a\u0440\u043e\u0441\u0441\u043e\u0432\u043e\u043a.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0418\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0442\u0430\u043a\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043a\u0430\u043a <s>Adobe Phpotoshop<\/s> Gimp \u0438<s> Adobe Premiere<\/s> Davinci Resolve, \u0432\u044b\u0448\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0444\u0435\u0439\u043a\u043e\u043c \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0421 \u0434\u0435\u043c\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0437\u0434\u0435\u0441\u044c &#8212; <a href=\"https:\/\/banshop.fafn.ru\/\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/banshop.fafn.ru<\/u><\/a><u>.<\/u><\/p>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043d\u0430 github: <a href=\"https:\/\/github.com\/Fafnur\/banshop\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/Fafnur\/banshop<\/a><\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f ubuntu, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d nginx \u0438 nodejs. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f pm2.<\/p>\n<p>\u0410\u0440\u043f\u0438\u043e\u0440\u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440 \u0440\u0443\u043a\u0430\u043c\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439. \u0421\u0435\u0439\u0447\u0430\u0441 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043a\u0430\u043a kubernates, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u0437\u044f\u0442\u044c \u043d\u0430 \u0441\u0435\u0431\u044f \u0432\u0441\u044e \u0440\u0443\u0442\u0438\u043d\u0443 \u0438 \u0434\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043a\u043b\u0430\u0441\u0442\u0435\u0440.\u00a0<\/p>\n<blockquote>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u044f \u043f\u043e\u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u043a\u043b\u0430\u0441\u0442\u0435\u0440 \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0430\u0439\u0442\u0430 \u0432\u0438\u0437\u0438\u0442\u043a\u0438, \u0442\u043e \u0442\u043e\u0447\u043d\u043e \u043c\u043e\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u0438\u0447\u043a\u0430 \u0432\u0435\u0437\u0451\u0442 \u043c\u0435\u043d\u044f \u0442\u0443\u0434\u0430, \u043a\u0443\u0434\u0430 \u044f \u043d\u0435 \u0445\u043e\u0447\u0443.<\/p>\n<\/blockquote>\n<h2>\u0424\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e<\/h2>\n<p>\u0421\u0430\u0439\u0442 \u0432\u0438\u0437\u0438\u0442\u043a\u0430 &#8212; \u044d\u0442\u043e \u0440\u0430\u0441\u043f\u043b\u044b\u0432\u0447\u0430\u0442\u043e\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u0435. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u0434 \u0441\u0430\u0439\u0442\u043e\u043c \u0432\u0438\u0437\u0438\u0442\u043a\u043e\u0439 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 web \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u201c\u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438\u201d, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0432\u0430\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043a\u0443\u043f\u0438\u0442\u044c, \u043e\u0444\u043e\u0440\u043c\u0438\u0432 \u0437\u0430\u043a\u0430\u0437 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435.\u00a0<\/p>\n<p>\u0414\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 <code>e-commerce<\/code> \u044f \u043d\u0435 \u0440\u0435\u0448\u0438\u043b\u0441\u044f \u0437\u0430 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e, \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043b \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f.\u00a0<\/p>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438:<\/p>\n<ol>\n<li>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u0442\u043e\u0432\u0430\u0440\u043e\u0432\u00a0 &#8212; \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0442\u043e\u0432\u0430\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0442\u043e\u0432\u0430\u0440\u043e\u0432. \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0442\u043e\u0432\u0430\u0440\u0430 \u0432\u0435\u0434\u0435\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0442\u043e\u0432\u0430\u0440\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u043a\u043e\u0440\u0437\u0438\u043d\u044b &#8212; \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443 \u0442\u043e\u0432\u0430\u0440\u044b \u0441 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c\u0438 \u043e\u043f\u0446\u0438\u044f\u043c\u0438 (\u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u0446\u0432\u0435\u0442\u0430, \u2026). \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043a\u043e\u0440\u0437\u0438\u043d\u044b \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\/\u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0438\u0437 \u043a\u043e\u0440\u0437\u0438\u043d\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043a\u0430\u0437\u0430 &#8212; \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0441\u0435\u0431\u0435 \u0438 \u043e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u0437\u0430\u043a\u0430\u0437, \u0433\u0434\u0435 \u0432 \u0437\u0430\u043a\u0430\u0437\u0435 \u0431\u0443\u0434\u0443\u0442 \u0442\u043e\u0432\u0430\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443 \u0440\u0430\u043d\u0435\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u0441\u043b\u0443\u0436\u0431\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 &#8212; \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0433\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0441\u0432\u044f\u0437\u0430\u0442\u044c\u0441\u044f \u0441 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c \u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0438\u0435 \u0435\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u043f\u0440\u0430\u0432\u043e\u0432\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 &#8212; \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u0435(\u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438), \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043f\u0440\u043e\u0434\u0430\u0436\u0438 \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0430.<\/p>\n<\/li>\n<\/ol>\n<p>\u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u0434\u043b\u044f \u0442\u0440\u0435\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c:<\/p>\n<ul>\n<li>\n<p>\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043b\u0435\u0444\u043e\u043d (<code>handset<\/code>);<\/p>\n<\/li>\n<li>\n<p>\u043f\u043b\u0430\u043d\u0448\u0435\u0442 (<code>tablet<\/code>);<\/p>\n<\/li>\n<li>\n<p>\u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043e\u0432 (<code>web<\/code>).<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043d\u043b\u0430\u0439\u043d \u043f\u0440\u043e\u0434\u0430\u0436, \u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c SEO \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043c\u043e\u0447\u044c \u0432 \u043f\u0440\u043e\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u0441\u0430\u0439\u0442\u0430 \u0432 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445. \u0421\u043f\u0438\u0441\u043e\u043a \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a SEO:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u0430\u0440\u0442\u0443 \u0441\u0430\u0439\u0442\u0430 (<code>sitemap<\/code>), \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432\u0441\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u044b\u043c\u0438 \u0442\u043e\u0432\u0430\u0440\u0430\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d <code>robots.txt<\/code> \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u0430\u0432\u0438\u043b \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u043c\u0438 \u0440\u043e\u0431\u043e\u0442\u0430\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0444\u0430\u0439\u043b <code>manifest<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c <code>PWA<\/code> \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043c\u0435\u0442\u0430 \u0442\u0435\u0433\u0438 (<code>keywords<\/code>, <code>title<\/code>, <code>description<\/code>) \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043c\u0435\u0442\u0430 \u0442\u0435\u0433\u0438 \u0434\u043b\u044f <a href=\"https:\/\/ogp.me\/\" rel=\"noopener noreferrer nofollow\">og<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0438\u0441\u043a\u043e\u0432\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u0443\u044e, \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 (<code>SSR<\/code>), \u0430 \u043d\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 <code>HTML<\/code> \u0444\u0430\u0439\u043b \u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c <code>javascript<\/code>.<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0435\u0449\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0438\u0434\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u043f\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c, \u043d\u043e \u0432\u0438\u0434\u0438\u043c\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u043b\u0430\u0442\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438.<\/p>\n<\/blockquote>\n<h2>\u0412\u044b\u0431\u043e\u0440 \u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0438, \u043f\u0440\u043e\u0434\u0443\u043a\u0446\u0438\u0438 \u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0430<\/h2>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u0445\u043e\u0442\u0435\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0430\u0439\u0442 \u0432\u0438\u0437\u0438\u0442\u043a\u0443 \u043d\u0430 Angular \u0441 \u044f\u0445\u0442\u0430\u043c\u0438 \u0438 \u0448\u043b\u044e\u043f\u043a\u0430\u043c\u0438, \u043d\u043e \u043f\u043e\u0442\u043e\u043c \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u044f \u0434\u0430\u043b\u0435\u043a \u043e\u0442 \u044f\u0445\u0442. \u0418 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0438 \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u043f\u0440\u043e\u0434\u0430\u0436\u0443 \u043a\u0440\u043e\u0441\u0441\u043e\u0432\u043e\u043a.\u00a0<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0434\u0435\u043b\u043e \u0441\u0442\u043e\u044f\u043b\u043e \u0437\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0422\u0430\u043a \u043a\u0430\u043a \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0438\u0437 \u043c\u0435\u043d\u044f \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439, \u044f \u0438\u0437\u0443\u0447\u0438\u043b \u0441\u0430\u0439\u0442\u044b \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0441\u043f\u043e\u0440\u0442\u0438\u0432\u043d\u044b\u0445 \u0431\u0440\u0435\u043d\u0434\u043e\u0432 \u0438 \u043f\u0440\u0438\u043a\u0443\u043f\u0438\u043b \u0441\u0435\u0431\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440 \u043a\u0440\u043e\u0441\u0441\u043e\u0432\u043e\u043a. \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u0432 \u043e \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435, \u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u043d\u0430 \u0431\u0440\u0435\u043d\u0434\u0435 Reebok.<\/p>\n<blockquote>\n<p>\u041d\u0435 \u0432\u0441\u0435 \u0436\u0435 \u0414\u0443\u0434\u044e \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043f\u0438\u0430\u0440\u0438\u0442\u044c Adidas.<\/p>\n<\/blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438 \u0441\u0430\u0439\u0442\u044b \u043d\u0430 \u0437\u0430\u043a\u0430\u0437, \u0442\u043e \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u0435\u0442\u0435\u043d\u0446\u0438\u0438 \u043b\u044e\u0434\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0438\u0445 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c &#8212; \u043e\u0447\u0435\u043d\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0430\u0439\u0442\u043e\u043c, \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0432 \u0433\u0443\u0433\u043b \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0438 \u0434\u0430\u0442\u044c \u043a \u043d\u0435\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0432\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u0443 \u0440\u0435\u0441\u0443\u0440\u0441\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0441\u0430\u043c \u043c\u043e\u0433 \u043c\u0435\u043d\u044f\u0442\u044c \u0442\u043e\u0432\u0430\u0440\u044b, \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u044f \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434.<\/p>\n<p>\u0412\u0437\u044f\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0441 \u0441\u0430\u0439\u0442\u0430 Reebok \u0438 \u0431\u0435\u0441\u0447\u0435\u0441\u0442\u043d\u043e \u0443\u043a\u0440\u0430\u0434\u044f \u043e\u0434\u0438\u043d \u0438\u0437 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u044f \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0442\u0430\u0431\u043b\u0438\u0447\u043a\u0443 \u0432 <u>Google Sheet<\/u>.\u00a0<\/p>\n<p>\u0425\u043e\u0442\u044f \u0431\u0440\u0435\u043d\u0434\u044b \u0442\u0440\u0430\u0442\u044f\u0442 \u043c\u043d\u043e\u0433\u043e \u0434\u0435\u043d\u0435\u0433 \u043d\u0430 \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433, \u043d\u043e \u043a\u0430\u043a \u043d\u0438 \u043a\u0440\u0443\u0442\u0438 \u0434\u0438\u0437\u0430\u0439\u043d \u0443 \u043d\u0438\u0445 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043f\u043e\u043b\u043d\u044b\u0439 \u043e\u0442\u0441\u0442\u043e\u0439. \u041c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0447\u0435\u0433\u043e-\u0442\u043e \u043b\u0435\u0433\u043a\u043e\u0433\u043e \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0443, \u043d\u043e \u0438 \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435 \u0432\u043e\u0440\u043e\u0442\u0438\u043b\u043e \u0433\u043b\u0430\u0437.<\/p>\n<p>\u0418 \u0442\u043e\u0433\u0434\u0430 \u044f \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u043a \u043b\u0443\u0447\u0448\u0435\u043c\u0443 \u0434\u0440\u0443\u0433\u0443 \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 Google. Material Design \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043d\u0438\u0447\u0435\u0433\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0432\u0437\u044f\u043b Angular Material \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 UI KIT\u2019\u0430 \u0438 \u0440\u0435\u0448\u0438\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0430\u0440\u0443 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.\u00a0<\/p>\n<h2>\u0421\u0442\u0430\u0440\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b\u0431\u043e\u0440 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u043f\u043e\u0437\u0430\u0434\u0438, \u0430 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u043b\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b, \u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u0441\u0442\u0430\u043b\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u043c\u0443 &#8212; \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>\u042f \u0441\u043e\u0437\u0434\u0430\u043b \u043d\u043e\u0432\u044b\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431\u0435 &#8212; <u>banshop<\/u>. \u041f\u0435\u0440\u0432\u044b\u0439 \u043a\u043e\u043c\u043c\u0438\u0442 \u0431\u044b\u043b \u0441\u0434\u0435\u043b\u0430\u043d 24 \u044f\u043d\u0432\u0430\u0440\u044f 2022 \u0433\u043e\u0434\u0430. \u041f\u0440\u043e\u0448\u043b\u043e \u0431\u043e\u043b\u0435\u0435 \u0434\u0432\u0443\u0445 \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u0438 \u044f \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b \u043f\u0440\u043e\u0435\u043a\u0442, \u0433\u0434\u0435 \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 176 \u043a\u043e\u043c\u043c\u0438\u0442\u043e\u0432.\u00a0<\/p>\n<blockquote>\n<p>\u0414\u0443\u043c\u0430\u044e, \u0435\u0441\u043b\u0438 \u044f \u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0432 \u0430\u0443\u0442\u0441\u043e\u0440\u0441\u0438\u043d\u0433\u043e\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u0442\u043e \u043c\u0435\u043d\u044f \u043d\u0435\u043f\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0431\u044b \u0443\u0432\u043e\u043b\u0438\u043b\u0438 \u0437\u0430 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0443\u044e \u043e\u0446\u0435\u043d\u043a\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u044f \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0437\u0430 \u043d\u0435\u0434\u0435\u043b\u044e. \u041d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0443\u0448\u043b\u043e \u043e\u043a\u043e\u043b\u043e \u0434\u0432\u0443\u0445 \u043c\u0435\u0441\u044f\u0446\u0435\u0432, \u0433\u0434\u0435 \u0432\u0435\u0447\u0435\u0440\u0430\u043c\u0438 \u044f \u0448\u0435\u043b \u0441 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<\/blockquote>\n<p>\u0421\u0442\u0435\u043a \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438:<\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/nx.dev\/\" rel=\"noopener noreferrer nofollow\">Nx<\/a> &#8212; \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0435\u043c.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/angular.io\/\" rel=\"noopener noreferrer nofollow\">Angular<\/a> &#8212; \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/ngrx.io\/\" rel=\"noopener noreferrer nofollow\">Ngrx<\/a> &#8212; \u043e\u0434\u043d\u0430 \u0438\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 <code>Redux<\/code> \u0432 Angular.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/angular.io\/guide\/universal\" rel=\"noopener noreferrer nofollow\">Universal<\/a> &#8212; \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f Server Side Rendering.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/angular.io\/guide\/i18n-overview\" rel=\"noopener noreferrer nofollow\">Angular Localization<\/a> &#8212; \u043c\u043e\u0434\u0443\u043b\u044c \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/jestjs.io\/\" rel=\"noopener noreferrer nofollow\">Jest<\/a> &#8212; \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f unit \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.cypress.io\/\" rel=\"noopener noreferrer nofollow\">Cypress<\/a> &#8212; \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f <code>e2e<\/code> \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u043d\u0435\u0448\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043f\u043e\u043c\u0438\u043c\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0432\u044b\u0448\u0435, \u043d\u043e \u0431\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c:<\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/hammerjs.github.io\/\" rel=\"noopener noreferrer nofollow\">Hammerjs<\/a> &#8212; \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0442\u0430\u043f\u043e\u0432, \u0441\u0432\u0430\u0439\u043f\u043e\u0432 \u0438 \u0442.\u0434.;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/just-jeb\/angular-builders\" rel=\"noopener noreferrer nofollow\">@angular-builders\/custom-webpack<\/a> &#8212; \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0438\u043b\u0434\u0435\u0440\u043e\u0432 Angular\u2019\u0430;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/ike18t\/ng-mocks\" rel=\"noopener noreferrer nofollow\">ng-mocks<\/a> &#8212; \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u0432 Angular;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/NagRock\/ts-mockito\" rel=\"noopener noreferrer nofollow\">ts-mockito<\/a> &#8212; \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0447\u0435\u0433\u043e \u0443\u0433\u043e\u0434\u043d\u043e \u0432 Typescript;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/uNmAnNeR\/imaskjs\" rel=\"noopener noreferrer nofollow\">angular-imask<\/a>\u00a0 &#8212; \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441 \u043c\u0430\u0441\u043a\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 &#8212; \u044d\u0442\u043e \u0432\u043a\u0443\u0441\u043e\u0432\u0449\u0438\u043d\u0430 (<code>husky<\/code>, <code>eslint<\/code>,&#8230;).<\/p>\n<blockquote>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u043e\u0438 \u0441\u0442\u0430\u0442\u044c\u0438, \u0442\u043e \u0432\u0435\u0441\u044c \u0432\u044b\u0448\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0441\u0442\u0435\u043a \u0435\u0441\u0442\u044c \u043f\u043e\u0447\u0442\u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u043e\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u041e\u0434\u043d\u0438\u043c \u0441\u043b\u043e\u0432\u043e\u043c \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0435\u043a \u0438 \u044f \u0435\u0433\u043e \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0441\u044c.<\/p>\n<\/blockquote>\n<h2>\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>\u0412\u0435\u0441\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0448\u0430\u0433\u043e\u0432:<\/p>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 <code>workspace<\/code> \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0432\u0441\u0435\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 <code>core<\/code> \u043c\u043e\u0434\u0443\u043b\u0435\u0439.\u00a0 \u0422\u0430\u043a \u043a\u0430\u043a \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0442\u043e \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0435\u0441\u0442\u044c \u0441\u043c\u044b\u0441\u043b \u0437\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u044c \u044f\u0434\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 <code>UI KIT<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u0441\u0435 \u043e\u0431\u0449\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u042f\u0440\u043a\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043c\u043e\u0434\u0443\u043b\u0438 \u0441\u0435\u0442\u043e\u043a, \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432, \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u044b, \u0441\u0441\u044b\u043b\u043a\u0438, \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u043c\u043e\u0434\u0443\u043b\u044c \u0442\u043e\u0432\u0430\u0440\u043e\u0432, \u043c\u043e\u0434\u0443\u043b\u044c \u043a\u043e\u0440\u0437\u0438\u043d\u044b, \u043c\u043e\u0434\u0443\u043b\u044c \u0447\u0430\u0442\u0430, \u043c\u043e\u0434\u0443\u043b\u044c \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043a\u0430\u0437\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>SEO<\/code>, \u0433\u0434\u0435 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>SSR<\/code> \u0438 \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0430. \u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u0448\u0430\u0433\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430\u0442\u043e\u0447\u043a\u0430 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0434 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 <code>SSR<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0442\u0435\u0441\u0442\u044b \u043f\u0438\u0448\u0443\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043d\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 c <code>TODO: Add test<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u0448\u0430\u0433\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c. \u0414\u0430 \u0438 e2e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c \u0448\u0430\u0433\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u0445 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u043d\u043d\u0438\u0445 \u0448\u0430\u0433\u0430\u0445 \u0431\u0435\u0441\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0431 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432. \u041a\u0430\u043a \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>Lighthouse<\/code> \u043e\u0442 <code>Google chrome<\/code>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u043a\u0440\u0430\u0442\u0446\u0435 \u043e\u043f\u0438\u0448\u0443 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u0448\u0430\u0433\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0441\u0430\u0439\u0442 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b.<\/p>\n<blockquote>\n<p>\u041e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d \u0432 \u043c\u043e\u0435\u043c \u0446\u0438\u043a\u043b\u0435 \u0441\u0442\u0430\u0442\u0435\u0439 \u043d\u0430 <a href=\"https:\/\/medium.com\/fafnur\/%D1%81%D0%B0%D0%B9%D1%82-%D0%B2%D0%B8%D0%B7%D0%B8%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-angular-%D0%B2%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-9bc18c25fe37\" rel=\"noopener noreferrer nofollow\">\u043c\u0435\u0434\u0438\u0443\u043c\u0435<\/a>.<\/p>\n<\/blockquote>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 workspace<\/h2>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e workspace \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043e\u0434\u043d\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0438 NX CLI \u0441\u043e\u0437\u0434\u0430\u0434\u0443\u0442 \u043d\u043e\u0432\u044b\u0439 workspace \u0438 \u0435\u0441\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043e\u043f\u0446\u0438\u044e \u0441 Angular, \u0442\u043e \u0435\u0449\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043d\u043e\u0432\u043e\u0435 Angular \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">yarn create nx-workspace --package-manager=yarn<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0442\u0435\u043a\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e nx, \u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f SSR:<\/p>\n<pre><code class=\"bash\">yarn nx add @nguniversal\/express-engine<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 Ngrx \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c Root State, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<pre><code class=\"bash\">nx g @nrwl\/angular:ngrx rs --module=path\/to\/app.module.ts<\/code><\/pre>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"bash\">nx add @angular\/localize<\/code><\/pre>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 Angular Material:<\/p>\n<pre><code class=\"bash\">nx add @angular\/material<\/code><\/pre>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a:<\/p>\n<pre><code class=\"bash\">yarn add hammerjs angular-imask<\/code><\/pre>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a:<\/p>\n<pre><code class=\"bash\">yarn add -D ng-mocks ts-mockito<\/code><\/pre>\n<p>\u0418 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0432\u043a\u0443\u0441\u043e\u0432\u0449\u0438\u043d\u044b:<\/p>\n<pre><code class=\"bash\">yarn add -D eslint-plugin-import eslint-plugin-jsdoc eslint-plugin-ngrx eslint-plugin-prettier eslint-plugin-simple-import-sort<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0432 \u0432\u0441\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0432 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u0430\u0433\u0438\u0438 \u0434\u043b\u044f <code>eslint<\/code>\u2019\u0430, \u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0442\u044c\u0441\u044f \u043d\u043e\u0432\u043e\u0435 \u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e (<code>workspace<\/code>) \u0441 Angular \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c.<\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 core \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/h2>\n<p>Core \u043c\u043e\u0434\u0443\u043b\u0438 &#8212; \u043d\u0430\u0431\u043e\u0440 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0435\u0448\u0438\u0442\u044c \u0443\u0437\u043a\u0438\u0435 \u043c\u0435\u0441\u0442\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.\u00a0<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0443\u0437\u043a\u0438\u0445 \u043c\u0435\u0441\u0442:<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a Window;<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0445 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449 <code>localStroge<\/code>, <code>sessionStrorage<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0438 \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 (<code>PageObject<\/code>) \u0438 DI \u043c\u043e\u043a-\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u0423\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-331431","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/331431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=331431"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/331431\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=331431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=331431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=331431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}