{"id":381281,"date":"2024-06-29T03:34:52","date_gmt":"2024-06-29T03:34:52","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=381281"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=381281","title":{"rendered":"<span>Angular Libs \u043a\u0430\u043a \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439: \u043d\u0430\u0447\u0430\u043b\u043e, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430, \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 assets<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0418\u043b\u044c\u044f, \u0438 \u044f \u0442\u0438\u043c\u043b\u0438\u0434 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0432 \u041a\u0430\u0440\u0443\u043d\u0435. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0442\u0435\u0439 \u044f \u0445\u043e\u0447\u0443 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0441\u0432\u0435\u0442\u0438\u0442\u044c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 <a href=\"https:\/\/angular.io\/guide\/libraries\"><u>Angular Libs<\/u><\/a>. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0442\u043e, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 tree-shaking \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u0438 \u0447\u0430\u0441\u0442\u044f\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.\u00a0<\/p>\n<p>\u0418\u0434\u0435\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u0438\u0437-\u0437\u0430 \u043c\u043e\u0438\u0445 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0431\u043e\u043b\u0435\u0439, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0430\u0441\u044c \u0441 Angular-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438 \u0438 \u0441 \u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438. \u041a\u0443\u0447\u0430 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u2014 \u043e\u0442 \u201c\u043a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c?\u201d \u0434\u043e \u201c\u043a\u0430\u043a \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043a\u0430\u0442\u0438\u0442\u044c \u0432 \u043f\u0440\u043e\u0434?\u201d, \u0438 \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435, \u0447\u0442\u043e \u043d\u0430\u0439\u0442\u0438 \u043e\u0431 \u044d\u0442\u043e\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0443\u0434\u0430\u0432\u0430\u043b\u043e\u0441\u044c, \u043d\u043e \u0441 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u0438 \u043e\u0447\u0435\u043d\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u0443\u044e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u043e\u0432\u0438\u0447\u043a\u0430\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u0438 <s>\u043d\u0430\u0447\u0430\u0442\u044c \u0436\u0438\u0442\u044c<\/s> \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Angular-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0430, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044d\u0442\u043e\u0442 \u0433\u0430\u0439\u0434 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0438 \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/96c\/349\/ccf\/96c349ccf1378d9ea4f6826cd0b374ea.png\" width=\"649\" height=\"484\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/96c\/349\/ccf\/96c349ccf1378d9ea4f6826cd0b374ea.png\"\/><\/figure>\n<h2>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h2>\n<ol>\n<li>\n<p><a href=\"#wtf\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Angular Libs, \u0438 \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b?<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#first-step\">\u041f\u0435\u0440\u0432\u044b\u0435 \u0448\u0430\u0433\u0438.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#split\">\u0420\u0430\u0437\u0434\u0435\u043b\u044f\u0439 \u0438 \u0432\u043b\u0430\u0441\u0442\u0432\u0443\u0439.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#img\">\u0427\u0435\u043b\u043e\u0432\u0435\u043a \u0432 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u0445.<\/a><\/p>\n<\/li>\n<\/ol>\n<p>\u0417\u0430\u0431\u0435\u0433\u0430\u044f \u0432\u043f\u0435\u0440\u0451\u0434, \u0441\u0440\u0430\u0437\u0443 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0451 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u0431\u044a\u0451\u043c \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u044b\u0445\u043e\u0434\u0438\u043b \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c. \u0422\u0430\u043a \u0447\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u044b \u0447\u0438\u0442\u0430\u0435\u0442\u0435 \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u0441\u0442 \u0438\u0437 \u0441\u0435\u0440\u0438\u0438. \u041e\u043d \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0430\u0441\u0441\u0435\u0442\u044b \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445.\u00a0<\/p>\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043e\u0441\u0432\u0435\u0442\u0438\u0442\u044c: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a-\u0434\u043e\u043c\u0435\u043d\u043e\u0432, \u0431\u044b\u0441\u0442\u0440\u0443\u044e \u0441\u0431\u043e\u0440\u043a\u0443 \u043a\u043b\u043e\u043d\u043e\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u044e\u0449\u0438\u043c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c, \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d\u0430 \u0441 \u043d\u044e\u0430\u043d\u0441\u0430\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f angular-libs, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430. \u0410 \u0435\u0449\u0451 \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u043e\u043f\u044b\u0442\u043e\u043c, \u043a\u0430\u043a \u0432\u0441\u0451 \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c, \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u0441\u0438\u043b\u044c\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p><a class=\"anchor\" name=\"wtf\" id=\"wtf\"><\/a><\/p>\n<p><strong>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Angular Libs, \u0438 \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b?<\/strong><\/p>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438 \u044d\u0442\u043e \u2014 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0439 \u043d\u0430\u043c angular-\u043f\u0440\u043e\u0435\u043a\u0442. \u041e\u043d \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043c, \u0447\u0442\u043e \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e. \u0422\u0430\u043a\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.\u00a0<\/p>\n<p>\u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0447\u0430\u0441\u0442\u043e angular-libs \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u044b\u043d\u043e\u0441\u0430 \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u043d\u0435\u043a\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u0438\u043b\u0438 ui-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445: \u0432\u043f\u043e\u043b\u043d\u0435 \u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0442\u0430\u043a\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0430 \u043d\u0435 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0451 \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<p>\u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0442\u0430\u043a\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u044e\u0442\u0441\u044f \u0432 npm. \u041d\u043e \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u043e\u043d\u043e\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0449\u0438\u043c\u0441\u044f \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u043a\u0443\u0434\u0430-\u0442\u043e \u043d\u0430\u0448\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u0438\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u043d\u043e\u0433\u043e? \u0412\u0435\u0434\u044c \u0432 \u0438\u0442\u043e\u0433\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0435\u0441\u043b\u0430\u0431\u043e \u0437\u0430\u0431\u043b\u0443\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0430\u043c\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041e\u0431\u044b\u0447\u043d\u043e \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u043a\u0430\u043a\u043e\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 (\u0442\u0443\u0442 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u043b\u044e\u0431\u0438\u043c\u044b\u0439). \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 Angular \u044d\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0435\u043c\u0430\u043b\u043e\u0439 \u0441\u043d\u043e\u0440\u043e\u0432\u043a\u0438 \u0438 \u0442\u0430\u043d\u0446\u0435\u0432 \u0441 \u0431\u0443\u0431\u043d\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433 webpack\u2019\u0430 \u0438 \u043d\u0435 \u043b\u043e\u0432\u0438\u0442\u044c \u043f\u043e\u0434\u043e\u0437\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u044f \u0438 \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<p>\u0418 \u0432\u043e\u0442 \u0442\u0443\u0442 \u043d\u0430 \u0441\u0446\u0435\u043d\u0443 \u0432\u044b\u0445\u043e\u0434\u044f\u0442 Angular Libs! \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c \u0441\u0430\u043c\u043e\u0433\u043e Angular \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430.<\/p>\n<p><strong>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u043d\u0430\u0447\u043d\u0451\u043c<\/strong>, \u0445\u043e\u0447\u0443 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0440\u0435\u043c\u0430\u0440\u043a\u0443 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 Angular. \u0427\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c, \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/nodejs.org\/en\/about\/releases\/\"><u>active LTS \u0438\u043b\u0438 maintenance LTS<\/u><\/a> \u0432\u0435\u0440\u0441\u0438\u044f Node.js,<\/p>\n<\/li>\n<li>\n<p>\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 <a href=\"https:\/\/docs.npmjs.com\/about-npm\"><u>npm<\/u><\/a> \u0438\u043b\u0438 <a href=\"https:\/\/yarnpkg.com\/getting-started\"><u>yarn<\/u><\/a> (\u043d\u0438\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f yarn),\u00a0<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/angular.io\/cli\"><u>Angular CLI<\/u><\/a> (\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0430 \u0432\u0435\u0440\u0441\u0438\u044f Angular, \u043a\u0430\u043a\u0430\u044f \u0431\u044b\u043b\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u0438 \u0434\u043b\u044f cli; \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 cli \u0432\u0435\u0440\u0441\u0438\u0438 11).\u00a0<\/p>\n<\/li>\n<\/ul>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u044d\u0442\u0438\u043c\u0438 \u0448\u0430\u0433\u0430\u043c\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432 <a href=\"https:\/\/angular.io\/guide\/setup-local\"><u>\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043a Angular<\/u><\/a> \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435.<\/p>\n<p><strong>\u0412 \u0445\u043e\u0434\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u044b \u0441 \u0432\u0430\u043c\u0438:<\/strong>\u00a0<\/p>\n<ul>\n<li>\n<p>\u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0430\u0441\u0441\u0435\u0442\u043e\u0432 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0432 \u043d\u0435\u0451 \u0441\u0442\u0438\u043b\u0438, svg-\u0438\u043a\u043e\u043d\u043a\u0438 \u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c, \u0437\u0430\u0447\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a <code>assets<\/code> \u0438 <code>ui-lib-example<\/code> \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043d\u0430\u0443\u0447\u0438\u0442\u044c \u0438\u0445 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u0435\u0440\u0432\u044b\u0435 \u0448\u0430\u0433\u0438<\/h2>\n<p><a class=\"anchor\" name=\"first-step\" id=\"first-step\"><\/a><\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0434\u043d\u0438\u043c\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0435\u0440\u0432\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u041d\u0435\u0441\u0442\u0430\u0440\u0435\u044e\u0449\u0430\u044f \u043a\u043b\u0430\u0441\u0441\u0438\u043a\u0430:<\/p>\n<pre><code>ng new angular-libs-examples<\/code><\/pre>\n<p>\u0421\u0440\u0430\u0437\u0443 \u0441\u043e\u0433\u043b\u0430\u0448\u0430\u0435\u043c\u0441\u044f \u0441\u043e \u0441\u0442\u0440\u043e\u0433\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u0442\u0438\u043f\u043e\u0432 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0440\u043e\u0443\u0442\u0435\u0440. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u044f \u0432\u044b\u0431\u0440\u0430\u043b scss.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b0e\/c15\/538\/b0ec155384ff7f4710e385d03a7c2507.png\" width=\"922\" height=\"1164\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b0e\/c15\/538\/b0ec155384ff7f4710e385d03a7c2507.png\"\/><\/figure>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0430\u0448\u0443 \u043f\u0435\u0440\u0432\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c cli:<\/p>\n<pre><code class=\"bash\">ng generate library ui-lib-example<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0438\u043b\u0438 \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0413\u0443\u0433\u043b \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u2014 \u0442\u0443\u0442 \u0443\u0436 \u0440\u0435\u0448\u0430\u0439\u0442\u0435 \u0441\u0430\u043c\u0438. \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0441\u0442\u0441\u044f \u043d\u0430\u0448\u0430 \u043f\u0435\u0440\u0432\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043e \u043f\u0443\u0442\u0438 <strong>projects\/ui-lib-example<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/231\/52d\/a0d\/23152da0d9a841056e5ee564bc2a8a48.png\" alt=\"\" title=\"\" width=\"866\" height=\"774\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/231\/52d\/a0d\/23152da0d9a841056e5ee564bc2a8a48.png\"\/><\/figure>\n<p>\u042f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0441\u0440\u0430\u0437\u0443 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u043f\u043a\u0443 <strong>projects <\/strong>\u0432 <strong>libs <\/strong>\u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430. \u041e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u0444\u0430\u0439\u043b\u0435 <strong>angular.json<\/strong>: \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u043c\u0435\u043d\u044f\u0435\u043c \u0432\u0441\u0435 \u043f\u0443\u0442\u0438 \u043a \u0444\u0430\u0439\u043b\u0430\u043c \u0441 <strong>\u2018project\/ui-lib-example\/&#8230;\u2019 <\/strong>\u043d\u0430 <strong>\u2018libs\/ui-lib-example\/&#8230;\u2019<\/strong>, \u043a\u0430\u043a \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0438\u0436\u0435:<\/p>\n<details class=\"spoiler\">\n<summary>angular.json<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"json\">\u2026 \"newProjectRoot\": \"libs\", \/\/ \u0432\u0441\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0437\u0436\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043f\u0430\u0434\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u0432 \u044d\u0442\u0443 \u043f\u0430\u043f\u043a\u0443  \u2026 \"ui-lib-example\": { \u2026   \"root\": \"libs\/ui-lib-example\",   \"architect\": {         \"build\": {           \"builder\": \"@angular-devkit\/build-angular:ng-packagr\",           \"options\": {             \"tsConfig\": \"libs\/ui-lib-example\/tsconfig.lib.json\",             \"project\": \"libs\/ui-lib-example\/ng-package.json\"           },           \"configurations\": {             \"production\": {               \"tsConfig\": \"libs\/ui-lib-example\/tsconfig.lib.prod.json\"             }           }         }, ... }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0449\u0451 \u0437\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u0432 \u043d\u0430\u0448 <strong>tsconfig.json, <\/strong>\u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <strong>paths<\/strong> \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c:<\/p>\n<pre><code class=\"json\">...   \"paths\": {       \"ui-lib-example\": [         \"dist\/ui-lib-example\/ui-lib-example\",         \"dist\/ui-lib-example\"       ]     } ...<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a, \u0438 \u0437\u0430\u043f\u0438\u0441\u044c \u043d\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c, \u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0435\u0451 \u0440\u0443\u043a\u0430\u043c\u0438.<\/p>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438, \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0431\u044b\u043b \u0441\u0440\u0430\u0437\u0443 \u0441\u043e\u0437\u0434\u0430\u043d \u0438 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0433\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0432 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0439\u0434\u0451\u043c \u0432 <strong>app.module.ts <\/strong>\u0438 \u0437\u0430\u0438\u043c\u043f\u043e\u0440\u0442\u0438\u043c <code>UiLibExampleModule<\/code>:<\/p>\n<details class=\"spoiler\">\n<summary>app.module.ts<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { UiLibExampleModule } from 'ui-lib-example';  @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     AppRoutingModule,      UiLibExampleModule,   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0448\u0430\u0431\u043b\u043e\u043d <strong>app.component.html <\/strong>\u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0414\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u044f \u0431\u044b \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u043b \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0432\u0441\u0451 \u0438\u0437 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<pre><code class=\"xml\">&lt;div>   &lt;lib-ui-lib-example>&lt;\/lib-ui-lib-example> &lt;\/div><\/code><\/pre>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u0412\u0435\u0434\u044c \u043a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0432 <strong>tsconfig.json, <\/strong>\u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u043f\u0430\u043f\u043a\u0443 <strong>dist<\/strong> \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0437\u0430\u0438\u043c\u043f\u043e\u0440\u0447\u0435\u043d\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439.\u00a0<\/p>\n<pre><code class=\"bash\">yarn build ui-lib-example<\/code><\/pre>\n<blockquote>\n<p><em>\u0412\u0430\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0432\u0435\u0434\u0451\u0442\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0432 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u0442\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u043d\u0443\u0436\u043d\u043e \u0441 \u0444\u043b\u0430\u0433\u043e\u043c<\/em><strong><em> &#8212;watch<\/em><\/strong><em>. \u0422\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0435\u0451 \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/em><\/p>\n<\/blockquote>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 <code>yarn start<\/code><strong> <\/strong>\u0438 \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440.<\/p>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/eac\/106\/b9d\/eac106b9d88fcbb3d5f7ae4327ab265e.png\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" width=\"1456\" height=\"890\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/eac\/106\/b9d\/eac106b9d88fcbb3d5f7ae4327ab265e.png\"\/><\/p>\n<div><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/figcaption><\/div>\n<\/figure>\n<p><strong>\u0412\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0432\u044b \u0432\u043e\u0441\u0445\u0438\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b!<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/0aa\/f29\/79a\/0aaf2979a7802990b5e07ac1970bfaf5.jpeg\" width=\"768\" height=\"385\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0aa\/f29\/79a\/0aaf2979a7802990b5e07ac1970bfaf5.jpeg\" data-blurred=\"true\"\/><\/figure>\n<p><a href=\"https:\/\/gitlab.com\/angular-libs-examples\/example-1\"><u>\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442<\/u><\/a><\/p>\n<h2>\u0420\u0430\u0437\u0434\u0435\u043b\u044f\u0439 \u0438 \u0432\u043b\u0430\u0441\u0442\u0432\u0443\u0439<\/h2>\n<p><a class=\"anchor\" name=\"split\" id=\"split\"><\/a><\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u041c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0443 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0431\u044b \u043c\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0437\u0430\u0447\u0435\u043c.\u00a0<\/p>\n<p>\u0423 \u0441\u0435\u0431\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u041a\u0430\u0440\u0443\u043d\u044b \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u0430\u0441\u0441\u0435\u0442\u043e\u0432 (\u043e\u0431\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438, \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u044b, \u0438\u043a\u043e\u043d\u043a\u0438), <strong>core<\/strong> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, api \u0441\u0435\u0440\u0432\u0438\u0441, translate \u0441\u0435\u0440\u0432\u0438\u0441 \u0438 \u0442.\u0434.) \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443-\u0434\u043e\u043c\u0435\u043d \u2014 \u043e\u043d\u0430 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0431\u0430\u0437\u043e\u0439. \u041d\u0430\u0437\u043e\u0432\u0435\u043c \u0435\u0451 <strong>clients-library<\/strong>. \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0432\u0445\u043e\u0434\u044f\u0442 \u043d\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0432\u0437\u044f\u0442\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u0430 \u0446\u0435\u043b\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 api \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u0438 \u0441\u0442\u0435\u0439\u0442\u0430.<\/p>\n<p>\u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0437\u0432\u0443\u0447\u0438\u0442 \u043a\u0430\u043a \u0447\u0442\u043e-\u0442\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0435 \u0438 \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435, \u043e\u0434\u043d\u0430\u043a\u043e \u0443 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043b\u044e\u0441\u043e\u0432:\u00a0<\/p>\n<ul>\n<li>\n<p>\u043f\u0440\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u043c lazy-loading \u0438 tree-shaking \u043d\u0435 \u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u044f \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043b\u0430\u0431\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443;<\/p>\n<\/li>\n<li>\n<p>\u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<\/ul>\n<p>\u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u043f\u043e\u043c\u0438\u043c\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0431\u0430\u0437\u043e\u0439, \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0435\u0449\u0451 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0438\u0435\u0439. \u042d\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0434\u0440\u0443\u0433\u0438\u0435 \u043b\u044e\u0434\u0438 \u0431\u0443\u0434\u0443\u0442 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u041d\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u0441 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u043c\u0438.\u00a0 \u042d\u0442\u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0432 \u043d\u0430\u0448\u0435\u0439 <strong>clients-library, <\/strong>\u0438 \u043c\u044b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u0430\u043a\u0443\u044e \u0436\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443-\u0434\u043e\u043c\u0435\u043d \u0434\u043b\u044f \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0438\u0438 \u2014 <strong>phone-library<\/strong>. \u0412\u0441\u0451! \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0434\u0432\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: \u043e\u0434\u043d\u043e \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0431\u0430\u0437\u044b, \u0432\u0442\u043e\u0440\u043e\u0435 \u0434\u043b\u044f \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0438\u0438 \u0441 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u043c \u0447\u0430\u0441\u0442\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 clients-library.<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u043b\u0435\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0438 \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c.<\/p>\n<h4>\u0421\u0442\u0438\u043b\u0438<\/h4>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0430\u0441\u0441\u0435\u0442\u043e\u0432 \u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u043c \u0442\u0443\u0434\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, svg \u0438 \u0441\u0442\u0438\u043b\u0438. \u041f\u043e\u0435\u0445\u0430\u043b\u0438:<\/p>\n<pre><code class=\"bash\">ng generate library assets-library<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u043f\u0430\u043f\u043a\u0443 <strong>libs\/assets-library\/src\/lib<\/strong><em> <\/em>\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 <strong>libs\/assets-library\/src\/public-api.ts<\/strong> \u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0443<strong><em> <\/em><\/strong><code>export const a = 1;<\/code><em>. <\/em>\u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0447\u0442\u043e-\u0442\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0442\u044c\u0441\u044f, \u0438\u043d\u0430\u0447\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0435 \u0441\u043e\u0431\u0435\u0440\u0451\u0442\u0441\u044f.<\/p>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u0441\u043e \u0441\u0442\u0438\u043b\u0435\u0439. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 <strong>styles <\/strong>\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0435\u0451 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u043c \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0441\u0442\u0438\u043b\u0435\u0439, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0443, \u043e\u0444\u0444\u0441\u0435\u0442\u044b \u0438 \u0446\u0432\u0435\u0442\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 <strong>_core.scss,<\/strong> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u0447\u043a\u043e\u0439 \u0432\u0445\u043e\u0434\u0430 \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u0441\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b. \u0422\u0430\u043a \u043a\u0430\u043a \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e, \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 <a href=\"https:\/\/gitlab.com\/angular-libs-examples\/example-2\/-\/commit\/e8c84d706bc2557d8907be6b27a3ad74e5480184\"><u>\u043a\u043e\u043c\u043c\u0438\u0442<\/u><\/a>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/025\/0a3\/fe3\/0250a3fe3535b0e89b5131fd4359212f.png\" width=\"688\" height=\"382\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/025\/0a3\/fe3\/0250a3fe3535b0e89b5131fd4359212f.png\"\/><\/figure>\n<p>\u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e Angular libs \u0441\u0430\u043c\u0438 \u043f\u043e \u0441\u0435\u0431\u0435 \u043d\u0435 \u0443\u043c\u0435\u044e\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438. \u0422\u0430\u043a \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u043d\u0430\u0448 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 <strong>package.json, <\/strong>\u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u0445 \u0432 \u0441\u0432\u043e\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f <s>\u0434\u0432\u0435 \u0431\u0443\u0442\u044b\u043b\u043a\u0438 \u0432\u043e\u0434\u043a\u0438<\/s> \u0442\u0430\u043a\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043a\u0430\u043a <a href=\"https:\/\/www.npmjs.com\/package\/cpx\"><u>cpx<\/u><\/a>.<\/p>\n<pre><code class=\"bash\">yarn add cpx --dev<\/code><\/pre>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0430\u0448 \u0441\u043a\u0440\u0438\u043f\u0442. \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u043d\u0430\u0448\u0438 \u0441\u0442\u0438\u043b\u0438 \u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0438\u0445 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<pre><code class=\"json\">\"cp-styles\": \"cpx \\\".\/libs\/assets-library\/src\/lib\/styles\/**\/*\\\" \\\".\/dist\/assets-library\/styles\\\" -v\"<\/code><\/pre>\n<p>\u0418 \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0430\u0440\u0438\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435 \u0441 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0440\u0430\u0437\u0443 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442 \u0441\u0431\u043e\u0440\u043a\u0438 \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0430\u0441\u0441\u0435\u0442\u043e\u0432.<\/p>\n<pre><code class=\"json\">\"build:assets\": \"yarn build assets-library &amp;&amp; yarn cp-styles\",<\/code><\/pre>\n<p>\u0421\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0435\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6a6\/3a3\/d2e\/6a63a3d2e710c96795c3c1806d06baa1.png\" width=\"1800\" height=\"1058\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6a6\/3a3\/d2e\/6a63a3d2e710c96795c3c1806d06baa1.png\"\/><\/figure>\n<p>\u0418 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <strong>dist:<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7bf\/6c7\/0a6\/7bf6c70a6948ce8a63127820403d9a47.png\" width=\"844\" height=\"492\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7bf\/6c7\/0a6\/7bf6c70a6948ce8a63127820403d9a47.png\"\/><\/figure>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c, \u0432\u0441\u0451 \u0441\u043e\u0431\u0440\u0430\u043b\u043e\u0441\u044c \u0438 \u0441\u043b\u043e\u0436\u0438\u043b\u043e\u0441\u044c \u0432 \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u043c\u0435\u0441\u0442\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u043b\u0438 \u0441\u0442\u0438\u043b\u0438 \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043b\u0438 \u043e\u043d\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0444\u0430\u0439\u043b <strong>src\/styles.scss<\/strong> \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n<pre><code class=\"css\">@import \"~dist\/assets-library\/styles\/core.scss\";<\/code><\/pre>\n<p>\u0418 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043d\u0430\u0448 <strong>app.component.html<\/strong><em> <\/em>\u0438<em> <\/em><strong>app.component.scss<\/strong><em>.<\/em><\/p>\n<details class=\"spoiler\">\n<summary>app.component.html<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"xml\">&lt;div>   &lt;lib-ui-lib-example>&lt;\/lib-ui-lib-example>    &lt;div class=\"offset-left-md-m\">     &lt;div class=\"offset-top-sm-l\">\u042d\u0442\u043e \u043d\u0435\u0436\u0438\u0440\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442&lt;\/div>     &lt;div class=\"text-bold offset-top-sm-s\">\u042d\u0442\u043e \u0436\u0438\u0440\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442&lt;\/div>      &lt;div class=\"text-h2 offset-top-sm-s change-color\">\u0422\u0443\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a h2&lt;\/div>     &lt;div class=\"text-h6 offset-top-sm-s\">\u0422\u0443\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a h6&lt;\/div>   &lt;\/div> &lt;\/div><\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>app.component.scss<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">.change-color {   color: rgb(var(--color-green)); }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f80\/250\/dde\/f80250dde9bdcb7dd09bc05da9608b0c.png\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" width=\"968\" height=\"450\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f80\/250\/dde\/f80250dde9bdcb7dd09bc05da9608b0c.png\"\/><\/p>\n<div><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u043e, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e. \u0414\u0430\u043b\u0435\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c, \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u0438 \u044d\u0442\u043e \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442 \u043d\u0430\u0448\u0435\u0433\u043e <strong><em>ui-lib-example.component.ts:<\/em><\/strong><\/p>\n<pre><code class=\"xml\">&lt;p class=\"text-bold text-h6 offset-top-md-m offset-left-md-m\">   ui-lib-example works! &lt;\/p><\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0441\u043e\u0431\u0435\u0440\u0451\u043c <strong>ui-lib-example,<\/strong> \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440.<\/p>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b89\/6e8\/f69\/b896e8f6952d7dd0f90b32afdd716e17.png\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" width=\"1064\" height=\"540\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b89\/6e8\/f69\/b896e8f6952d7dd0f90b32afdd716e17.png\"\/><\/p>\n<div><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c, \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043a \u0441\u0442\u0440\u043e\u043a\u0435 \u201c<strong>ui-lib-example works!<\/strong>\u201d, \u0443 \u043d\u0435\u0451 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u0435. \u0412\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0438 <strong>\u0432\u044b \u0432\u043e\u0441\u0445\u0438\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b! <\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/4ff\/8b1\/9ec\/4ff8b19ecca31b1b531e180aa659debd.jpeg\" alt=\"\" title=\"\" width=\"768\" height=\"385\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4ff\/8b1\/9ec\/4ff8b19ecca31b1b531e180aa659debd.jpeg\" data-blurred=\"true\"\/><\/figure>\n<p><a href=\"https:\/\/gitlab.com\/angular-libs-examples\/example-2\/-\/commit\/a347a6460c2a85a63998411668632c348f2729ee\"><u>\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u043c\u043c\u0438\u0442<\/u><\/a><\/p>\n<h4>SVG<\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <strong>svg<\/strong> \u0432 <strong>assets-library. <\/strong>\u0418 \u0442\u0443\u0442 \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430, \u043a\u0430\u043a \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c: \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u0441\u0431\u043e\u0440\u043a\u0443 \u043e\u0431\u0449\u0435\u0433\u043e \u0447\u0430\u043d\u043a\u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0438\u043a\u043e\u043d\u043e\u043a, \u0432\u0442\u043e\u0440\u043e\u0439 \u2014 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043e\u043a \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0438 \u0438\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043f\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p><strong>\u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 <\/strong>\u043d\u0430\u043c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u0438\u043a\u043e\u043d\u043e\u043a, \u043a\u0430\u043a \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c <a href=\"https:\/\/www.npmjs.com\/package\/svg-to-ts\"><u>svg-to-ts<\/u><\/a><u>.<\/u><\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u0448\u0438 svg \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u041c\u043e\u0436\u0435\u0442\u0435 \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0437\u0430\u0431\u0440\u0430\u0442\u044c \u0438\u0445 \u0443 \u043c\u0435\u043d\u044f \u0438\u0437 <a href=\"https:\/\/gitlab.com\/angular-libs-examples\/example-2\/-\/commit\/12eaaebdce3d3c980ada4e25a2adf6718c7c63ed\"><u>\u043a\u043e\u043c\u043c\u0438\u0442\u0430<\/u><\/a>. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/76a\/3fc\/0ee\/76a3fc0ee45b63c0b26ad047ffddcdd3.png\" width=\"918\" height=\"976\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/76a\/3fc\/0ee\/76a3fc0ee45b63c0b26ad047ffddcdd3.png\"\/><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u0438\u0437 svg \u0432 ts, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u0445 \u0432 \u043c\u043e\u0434\u0443\u043b\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445, \u043d\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044f \u0441\u0430\u043c\u0438 \u0444\u0430\u0439\u043b\u044b. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u0430\u043a\u0435\u0442:<\/p>\n<pre><code class=\"bash\">yarn add svg-to-ts --dev<\/code><\/pre>\n<p>\u0418 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u043a\u0440\u0438\u043f\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 <strong>libs\/assets-library\/package.json. <\/strong>\u041f\u043e\u0447\u0435\u043c\u0443 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0443\u0442? \u041a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043d\u0430\u0448\u0438\u0445 svg.<\/p>\n<details class=\"spoiler\">\n<summary>libs\/assets-library\/package.json.<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"json\">{   \"name\": \"assets-library\",   \"version\": \"0.0.1\",   \"scripts\": {     \"generate-icons\": \"svg-to-ts\"   },   \"peerDependencies\": {...},   \"dependencies\": {...},   \"svg-to-ts\": {     \"conversionType\": \"object\",     \"srcFiles\": [       \".\/src\/lib\/imgs\/icons\/*.svg\"     ],     \"outputDirectory\": \".\/src\/lib\/imgs\/generated-svg\",     \"fileName\": \"svg-icons\",     \"svgoConfig\": {       \"plugins\": [         {           \"removeDimensions\": true,           \"cleanupAttrs\": true         }       ]     }   } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0418 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0432\u044b\u0437\u043e\u0432\u0430 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0433\u043e \u0432\u044b\u0437\u043e\u0432 \u0438\u0437 <strong>\u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e package.json<\/strong><\/p>\n<pre><code class=\"json\">... \"scripts\": {     ...     \"generate-icons\": \"yarn --cwd libs\/assets-library generate-icons\",     ...   }, ...<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>yarn generate-icons<\/code><strong> <\/strong>\u0443 \u043d\u0430\u0441 \u043f\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c\u0443 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435 \u043f\u0443\u0442\u0438 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0444\u0430\u0439\u043b <strong>libs\/assets-library\/src\/lib\/imgs\/generated-svg\/svg-icons.ts<\/strong>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043b\u0435\u0436\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043a\u043b\u044e\u0447\u0430\u043c\u0438 \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e svg-\u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u043c\u0438 \u0441\u0430\u043c\u0438 svg.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/55b\/fb8\/bca\/55bfb8bcadb6ed0232dcde959fd8761a.png\" width=\"1962\" height=\"856\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/55b\/fb8\/bca\/55bfb8bcadb6ed0232dcde959fd8761a.png\"\/><\/figure>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0432 \u0441\u0432\u043e\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445. \u0414\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043f\u0430\u043a\u0435\u0442\u043e\u043c <a href=\"https:\/\/www.npmjs.com\/package\/@ngneat\/svg-icon\">@ngneat\/svg-icon<\/a>. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0435\u0434\u0438\u043d\u044b\u0439 angular-\u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 svg, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u0438\u0442 \u043d\u043e\u0432\u044b\u0439 html-\u0442\u0435\u0433 `&lt;svg-icon>` c \u0438\u043d\u043f\u0443\u0442\u043e\u043c `key` \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0438\u043c\u0435\u043d\u0438 \u0438\u043a\u043e\u043d\u043a\u0438 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <strong>svg-icons.ts<\/strong> \u0438 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0432\u043f\u0438\u0448\u0435\u0442\u0441\u044f \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 DI.<\/p>\n<pre><code class=\"bash\">yarn add @ngneat\/svg-icon --dev<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0430\u043a\u0435\u0442 \u0432 \u043d\u0430\u0448 <strong>libs\/assets-library\/package.json, <\/strong>\u0432 \u0440\u0430\u0437\u0434\u0435\u043b <strong>peerDependencies, <\/strong>\u0447\u0442\u043e\u0431\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0430\u0441\u0441\u0435\u0442\u043e\u0432 \u0437\u043d\u0430\u043b\u0430 \u043e\u0431 \u044d\u0442\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435, \u0438 \u043c\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e package.json.<\/p>\n<pre><code class=\"json\">{   \"name\": \"assets-library\",   \"version\": \"0.0.1\",   \"peerDependencies\": {     \"@angular\/common\": \"^11.2.14\",     \"@angular\/core\": \"^11.2.14\",     \"@ngneat\/svg-icon\": \"^3.2.0\"   }, ... }<\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c <code>IconLibraryModule<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445. \u041f\u043e\u043b\u043e\u0436\u0438\u043c \u0435\u0433\u043e \u043f\u043e \u043f\u0443\u0442\u0438 <strong>libs\/assets-library\/src\/lib\/modules\/icons\/icons-library.module.ts. <\/strong><\/p>\n<details class=\"spoiler\">\n<summary>icons-library.module.ts<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { SvgIconsModule } from '@ngneat\/svg-icon';  import { iconsToArray } from '.\/utils';  import icons from '..\/..\/imgs\/generated-svg\/svg-icons';  @NgModule({   imports: [     SvgIconsModule.forRoot({       icons: iconsToArray(icons),     }),   ],   exports: [     SvgIconsModule,   ], }) export class IconsLibraryModule { }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u043a\u0430\u0440\u043c\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0448 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0438\u043a\u043e\u043d\u043e\u043a \u0432 @ngneat\/svg-icon. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043c\u0435\u0442\u043e\u0434 <code>iconsToArray<\/code><strong>. <\/strong>\u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, <code>SvgIconsModule<\/code><strong> <\/strong>\u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u043d\u0430 \u0432\u0445\u043e\u0434 \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432 \u0432\u0438\u0434\u0435 <code>[{ name: \u0438\u043c\u044f \u0438\u043a\u043e\u043d\u043a\u0438, data: \u0441\u0430\u043c\u0430 \u0441\u0432\u0433 }]<\/code>, \u0430 svg-to-ts \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u044b. \u0422\u0430\u043a \u0447\u0442\u043e \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043c\u043e\u0447\u044c. \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043a\u043e\u0434 \u0441\u0432\u043e\u0435\u0439 \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u043e\u043b\u043e\u0436\u0438\u043b \u0435\u0451 \u0442\u0443\u0434\u0430 \u0436\u0435, \u043a \u043c\u043e\u0434\u0443\u043b\u044e \u2014 <strong>libs\/assets-library\/src\/lib\/modules\/icons\/utils.ts. <\/strong>\u0418 \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <code>SvgIconsModule<\/code><strong> <\/strong>\u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432, \u0438\u043d\u0430\u0447\u0435 \u043a \u043d\u0435\u043c\u0443 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<details class=\"spoiler\">\n<summary>\u0423\u0442\u0438\u043b\u0438\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">export const objConverting = ([name, data]: [string, string]) => ({ name, data });  export const iconsToArray = (obj: { [key: string]: string }): { name: string, data: string }[] =>   Object.entries(obj).map(objConverting); <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448 \u043c\u043e\u0434\u0443\u043b\u044c \u0447\u0435\u0440\u0435\u0437 <strong>libs\/assets-library\/src\/lib\/modules\/icons\/index.ts<\/strong>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e \u0432 <strong>libs\/assets-library\/src\/public-api.ts. <\/strong>\u0415\u0441\u043b\u0438 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0442\u043e \u0432\u0430\u0448 \u043c\u043e\u0434\u0443\u043b\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433 \u2014 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u0448\u0438 <strong>app.component.html, app.module.ts <\/strong>\u0438 <strong>app.component.scss.<\/strong><\/p>\n<details class=\"spoiler\">\n<summary>app.component.html<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"xml\">&lt;div>   ...   &lt;div class=\"icons offset-top-sm-l\">     &lt;svg-icon key=\"work\" color=\"red\">&lt;\/svg-icon>     &lt;svg-icon key=\"settings\" color=\"green\">&lt;\/svg-icon>     &lt;svg-icon key=\"settings\" color=\"yellow\">&lt;\/svg-icon>   &lt;\/div> &lt;\/div><\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>app.module.ts<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">... import { IconsLibraryModule } from 'assets-library'; ...  @NgModule({   ...   imports: [     ...     IconsLibraryModule,   ],   ... }) export class AppModule { }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>app.component.scss<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">.icons {   display: flex;   justify-content: space-between;   align-items: center;   width: 200px;   height: 80px;   margin-left: var(--offset-md-m);   background-color: rgb(var(--color-grey-40));    &amp; svg-icon {     width: 40px;     height: 40px;   } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442 \u0441\u0431\u043e\u0440\u043a\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0430\u0441\u0441\u0435\u0442\u043e\u0432. \u041d\u0443\u0436\u043d\u043e \u0443\u0447\u0435\u0441\u0442\u044c, \u0447\u0442\u043e \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0438\u043a\u043e\u043d\u043e\u043a \u0438 \u043b\u0438\u0448\u044c \u0437\u0430\u0442\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0430 \u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u0441\u0442\u0438\u043b\u0435\u0439:<\/p>\n<pre><code class=\"json\">\"build:assets\": \"yarn generate-icons &amp;&amp; yarn build assets-library &amp;&amp; yarn cp-styles\"<\/code><\/pre>\n<p>\u0414\u0443\u043c\u0430\u044e, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u2014 <code>yarn build:assets &amp;&amp; yarn start<\/code>. <\/p>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ce9\/8fd\/9f1\/ce98fd9f138bd8ac1762be34ab226978.png\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" width=\"966\" height=\"916\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ce9\/8fd\/9f1\/ce98fd9f138bd8ac1762be34ab226978.png\"\/><\/p>\n<div><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0443 \u0447\u0442\u043e \u0436, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u043c, \u0431\u0443\u0434\u0435\u0442 \u043b\u0438 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0448\u0435\u0439<strong> ui-lib-example. <\/strong>\u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0435, \u043c\u043e\u0434\u0443\u043b\u0435 \u0438 \u0441\u0442\u0438\u043b\u044f\u0445 \u0438 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 ui-lib-example-\u0448\u0430\u0431\u043b\u043e\u043d, \u043c\u043e\u0434\u0443\u043b\u044c \u0438 \u0441\u0442\u0438\u043b\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u041e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0438 \u0435\u0449\u0451 \u0440\u0430\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/dcf\/700\/63f\/dcf70063f1c4198bef82debde2e774ab.png\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" width=\"1008\" height=\"924\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/dcf\/700\/63f\/dcf70063f1c4198bef82debde2e774ab.png\"\/><\/p>\n<div><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u0412\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0438 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f svg. \u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0435 \u0438\u043a\u043e\u043d\u043a\u0438, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430, \u0438 tree-shaking \u043d\u0430 \u043d\u0438\u0445 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041d\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u043f\u043e\u043b\u043d\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0438\u043a\u043e\u043d\u043e\u043a, \u0438 \u043f\u0440\u043e\u0449\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438\u0445 \u0440\u0430\u0437\u043e\u043c, \u0430 \u043f\u043e\u0442\u043e\u043c \u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438. <\/p>\n<p><a href=\"https:\/\/gitlab.com\/angular-libs-examples\/example-2\/-\/commit\/97376eec2575e75f0e674e9252f12cb9d18e6e8b\"><u>\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u043c\u043c\u0438\u0442<\/u><\/a><\/p>\n<p><strong>\u041f\u0440\u0438 \u0432\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 <\/strong>\u0432\u0441\u0451 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0430\u0447\u0435, \u0438 \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430. \u041e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043e\u0434\u043d\u043e\u0439 \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0430 \u0438\u043a\u043e\u043d\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u201c\u043b\u0435\u043d\u0438\u0432\u043e\u201d \u0438 \u0432\u043f\u043e\u043b\u043d\u0435 \u0441\u0435\u0431\u0435 \u0442\u0440\u0438\u0448\u0435\u0439\u043a\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>\u0417\u0430 \u0438\u0434\u0435\u044e \u0441\u043f\u0430\u0441\u0438\u0431\u043e <a href=\"https:\/\/twitter.com\/klimakov_me\/\"><u>\u041e\u043b\u0435\u0433\u0443 \u041a\u043b\u0438\u043c\u0430\u043a\u043e\u0432\u0443<\/u><\/a>\u00a0 \u2014 \u0438 \u0437\u0430 \u0442\u043e, \u0447\u0442\u043e \u0437\u0430\u0434\u0430\u043b \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u043a\u0443\u0434\u0430 \u043a\u043e\u043f\u0430\u0442\u044c.<\/p>\n<p>\u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u043d\u0435\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e <strong>svg-to-ts <\/strong>\u0432 \u0444\u0430\u0439\u043b\u0435 <strong>libs\/assets-library\/package.json:<\/strong><\/p>\n<details class=\"spoiler\">\n<summary>libs\/assets-library\/package.json<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"json\">\"svg-to-ts\": {     \"conversionType\": \"files\",     \"srcFiles\": [       \".\/src\/lib\/imgs\/icons\/*.svg\"     ],     \"outputDirectory\": \".\/src\/lib\/modules\/icons\/generated-icons\",     \"fileName\": \"svg-icons\",     \"interfaceName\": \"SvgIcon\",     \"typeName\": \"svgIcon\",     \"prefix\": \"svgIcon\",     \"optimizeForLazyLoading\": true,     \"modelFileName\": \"svg-icon.model\",     \"additionalModelFile\": \".\/src\/lib\",     \"compileSources\": true,     \"svgoConfig\": {       \"plugins\": [         {           \"removeDimensions\": true,           \"cleanupAttrs\": true         }       ]     }   }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u0435\u043d\u044f\u0435\u043c \u0442\u0438\u043f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u0432\u0435\u0440\u043d\u0435\u0435, \u0434\u0435\u043b\u0430\u0435\u043c \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u043e\u0432. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u043a\u043e\u043d\u043a\u0435 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d js \u0444\u0430\u0439\u043b \u0438 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u0442\u0438\u043f\u043e\u0432 d.ts. \u0415\u0449\u0451 \u0431\u0443\u0434\u0443\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043c\u043e\u0434\u0435\u043b\u0438 (\u0438\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b) \u0434\u043b\u044f \u0438\u043a\u043e\u043d\u043e\u043a, \u0438 \u0432\u0441\u0451 \u044d\u0442\u043e \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e \u0441\u043b\u043e\u0436\u0438\u0442\u0441\u044f \u0432 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u043d\u0430\u043c\u0438 \u043c\u0435\u0441\u0442\u043e. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u043e\u043b\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443, \u0432\u0441\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0432 <a href=\"https:\/\/www.npmjs.com\/package\/svg-to-ts#3-tree-shakable-and-optimized-for-lazy-loading-conversiontypefiles\"><u>\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/u><\/a> \u043a \u043f\u0430\u043a\u0435\u0442\u0443.\u00a0<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u043a\u0440\u0438\u043f\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u043a\u043e\u043d\u043e\u043a <strong>yarn generate-icons, <\/strong>\u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0435\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <strong>generated-icons<\/strong> \u0432 \u043d\u0430\u0448\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u0435 <strong>icons. <\/strong>\u042f \u043f\u043e\u043b\u043e\u0436\u0438\u043b \u0435\u0451 \u0442\u0443\u0434\u0430 \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438, \u043d\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043b\u043e\u0436\u0438\u0442\u044c \u0432\u0430\u0448\u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u043b\u044e\u0431\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0432\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0430\u0441\u0441\u0435\u0442\u043e\u0432.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b03\/dad\/123\/b03dad123def481397fc3d52e2d2c27f.png\" width=\"802\" height=\"964\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b03\/dad\/123\/b03dad123def481397fc3d52e2d2c27f.png\"\/><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0430\u0448\u0438\u043c \u0438\u043a\u043e\u043d\u043a\u0430\u043c, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0432 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0435\u0441\u0442\u0440. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u0434\u043b\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0438\u043a\u043e\u043d\u043e\u043a, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043c\u043e\u0436\u0435\u0442 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 <code>&lt;svg-icon><\/code>. \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0438 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u043c\u043e\u0434\u0443\u043b\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f, \u0430 DI \u0430\u043d\u0433\u0443\u043b\u044f\u0440\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u043d\u0451\u0442 \u0441\u0432\u043e\u044e \u043c\u0430\u0433\u0438\u044e \u0441 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0438 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043b\u0435\u043d\u0438\u0432\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u0438 \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0438\u043a\u043e\u043d\u043a\u0443.<\/p>\n<p>\u041d\u043e \u043f\u043e\u043a\u0430 \u044d\u0442\u043e \u0432\u0441\u0451 \u0441\u043b\u043e\u0432\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0436\u0435 \u0447\u0442\u043e-\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u043c. \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438. \u042f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0435\u0433\u043e \u0432 \u0442\u043e\u0442 \u0436\u0435 \u043c\u043e\u0434\u0443\u043b\u044c <strong>icons<\/strong>.<\/p>\n<details class=\"spoiler\">\n<summary>libs\/assets-library\/src\/lib\/modules\/icons\/icons.service.ts<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">@Injectable({ providedIn: 'root' }) export class IconsRegistryService {   private registry = new Map&lt;string, string>();    registerIcons(icons: SvgIcon[]): void {     icons.forEach((icon: SvgIcon) => this.registry.set(icon.name, icon.data));   }    getIcon(iconName: string): string | undefined {     if (!this.registry.has(iconName)) {       \/\/ eslint-disable-next-line no-console       console.warn(         `We could not find the icon with name ${ iconName }, did you add it to the icon registry?`,       );     }      return this.registry.get(iconName);   } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0412\u0441\u0451 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u043e. \u041d\u0430\u0448 \u0440\u0435\u0435\u0441\u0442\u0440 \u0438\u043a\u043e\u043d\u043e\u043a \u2014 \u044d\u0442\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 <strong>Map, <\/strong>\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043c\u044f \u0438\u043a\u043e\u043d\u043a\u0438, \u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u2014 \u0441\u0430\u043c\u0443 svg. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0441\u0435\u0440\u0432\u0438\u0441 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0432\u0430 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u0430: \u043e\u0434\u0438\u043d \u0434\u043b\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0438\u043a\u043e\u043d\u043e\u043a, \u0432\u0442\u043e\u0440\u043e\u0439 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f svg \u043f\u043e \u0438\u043c\u0435\u043d\u0438 \u0438\u043a\u043e\u043d\u043a\u0438. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u0435\u0440\u0432\u0438\u0441 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 <code>{ providedIn: 'root' }<\/code>.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0447\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043e\u043a, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e \u0442\u0438\u043f\u0443 svg-icon<s> \u043d\u043e \u0441 \u0431\u043b\u044d\u043a\u0434\u0436\u0435\u043a\u043e\u043c \u0438 \u043a\u0443\u0440\u0442\u0438\u0437\u0430\u043d\u043a\u0430\u043c\u0438<\/s>. \u041f\u043e\u043b\u043e\u0436\u0438\u043b \u0435\u0433\u043e \u0442\u0443\u0434\u0430 \u0436\u0435, \u043a <strong>icons-library.module<\/strong><\/p>\n<details class=\"spoiler\">\n<summary>libs\/assets-library\/src\/lib\/modules\/icons\/icons.component.ts<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">@Component({   selector: 'lib-svg-icons',   template: '&lt;ng-content>&lt;\/ng-content>',   changeDetection: ChangeDetectionStrategy.OnPush, }) export class IconsComponent {   private svgIcon: SVGElement | undefined;    @Input() set name(iconName: svgIcon) {     const svgData = this.svgIconRegistry.getIcon(iconName);      if (this.svgIcon) {       this.el.nativeElement.removeChild(this.svgIcon);     }      if (svgData) {       this.svgIcon = this.svgElementFromString(svgData);       this.el.nativeElement.appendChild(this.svgIcon);     }   }    constructor(     private el: ElementRef,     private svgIconRegistry: IconsRegistryService,     @Optional() @Inject(DOCUMENT) private document: any,   ) { }    private svgElementFromString(svgContent: string): SVGElement {     const div = this.document.createElement('DIV');     div.innerHTML = svgContent;      return div.querySelector('svg') || this.document.createElementNS('http:\/\/www.w3.org\/200\/svg', 'path');   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0412 \u043e\u0431\u0449\u0438\u0445 \u0447\u0435\u0440\u0442\u0430\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: \u0432 \u0441\u0435\u0442\u0442\u0435\u0440 <strong>name<\/strong> \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f <code>iconName<\/code> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 svg. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0435\u0433\u043e \u0432 \u043d\u0430\u0448, <code>IconsRegistryService<\/code><strong>,<\/strong> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c svg-\u0438\u043a\u043e\u043d\u043a\u0443 (\u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0435\u0441\u0442\u044c \u0432 \u0440\u0435\u0435\u0441\u0442\u0440\u0435). \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0432 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 <code>svgElementFromString<\/code><strong> <\/strong>svg \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c <strong>SVGElement-\u0438\u043a\u043e\u043d\u043a\u0443,<\/strong> \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u044c <strong>nativeElement<\/strong> \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e <strong>ElementRef.<\/strong><\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043c\u043e\u0434\u0443\u043b\u0435 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 exports. \u0418 \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043d\u0430 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0432 <strong>public-api.ts, <\/strong>\u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>icons-library.module.ts<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">@NgModule({   declarations: [     IconsComponent,   ],   imports: [     SvgIconsModule.forRoot({       icons: iconsToArray(icons),     }),   ],   exports: [     SvgIconsModule,     IconsComponent,   ], }) export class IconsLibraryModule { }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041e\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043e\u0441\u043e\u0437\u043d\u0430\u043d\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u0430\u043c \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0449\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043d\u043e\u0432\u0430 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <strong>cpx <\/strong>\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442 \u0438\u0445 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0432 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0431\u0438\u043b\u0434 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0430\u0441\u0441\u0435\u0442\u043e\u0432. \u041d\u0443, \u0438 \u0437\u0430\u043e\u0434\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0441\u043a\u0440\u0438\u043f\u0442 \u0441\u0430\u043c\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>package.json<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>\"scripts\": { ...     \"build:assets\": \"yarn generate-icons &amp;&amp; yarn build assets-library &amp;&amp; yarn cp-styles &amp;&amp; yarn cp-images &amp;&amp; yarn cp-icons\", ...     \"cp-icons\": \"cpx \\\".\/libs\/assets-library\/src\/lib\/modules\/icons\/generated-icons\/**\/*.{d.ts,js}\\\" \\\".\/dist\/assets-library\/icons\\\" -v\",   },<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e! \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u043e\u0432\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u0436\u0435 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c <strong>app.module.ts<\/strong> \u0438 <strong>app.component.html<\/strong><\/p>\n<details class=\"spoiler\">\n<summary>app.module.ts<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { IconsLibraryModule, IconsRegistryService } from 'assets-library'; import { svgIconWork } from 'assets-library\/icons';  ... export class AppModule {   constructor(private svgIconRegistry: IconsRegistryService) {     svgIconRegistry.registerIcons([svgIconWork]);   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>app.component.html<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"xml\">...   &lt;div class=\"icons offset-top-sm-l\">     &lt;lib-svg-icons name=\"work\">&lt;\/lib-svg-icons>     &lt;svg-icon key=\"settings\" color=\"green\">&lt;\/svg-icon>     &lt;svg-icon key=\"settings\" color=\"yellow\">&lt;\/svg-icon>   &lt;\/div> <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0415\u0449\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f <code>lib-svg-icons<\/code><strong>.<\/strong> \u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u043a\u043e\u043d\u043a\u0438 \u043f\u0440\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0442\u043e \u0440\u0438\u0441\u043a\u0443\u0435\u043c \u0435\u0451 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u043e\u0438\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432 \u0441\u0442\u0438\u043b\u044f\u0445. \u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u043c \u0438\u043a\u043e\u043d\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e fill \u0442\u0430\u043c \u0436\u0435 \u0432 scss. \u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong>IconsComponent <\/strong>\u0441\u0442\u0440\u043e\u043a\u0443 \u201c<strong>styles: [\u2018:host::ng-deep svg{ width: 50px; height: 50px }\u2019]<\/strong>\u201d, \u043d\u043e \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u0442\u0430\u043a\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0442\u0443\u0434\u0430, \u0433\u0434\u0435 \u0438\u043a\u043e\u043d\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f.<\/p>\n<pre><code class=\"css\">lib-svg-icons {   width: 40px;   height: 40px;   fill: #941894; }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u043a\u0440\u0438\u043f\u0442 \u0441\u0431\u043e\u0440\u043a\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435: \u0438\u043a\u043e\u043d\u043a\u0430 \u0432 \u043d\u0438\u0436\u043d\u0435\u043c \u0440\u044f\u0434\u0443 \u0432\u0441\u0451 \u0442\u0430\u043a \u0436\u0435 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u043c\u043e\u0434\u0443\u043b\u0435\u043c \u0438 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u0446\u0432\u0435\u0442\u043e\u043c.<\/p>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/10c\/551\/4d0\/10c5514d004c9f39e3603cf79ea99476.png\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" width=\"1072\" height=\"1018\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/10c\/551\/4d0\/10c5514d004c9f39e3603cf79ea99476.png\"\/><\/p>\n<div><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0410 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0430\u0440\u0441\u0435\u043d\u0430\u043b\u0435 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u0438\u044f \u0438\u043a\u043e\u043d\u043e\u043a \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0438 \u043e\u0431\u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e, \u043d\u043e \u0438 \u0432\u0435\u0441\u044c\u043c\u0430 \u0443\u0434\u043e\u0431\u043d\u044b \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438. \u0418 \u0437\u043d\u0430\u0435\u0442\u0435 \u0447\u0442\u043e \u0435\u0449\u0451? <strong>\u0412\u044b \u0432\u043e\u0441\u0445\u0438\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b! <\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/aa2\/851\/967\/aa2851967867b0cbc7d32be5ded08421.jpeg\" width=\"768\" height=\"385\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/aa2\/851\/967\/aa2851967867b0cbc7d32be5ded08421.jpeg\" data-blurred=\"true\"\/><\/figure>\n<p><a href=\"https:\/\/gitlab.com\/angular-libs-examples\/example-2\/-\/commit\/03cded9129fcfa63f46735ca2cf203ca24cd19b1\"><u>\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u043c\u043c\u0438\u0442<\/u><\/a><\/p>\n<h2>\u0427\u0435\u043b\u043e\u0432\u0435\u043a \u0432 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u0445<\/h2>\n<p><a class=\"anchor\" name=\"img\" id=\"img\"><\/a><\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 svg \u0438 \u0441\u0442\u0438\u043b\u0435\u0439, \u0432\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043b\u043e\u0436\u0438\u0442\u044c \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0430\u0441\u0441\u0435\u0442\u043e\u0432 \u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u0425\u043e\u0442\u044f \u044d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0442\u043e\u043d\u043a\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442. \u0412 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432, \u0442\u0430\u043a\u0438\u0435 \u0430\u0441\u0441\u0435\u0442\u044b \u043a\u0430\u043a \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0438, \u0438 \u043d\u0430\u043c \u0440\u0435\u0434\u043a\u043e \u043d\u0443\u0436\u043d\u043e \u0438\u0445 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u041d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u0434\u043c\u0438\u043d\u043e\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u2014 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0431\u0430\u0437\u043e\u0439 \u0438 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0438\u0435\u0439. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0430\u0434\u043c\u0438\u043d\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u0435\u0441\u044c\u043c\u0430 \u043f\u043e\u0445\u043e\u0436\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e. \u0422\u0430\u043a \u0447\u0442\u043e \u043c\u0435\u0448\u0430\u0435\u0442 \u043d\u0430\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u043b\u044f \u043d\u0438\u0445 \u043f\u043e\u0445\u043e\u0436\u0438\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b 404 \u0438 403? \u0421 \u043e\u0434\u043d\u0438\u043c\u0438 \u0438 \u0442\u0435\u043c\u0438 \u0436\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438, \u043d\u043e \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438.<\/p>\n<p>\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0440\u0430\u0437 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u044e\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0442\u043e \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c? \u041c\u043e\u0436\u0435\u0442, \u043a\u043e\u043c\u0443-\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u043b\u043e\u0436\u0438\u043c \u043a\u0430\u043a\u0443\u044e-\u043d\u0438\u0431\u0443\u0434\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u0443 \u043a \u043d\u0430\u043c \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 <a href=\"https:\/\/gitlab.com\/angular-libs-examples\/example-2\/-\/commit\/08776a3a1b8cb45a1187c7e557097d597a2f7734\"><u>\u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0431\u0440\u0430\u0442\u044c \u0438\u0437 \u043a\u043e\u043c\u043c\u0438\u0442\u0430<\/u><\/a> (\u0434\u0430, \u044f \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043b\u0441\u044f \u0441 \u043f\u043e\u0434\u0431\u043e\u0440\u043e\u043c).<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/271\/d26\/9c5\/271d269c525ff396b049db7b49a4a4eb.png\" width=\"826\" height=\"616\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/271\/d26\/9c5\/271d269c525ff396b049db7b49a4a4eb.png\"\/><\/figure>\n<p>\u041a\u0430\u043a \u0438 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438, <strong>Angular Libs<\/strong> \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0438\u0437\u0432\u043d\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0444\u043e\u043a\u0443\u0441 \u0441 <strong>cpx.<\/strong> \u041f\u043e\u0439\u0434\u0451\u043c \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 <strong>package.json,<\/strong> \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u043a\u0440\u0438\u043f\u0442 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0441\u043a\u0440\u0438\u043f\u0442 \u0441\u0431\u043e\u0440\u043a\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0430\u0441\u0441\u0435\u0442\u043e\u0432:<\/p>\n<pre><code class=\"json\">\"build:assets\": \"yarn generate-icons &amp;&amp; yarn build assets-library &amp;&amp; yarn cp-styles &amp;&amp; yarn cp-images\", ... \"cp-images\": \"cpx \\\".\/libs\/assets-library\/src\/lib\/imgs\/img\/**\/*\\\" \\\".\/dist\/assets-library\/img\\\" -v\",<\/code><\/pre>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0430\u043f\u043a\u0438 <strong>img <\/strong>\u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0431\u0438\u043b\u0434\u0430 assets-library \u0441 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u043e\u043c \u0442\u0443\u0434\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/383\/4c0\/d75\/3834c0d757c3c683bdd44c59726563d1.png\" width=\"836\" height=\"678\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/383\/4c0\/d75\/3834c0d757c3c683bdd44c59726563d1.png\"\/><\/figure>\n<p>\u0422\u0443\u0442 \u0432\u0430\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 <strong>\u0438\u043c\u043f\u043e\u0440\u0442 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 css.<\/strong><\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043c <strong>app.component.html <\/strong>\u0438<strong> app.component.scss:<\/strong><\/p>\n<pre><code class=\"xml\">&lt;div>   ...   &lt;div class=\"img offset-top-sm-l\">&lt;\/div> &lt;\/div><\/code><\/pre>\n<pre><code class=\"css\">... .img {   width: 174px;   height: 210px;   margin-left: var(--offset-md-m);   background: no-repeat url(\"~dist\/assets-library\/img\/example.png\") 0 0;   background-size: contain; }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0435\u0441\u043b\u0438 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0430\u0441\u0441\u0435\u0442\u043e\u0432 \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/253\/a7f\/fac\/253a7ffac262af857b9a7ee0884ab294.png\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" width=\"974\" height=\"1338\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/253\/a7f\/fac\/253a7ffac262af857b9a7ee0884ab294.png\"\/><\/p>\n<div><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0410 \u0432\u043e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 webpack \u0430\u043d\u0433\u0443\u043b\u044f\u0440\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u0440\u0435\u0437\u043e\u043b\u0432\u0438\u0442\u044c \u0432\u0441\u0435 \u043f\u0443\u0442\u0438. \u041d\u043e \u043e\u043d \u043f\u043e\u043d\u044f\u0442\u0438\u044f \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043e \u043f\u0443\u0442\u044f\u0445 \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 <strong>~dist\/assets-library\/img\/example.png <\/strong>\u00a0\u043f\u043e \u0438\u0442\u043e\u0433\u0443 \u0431\u0443\u0434\u0435\u0442 \u0432\u0435\u0441\u0442\u0438 \u043d\u0430 \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0444\u0430\u0439\u043b. \u0421\u0431\u043e\u0440\u043a\u0430 \u0441\u0430\u043c\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f <a href=\"https:\/\/www.npmjs.com\/package\/ng-packagr\"><u>ng-packagr<\/u><\/a>, \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432 \u043d\u0451\u043c\u00a0 \u0440\u0435\u0437\u043e\u043b\u0432 \u0442\u0430\u043a\u0438\u0445 \u043f\u0443\u0442\u0435\u0439 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u043d\u0430\u043a\u043e \u0432\u044b\u0445\u043e\u0434 \u0435\u0441\u0442\u044c: \u043d\u0443\u0436\u043d\u043e \u043b\u0438\u0448\u044c \u043a\u0430\u043a-\u0442\u043e \u0434\u0430\u0442\u044c \u043f\u043e\u043d\u044f\u0442\u044c \u0432\u0435\u0431\u043f\u0430\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043e \u043f\u0443\u0442\u044f\u0445 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u0437\u0430\u0440\u0430\u043d\u0435\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>ng-content<\/code><strong> <\/strong>\u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c <code>select=\u201d.image\u201d<\/code><strong> <\/strong>\u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<strong>, <\/strong>\u0430 \u0441\u0442\u0438\u043b\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f:<\/p>\n<details class=\"spoiler\">\n<summary>libs\/ui-lib-example\/src\/lib\/ui-lib-example.component.ts<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">@Component({   selector: 'lib-ui-lib-example',   template: `     &lt;div class=\"offset-left-md-m\">       &lt;div class=\"offset-top-md-m\">         &lt;ng-content select=\".image\">&lt;\/ng-content>       &lt;\/div>        &lt;p class=\"text-bold text-h6 offset-top-md-m\">         ui-lib-example works!       &lt;\/p>        &lt;div class=\"icons offset-top-sm-l\">         &lt;svg-icon key=\"work\" color=\"red\">&lt;\/svg-icon>         &lt;svg-icon key=\"settings\" color=\"green\">&lt;\/svg-icon>         &lt;svg-icon key=\"settings\" color=\"yellow\">&lt;\/svg-icon>       &lt;\/div>     &lt;\/div>   `,   styleUrls: ['.\/ui-lib-example.component.scss'], }) export class UiLibExampleComponent { }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>angular-libs-examples\/src\/app\/app.component.html<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"xml\">&lt;div>   &lt;lib-ui-lib-example>     &lt;div class=\"image\">&lt;\/div>   &lt;\/lib-ui-lib-example>   ... &lt;\/div><\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>angular-libs-examples\/src\/app\/app.component.scss<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">.img, .image {   width: 174px;   height: 210px;   margin-left: var(--offset-md-m);   background: no-repeat url(\"~dist\/assets-library\/img\/example.png\") 0 0;   background-size: contain; }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <strong>ui-lib-component <\/strong>\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443:<\/p>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1d9\/16e\/e72\/1d916ee72385fb0e49dc2c216e200513.png\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" width=\"944\" height=\"1776\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1d9\/16e\/e72\/1d916ee72385fb0e49dc2c216e200513.png\"\/><\/p>\n<div><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0430\u0434\u0434\u0438\u043d\u0433\u043e\u0432, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u043f\u043b\u044e\u0441\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041d\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0431\u043e\u0447\u0438\u0439, <strong>\u0430 \u0432\u044b\u2026 \u041d\u0443 \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438)<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/39a\/973\/097\/39a973097abcaaa24be9d1679d44c481.jpeg\" width=\"768\" height=\"385\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/39a\/973\/097\/39a973097abcaaa24be9d1679d44c481.jpeg\" data-blurred=\"true\"\/><\/figure>\n<p><a href=\"https:\/\/gitlab.com\/angular-libs-examples\/example-2\/-\/commit\/0d71af501e8cea9c5fc581c6fff8f55739fc5798\"><u>\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u043c\u043c\u0438\u0442<\/u><\/a><\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0430\u0441\u0441\u0435\u0442\u043e\u0432 \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 Angular libs. \u0415\u0449\u0451 \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u043d\u043e \u0438 \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0436\u0435 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c tree-shaking. \u041c\u044b \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f core-\u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0438 \u043d\u0430\u0443\u0447\u0438\u043c\u0441\u044f \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043f\u043e\u0445\u043e\u0436\u0438\u0445 \u043f\u043e \u0444\u043e\u0440\u043c\u0435, \u043d\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044e.<\/p>\n<p><strong>\u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e:<\/strong><\/p>\n<ol>\n<li>\n<p>Angular libs &#8212; <a href=\"https:\/\/angular.io\/guide\/libraries\"><u>https:\/\/angular.io\/guide\/libraries<\/u><\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>Angular CLI &#8212; <a href=\"https:\/\/angular.io\/cli\"><u>https:\/\/angular.io\/cli<\/u><\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>Node.js &#8212; <a href=\"https:\/\/nodejs.org\/en\/\"><u>https:\/\/nodejs.org\/en\/<\/u><\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>cpx &#8212; <a href=\"https:\/\/www.npmjs.com\/package\/cpx\"><u>https:\/\/www.npmjs.com\/package\/cpx<\/u><\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>svg-to-ts &#8212; <a href=\"https:\/\/www.npmjs.com\/package\/svg-to-ts\"><u>https:\/\/www.npmjs.com\/package\/svg-to-ts<\/u><\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>@ngneat\/svg-icon &#8212; <a href=\"https:\/\/www.npmjs.com\/package\/@ngneat\/svg-icon\"><u>https:\/\/www.npmjs.com\/package\/@ngneat\/svg-icon<\/u><\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>ng-packagr &#8212; <a href=\"https:\/\/www.npmjs.com\/package\/ng-packagr\"><u>https:\/\/www.npmjs.com\/package\/ng-packagr<\/u><\/a>\u00a0<\/p>\n<\/li>\n<\/ol>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u043f\u0430\u0441\u0438\u0431\u043e <a href=\"https:\/\/twitter.com\/klimakov_me\/\"><u>@klimakov_me<\/u><\/a>\u00a0 \u0437\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u0441 tree-shaking\u2019\u043e\u043c \u0438\u043a\u043e\u043d\u043e\u043a.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/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\/articles\/588448\/\"> https:\/\/habr.com\/ru\/articles\/588448\/<\/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 article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0418\u043b\u044c\u044f, \u0438 \u044f \u0442\u0438\u043c\u043b\u0438\u0434 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0432 \u041a\u0430\u0440\u0443\u043d\u0435. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0442\u0435\u0439 \u044f \u0445\u043e\u0447\u0443 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0441\u0432\u0435\u0442\u0438\u0442\u044c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 <a href=\"https:\/\/angular.io\/guide\/libraries\"><u>Angular Libs<\/u><\/a>. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0442\u043e, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 tree-shaking \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u0438 \u0447\u0430\u0441\u0442\u044f\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.\u00a0<\/p>\n<p>\u0418\u0434\u0435\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u0438\u0437-\u0437\u0430 \u043c\u043e\u0438\u0445 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0431\u043e\u043b\u0435\u0439, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0430\u0441\u044c \u0441 Angular-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438 \u0438 \u0441 \u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438. \u041a\u0443\u0447\u0430 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u2014 \u043e\u0442 \u201c\u043a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c?\u201d \u0434\u043e \u201c\u043a\u0430\u043a \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043a\u0430\u0442\u0438\u0442\u044c \u0432 \u043f\u0440\u043e\u0434?\u201d, \u0438 \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435, \u0447\u0442\u043e \u043d\u0430\u0439\u0442\u0438 \u043e\u0431 \u044d\u0442\u043e\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0443\u0434\u0430\u0432\u0430\u043b\u043e\u0441\u044c, \u043d\u043e \u0441 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u0438 \u043e\u0447\u0435\u043d\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u0443\u044e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u043e\u0432\u0438\u0447\u043a\u0430\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u0438 <s>\u043d\u0430\u0447\u0430\u0442\u044c \u0436\u0438\u0442\u044c<\/s> \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Angular-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0430, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044d\u0442\u043e\u0442 \u0433\u0430\u0439\u0434 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0438 \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c.<\/p>\n<figure class=\"full-width\"><\/figure>\n<h2>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h2>\n<ol>\n<li>\n<p><a href=\"#wtf\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Angular Libs, \u0438 \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b?<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#first-step\">\u041f\u0435\u0440\u0432\u044b\u0435 \u0448\u0430\u0433\u0438.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#split\">\u0420\u0430\u0437\u0434\u0435\u043b\u044f\u0439 \u0438 \u0432\u043b\u0430\u0441\u0442\u0432\u0443\u0439.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#img\">\u0427\u0435\u043b\u043e\u0432\u0435\u043a \u0432 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u0445.<\/a><\/p>\n<\/li>\n<\/ol>\n<p>\u0417\u0430\u0431\u0435\u0433\u0430\u044f \u0432\u043f\u0435\u0440\u0451\u0434, \u0441\u0440\u0430\u0437\u0443 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0451 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u0431\u044a\u0451\u043c \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u044b\u0445\u043e\u0434\u0438\u043b \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c. \u0422\u0430\u043a \u0447\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u044b \u0447\u0438\u0442\u0430\u0435\u0442\u0435 \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u0441\u0442 \u0438\u0437 \u0441\u0435\u0440\u0438\u0438. \u041e\u043d \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0430\u0441\u0441\u0435\u0442\u044b \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445.\u00a0<\/p>\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043e\u0441\u0432\u0435\u0442\u0438\u0442\u044c: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a-\u0434\u043e\u043c\u0435\u043d\u043e\u0432, \u0431\u044b\u0441\u0442\u0440\u0443\u044e \u0441\u0431\u043e\u0440\u043a\u0443 \u043a\u043b\u043e\u043d\u043e\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u044e\u0449\u0438\u043c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c, \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d\u0430 \u0441 \u043d\u044e\u0430\u043d\u0441\u0430\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f angular-libs, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430. \u0410 \u0435\u0449\u0451 \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u043e\u043f\u044b\u0442\u043e\u043c, \u043a\u0430\u043a \u0432\u0441\u0451 \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c, \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u0441\u0438\u043b\u044c\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p><a class=\"anchor\" name=\"wtf\" id=\"wtf\"><\/a><\/p>\n<p><strong>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Angular Libs, \u0438 \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b?<\/strong><\/p>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438 \u044d\u0442\u043e \u2014 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0439 \u043d\u0430\u043c angular-\u043f\u0440\u043e\u0435\u043a\u0442. \u041e\u043d \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043c, \u0447\u0442\u043e \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e. \u0422\u0430\u043a\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.\u00a0<\/p>\n<p>\u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0447\u0430\u0441\u0442\u043e angular-libs \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u044b\u043d\u043e\u0441\u0430 \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u043d\u0435\u043a\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u0438\u043b\u0438 ui-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445: \u0432\u043f\u043e\u043b\u043d\u0435 \u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0442\u0430\u043a\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0430 \u043d\u0435 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0451 \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<p>\u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0442\u0430\u043a\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u044e\u0442\u0441\u044f \u0432 npm. \u041d\u043e \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u043e\u043d\u043e\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0449\u0438\u043c\u0441\u044f \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u043a\u0443\u0434\u0430-\u0442\u043e \u043d\u0430\u0448\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u0438\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u043d\u043e\u0433\u043e? \u0412\u0435\u0434\u044c \u0432 \u0438\u0442\u043e\u0433\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0435\u0441\u043b\u0430\u0431\u043e \u0437\u0430\u0431\u043b\u0443\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0430\u043c\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041e\u0431\u044b\u0447\u043d\u043e \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u043a\u0430\u043a\u043e\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 (\u0442\u0443\u0442 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u043b\u044e\u0431\u0438\u043c\u044b\u0439). \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 Angular \u044d\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0435\u043c\u0430\u043b\u043e\u0439 \u0441\u043d\u043e\u0440\u043e\u0432\u043a\u0438 \u0438 \u0442\u0430\u043d\u0446\u0435\u0432 \u0441 \u0431\u0443\u0431\u043d\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433 webpack\u2019\u0430 \u0438 \u043d\u0435 \u043b\u043e\u0432\u0438\u0442\u044c \u043f\u043e\u0434\u043e\u0437\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u044f \u0438 \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<p>\u0418 \u0432\u043e\u0442 \u0442\u0443\u0442 \u043d\u0430 \u0441\u0446\u0435\u043d\u0443 \u0432\u044b\u0445\u043e\u0434\u044f\u0442 Angular Libs! \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c \u0441\u0430\u043c\u043e\u0433\u043e Angular \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430.<\/p>\n<p><strong>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u043d\u0430\u0447\u043d\u0451\u043c<\/strong>, \u0445\u043e\u0447\u0443 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0440\u0435\u043c\u0430\u0440\u043a\u0443 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 Angular. \u0427\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c, \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/nodejs.org\/en\/about\/releases\/\"><u>active LTS \u0438\u043b\u0438 maintenance LTS<\/u><\/a> \u0432\u0435\u0440\u0441\u0438\u044f Node.js,<\/p>\n<\/li>\n<li>\n<p>\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 <a href=\"https:\/\/docs.npmjs.com\/about-npm\"><u>npm<\/u><\/a> \u0438\u043b\u0438 <a href=\"https:\/\/yarnpkg.com\/getting-started\"><u>yarn<\/u><\/a> (\u043d\u0438\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f yarn),\u00a0<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/angular.io\/cli\"><u>Angular CLI<\/u><\/a> (\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0430 \u0432\u0435\u0440\u0441\u0438\u044f Angular, \u043a\u0430\u043a\u0430\u044f \u0431\u044b\u043b\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u0438 \u0434\u043b\u044f cli; \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 cli \u0432\u0435\u0440\u0441\u0438\u0438 11).\u00a0<\/p>\n<\/li>\n<\/ul>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u044d\u0442\u0438\u043c\u0438 \u0448\u0430\u0433\u0430\u043c\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432 <a href=\"https:\/\/angular.io\/guide\/setup-local\"><u>\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043a Angular<\/u><\/a> \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435.<\/p>\n<p><strong>\u0412 \u0445\u043e\u0434\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u044b \u0441 \u0432\u0430\u043c\u0438:<\/strong>\u00a0<\/p>\n<ul>\n<li>\n<p>\u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0430\u0441\u0441\u0435\u0442\u043e\u0432 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0432 \u043d\u0435\u0451 \u0441\u0442\u0438\u043b\u0438, svg-\u0438\u043a\u043e\u043d\u043a\u0438 \u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c, \u0437\u0430\u0447\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a <code>assets<\/code> \u0438 <code>ui-lib-example<\/code> \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043d\u0430\u0443\u0447\u0438\u0442\u044c \u0438\u0445 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u0435\u0440\u0432\u044b\u0435 \u0448\u0430\u0433\u0438<\/h2>\n<p><a class=\"anchor\" name=\"first-step\" id=\"first-step\"><\/a><\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0434\u043d\u0438\u043c\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0435\u0440\u0432\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u041d\u0435\u0441\u0442\u0430\u0440\u0435\u044e\u0449\u0430\u044f \u043a\u043b\u0430\u0441\u0441\u0438\u043a\u0430:<\/p>\n<pre><code>ng new angular-libs-examples<\/code><\/pre>\n<p>\u0421\u0440\u0430\u0437\u0443 \u0441\u043e\u0433\u043b\u0430\u0448\u0430\u0435\u043c\u0441\u044f \u0441\u043e \u0441\u0442\u0440\u043e\u0433\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u0442\u0438\u043f\u043e\u0432 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0440\u043e\u0443\u0442\u0435\u0440. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u044f \u0432\u044b\u0431\u0440\u0430\u043b scss.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0430\u0448\u0443 \u043f\u0435\u0440\u0432\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c cli:<\/p>\n<pre><code class=\"bash\">ng generate library ui-lib-example<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0438\u043b\u0438 \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0413\u0443\u0433\u043b \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u2014 \u0442\u0443\u0442 \u0443\u0436 \u0440\u0435\u0448\u0430\u0439\u0442\u0435 \u0441\u0430\u043c\u0438. \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0441\u0442\u0441\u044f \u043d\u0430\u0448\u0430 \u043f\u0435\u0440\u0432\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043e \u043f\u0443\u0442\u0438 <strong>projects\/ui-lib-example<\/strong><\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u042f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0441\u0440\u0430\u0437\u0443 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u043f\u043a\u0443 <strong>projects <\/strong>\u0432 <strong>libs <\/strong>\u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430. \u041e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u0444\u0430\u0439\u043b\u0435 <strong>angular.json<\/strong>: \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u043c\u0435\u043d\u044f\u0435\u043c \u0432\u0441\u0435 \u043f\u0443\u0442\u0438 \u043a \u0444\u0430\u0439\u043b\u0430\u043c \u0441 <strong>\u2018project\/ui-lib-example\/&#8230;\u2019 <\/strong>\u043d\u0430 <strong>\u2018libs\/ui-lib-example\/&#8230;\u2019<\/strong>, \u043a\u0430\u043a \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0438\u0436\u0435:<\/p>\n<details class=\"spoiler\">\n<summary>angular.json<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"json\">\u2026 \"newProjectRoot\": \"libs\", \/\/ \u0432\u0441\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0437\u0436\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043f\u0430\u0434\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u0432 \u044d\u0442\u0443 \u043f\u0430\u043f\u043a\u0443  \u2026 \"ui-lib-example\": { \u2026   \"root\": \"libs\/ui-lib-example\",   \"architect\": {         \"build\": {           \"builder\": \"@angular-devkit\/build-angular:ng-packagr\",           \"options\": {             \"tsConfig\": \"libs\/ui-lib-example\/tsconfig.lib.json\",             \"project\": \"libs\/ui-lib-example\/ng-package.json\"           },           \"configurations\": {             \"production\": {               \"tsConfig\": \"libs\/ui-lib-example\/tsconfig.lib.prod.json\"             }           }         }, ... }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0449\u0451 \u0437\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u0432 \u043d\u0430\u0448 <strong>tsconfig.json, <\/strong>\u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <strong>paths<\/strong> \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c:<\/p>\n<pre><code class=\"json\">...   \"paths\": {       \"ui-lib-example\": [         \"dist\/ui-lib-example\/ui-lib-example\",         \"dist\/ui-lib-example\"       ]     } ...<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a, \u0438 \u0437\u0430\u043f\u0438\u0441\u044c \u043d\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c, \u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0435\u0451 \u0440\u0443\u043a\u0430\u043c\u0438.<\/p>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438, \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0431\u044b\u043b \u0441\u0440\u0430\u0437\u0443 \u0441\u043e\u0437\u0434\u0430\u043d \u0438 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0433\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0432 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0439\u0434\u0451\u043c \u0432 <strong>app.module.ts <\/strong>\u0438 \u0437\u0430\u0438\u043c\u043f\u043e\u0440\u0442\u0438\u043c <code>UiLibExampleModule<\/code>:<\/p>\n<details class=\"spoiler\">\n<summary>app.module.ts<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { UiLibExampleModule } from 'ui-lib-example';  @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     AppRoutingModule,      UiLibExampleModule,   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0448\u0430\u0431\u043b\u043e\u043d <strong>app.component.html <\/strong>\u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0414\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u044f \u0431\u044b \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u043b \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0432\u0441\u0451 \u0438\u0437 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<pre><code class=\"xml\">&lt;div>   &lt;lib-ui-lib-example>&lt;\/lib-ui-lib-example> &lt;\/div><\/code><\/pre>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u0412\u0435\u0434\u044c \u043a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0432 <strong>tsconfig.json, <\/strong>\u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u043f\u0430\u043f\u043a\u0443 <strong>dist<\/strong> \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0437\u0430\u0438\u043c\u043f\u043e\u0440\u0447\u0435\u043d\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439.\u00a0<\/p>\n<pre><code class=\"bash\">yarn build ui-lib-example<\/code><\/pre>\n<blockquote>\n<p><em>\u0412\u0430\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0432\u0435\u0434\u0451\u0442\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0432 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u0442\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u043d\u0443\u0436\u043d\u043e \u0441 \u0444\u043b\u0430\u0433\u043e\u043c<\/em><strong><em> &#8212;watch<\/em><\/strong><em>. \u0422\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0435\u0451 \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/em><\/p>\n<\/blockquote>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 <code>yarn start<\/code><strong> <\/strong>\u0438 \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440.<\/p>\n<figure class=\"bordered full-width\">\n<div><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/figcaption><\/div>\n<\/figure>\n<p><strong>\u0412\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0432\u044b \u0432\u043e\u0441\u0445\u0438\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b!<\/strong><\/p>\n<figure class=\"full-width\"><\/figure>\n<p><a href=\"https:\/\/gitlab.com\/angular-libs-examples\/example-1\"><u>\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442<\/u><\/a><\/p>\n<h2>\u0420\u0430\u0437\u0434\u0435\u043b\u044f\u0439 \u0438 \u0432\u043b\u0430\u0441\u0442\u0432\u0443\u0439<\/h2>\n<p><a class=\"anchor\" name=\"split\" id=\"split\"><\/a><\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u041c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0443 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0431\u044b \u043c\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0437\u0430\u0447\u0435\u043c.\u00a0<\/p>\n<p>\u0423 \u0441\u0435\u0431\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u041a\u0430\u0440\u0443\u043d\u044b \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u0430\u0441\u0441\u0435\u0442\u043e\u0432 (\u043e\u0431\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438, \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u044b, \u0438\u043a\u043e\u043d\u043a\u0438), <strong>core<\/strong> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, api \u0441\u0435\u0440\u0432\u0438\u0441, translate \u0441\u0435\u0440\u0432\u0438\u0441 \u0438 \u0442.\u0434.) \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443-\u0434\u043e\u043c\u0435\u043d \u2014 \u043e\u043d\u0430 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0431\u0430\u0437\u043e\u0439. \u041d\u0430\u0437\u043e\u0432\u0435\u043c \u0435\u0451 <strong>clients-library<\/strong>. \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0432\u0445\u043e\u0434\u044f\u0442 \u043d\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0432\u0437\u044f\u0442\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u0430 \u0446\u0435\u043b\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 api \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u0438 \u0441\u0442\u0435\u0439\u0442\u0430.<\/p>\n<p>\u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0437\u0432\u0443\u0447\u0438\u0442 \u043a\u0430\u043a \u0447\u0442\u043e-\u0442\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0435 \u0438 \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435, \u043e\u0434\u043d\u0430\u043a\u043e \u0443 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043b\u044e\u0441\u043e\u0432:\u00a0<\/p>\n<ul>\n<li>\n<p>\u043f\u0440\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u043c lazy-loading \u0438 tree-shaking \u043d\u0435 \u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u044f \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043b\u0430\u0431\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443;<\/p>\n<\/li>\n<li>\n<p>\u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<\/ul>\n<p>\u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u043f\u043e\u043c\u0438\u043c\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0431\u0430\u0437\u043e\u0439, \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0435\u0449\u0451 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0438\u0435\u0439. \u042d\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0434\u0440\u0443\u0433\u0438\u0435 \u043b\u044e\u0434\u0438 \u0431\u0443\u0434\u0443\u0442 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u041d\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u0441 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u043c\u0438.\u00a0 \u042d\u0442\u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0432 \u043d\u0430\u0448\u0435\u0439 <strong>clients-library, <\/strong>\u0438 \u043c\u044b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u0430\u043a\u0443\u044e \u0436\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443-\u0434\u043e\u043c\u0435\u043d \u0434\u043b\u044f \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0438\u0438 \u2014 <strong>phone-library<\/strong>. \u0412\u0441\u0451! \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0434\u0432\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: \u043e\u0434\u043d\u043e \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0431\u0430\u0437\u044b, \u0432\u0442\u043e\u0440\u043e\u0435 \u0434\u043b\u044f \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0438\u0438 \u0441 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u043c \u0447\u0430\u0441\u0442\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 clients-library.<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u043b\u0435\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0438 \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c.<\/p>\n<h4>\u0421\u0442\u0438\u043b\u0438<\/h4>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0430\u0441\u0441\u0435\u0442\u043e\u0432 \u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u043c \u0442\u0443\u0434\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, svg \u0438 \u0441\u0442\u0438\u043b\u0438. \u041f\u043e\u0435\u0445\u0430\u043b\u0438:<\/p>\n<pre><code class=\"bash\">ng generate library assets-library<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u043f\u0430\u043f\u043a\u0443 <strong>libs\/assets-library\/src\/lib<\/strong><em> <\/em>\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 <strong>libs\/assets-library\/src\/public-api.ts<\/strong> \u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0443<strong><em> <\/em><\/strong><code>export const a = 1;<\/code><em>. <\/em>\u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0447\u0442\u043e-\u0442\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0442\u044c\u0441\u044f, \u0438\u043d\u0430\u0447\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0435 \u0441\u043e\u0431\u0435\u0440\u0451\u0442\u0441\u044f.<\/p>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u0441\u043e \u0441\u0442\u0438\u043b\u0435\u0439. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 <strong>styles <\/strong>\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0435\u0451 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u043c \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0441\u0442\u0438\u043b\u0435\u0439, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0443, \u043e\u0444\u0444\u0441\u0435\u0442\u044b \u0438 \u0446\u0432\u0435\u0442\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 <strong>_core.scss,<\/strong> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u0447\u043a\u043e\u0439 \u0432\u0445\u043e\u0434\u0430 \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u0441\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b. \u0422\u0430\u043a \u043a\u0430\u043a \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e, \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 <a href=\"https:\/\/gitlab.com\/angular-libs-examples\/example-2\/-\/commit\/e8c84d706bc2557d8907be6b27a3ad74e5480184\"><u>\u043a\u043e\u043c\u043c\u0438\u0442<\/u><\/a>.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e Angular libs \u0441\u0430\u043c\u0438 \u043f\u043e \u0441\u0435\u0431\u0435 \u043d\u0435 \u0443\u043c\u0435\u044e\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438. \u0422\u0430\u043a \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u043d\u0430\u0448 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 <strong>package.json, <\/strong>\u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u0445 \u0432 \u0441\u0432\u043e\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f <s>\u0434\u0432\u0435 \u0431\u0443\u0442\u044b\u043b\u043a\u0438 \u0432\u043e\u0434\u043a\u0438<\/s> \u0442\u0430\u043a\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043a\u0430\u043a <a href=\"https:\/\/www.npmjs.com\/package\/cpx\"><u>cpx<\/u><\/a>.<\/p>\n<pre><code class=\"bash\">yarn add cpx --dev<\/code><\/pre>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0430\u0448 \u0441\u043a\u0440\u0438\u043f\u0442. \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u043d\u0430\u0448\u0438 \u0441\u0442\u0438\u043b\u0438 \u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0438\u0445 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<pre><code class=\"json\">\"cp-styles\": \"cpx \\\".\/libs\/assets-library\/src\/lib\/styles\/**\/*\\\"<\/code><\/pre>\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-381281","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/381281","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=381281"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/381281\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=381281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=381281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=381281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}