{"id":331533,"date":"2022-04-05T15:00:36","date_gmt":"2022-04-05T15:00:36","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=331533"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=331533","title":{"rendered":"<span>Micro Frontend \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 Angular<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\u0412 \u043d\u0430\u0448\u0435 \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u0431\u043e\u043b\u0435\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043d\u0435\u0439 \u0438 \u0441\u043b\u043e\u0436\u043d\u0435\u0439. \u0422\u0430\u043a\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u044b \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0445 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0434\u043e\u0431\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  \u041f\u043e \u043c\u0435\u0440\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u044e\u0442\u0441\u044f, \u0442\u0440\u0435\u0431\u0443\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u0438 \u00ab\u043d\u0430 \u043b\u0435\u0442\u0443\u00bb \u0438 \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 Angular, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0432\u0441\u0435 \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  \u041c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u2014 \u044d\u0442\u043e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u043a \u043d\u0430\u0431\u043e\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438. \u041a\u0430\u0436\u0434\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0438\u043b\u0438 \u0446\u0435\u043b\u0438. \u0422\u0430\u043a\u0430\u044f \u043a\u0440\u043e\u0441\u0441-\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0432\u0435\u0440\u0445\u0443 \u0434\u043e\u043d\u0438\u0437\u0443, \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.<\/p>\n<h3>\u041f\u043b\u044e\u0441\u044b \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b<\/h3>\n<p>  <\/p>\n<ul>\n<li><b>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f CI \/CD. <\/b>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e, \u044d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 CI\/CD. \u0422\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u044b, \u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u043e\u0431\u043e \u0432\u0441\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u0440\u0438 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f. \u0415\u0441\u043b\u0438 \u0432 \u043a\u043e\u0434\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0435\u0441\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0430, CI\/CD \u043f\u0440\u0435\u0440\u0432\u0435\u0442 \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u0431\u043e\u0440\u043a\u0438.<br \/>  \u0413\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u041c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0440\u0430\u0431\u043e\u0442\u0430\u044f \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/li>\n<li><b>\u0415\u0434\u0438\u043d\u0430\u044f \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c.<\/b> \u041a\u0430\u0436\u0434\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u0434\u0430 \u043d\u0430 100% \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/li>\n<li><b>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/b> \u041c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445.<\/li>\n<li><b>\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0430\u0433\u043d\u043e\u0441\u0442\u0438\u0446\u0438\u0437\u043c.<\/b> \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 (React, Vue, Angular \u0438 \u0442.\u0434.).<\/li>\n<li><b>\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u043e\u0440\u043e\u0433 \u0432\u0445\u043e\u0434\u0430 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443.<\/b> \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u043b\u0435\u0433\u0447\u0435 \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c, \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u0447\u0435\u043c \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u043d\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0441 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u043a\u043e\u0434\u0430.<\/li>\n<\/ul>\n<p>  <a name=\"habracut\"><\/a>  <\/p>\n<h3>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h3>\n<p>  \u041c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043e\u0439, \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 \u043d\u0438\u0436\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/post_images\/d1a\/065\/5c6\/d1a0655c6a91e6ab560712d542733274.jpg\" alt=\"image\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d1a\/065\/5c6\/d1a0655c6a91e6ab560712d542733274.jpg\" data-blurred=\"true\"\/><\/p>\n<h3>\u041c\u043e\u0434\u0443\u043b\u044c Header &amp; Footer<\/h3>\n<p>  \u042d\u0442\u0430 \u0447\u0430\u0441\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 2 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043a \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0443. \u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c angular builder, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 webpack.<\/p>\n<p>  <code>ng new layout <br \/>  npm i --save-dev ngx-build-plus<\/code><\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c webpack.config.js \u0438 webpack.prod.config.js \u0444\u0430\u0439\u043b\u044b \u0432 \u043a\u043e\u0440\u043d\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">\/\/ webpack.config.js const webpack = require(\"webpack\"); const ModuleFederationPlugin =require(\"webpack\/lib\/container\/ModuleFederationPlugin\");  module.exports = {   output: {     publicPath: \"http:\/\/localhost:4205\/\",     uniqueName: \"layout\",   },   optimization: {     runtimeChunk: false,   },   plugins: [     new ModuleFederationPlugin({       name: \"layout\",       library: { type: \"var\", name: \"layout\" },       filename: \"remoteEntry.js\",       exposes: {         Header: '.\/src\/app\/modules\/layout\/header\/header.component.ts',         Footer: '.\/src\/app\/modules\/layout\/footer\/footer.component.ts'       },       shared: {         \"@angular\/core\": { singleton: true, requiredVersion:'auto' },         \"@angular\/common\": { singleton: true, requiredVersion:'auto' },         \"@angular\/router\": { singleton: true, requiredVersion:'auto' },       },     }),   ], };  \/\/ webpack.prod.config.js module.exports = require(\".\/webpack.config\"); <\/code><\/pre>\n<p>  \u041c\u043e\u0434\u0443\u043b\u044c Federation \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0449\u0438\u0435 \u043f\u0430\u043a\u0435\u0442\u044b npm \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430\u043c\u0438. \u042d\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0441 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439.<\/p>\n<p>  \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0435 \u0438\u043b\u0438 \u0431\u043e\u043b\u0435\u0435 \u0432\u0435\u0440\u0441\u0438\u0439 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430. \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0434\u0435\u0441\u044c: <a href=\"https:\/\/webpack.js.org\/concepts\/module-federation\/\"><u>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u043b\u0430\u0433\u0438\u043d<\/u><\/a>.<\/p>\n<p>  \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c exposes \u0440\u0430\u0437\u0434\u0435\u043b, \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e 2 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<br \/>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0432 angular.json \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0430 ngx-build-plus:<\/p>\n<pre><code class=\"json\">{   ...   \"projects\": {     \"layout\": {       \"projectType\": \"application\",       \"schematics\": {         \"@schematics\/angular:component\": {           \"style\": \"scss\"         },         \"@schematics\/angular:application\": {           \"strict\": true         }       },       \"root\": \"\",       \"sourceRoot\": \"src\",       \"prefix\": \"app\",       \"architect\": {         \"build\": {           \"builder\": \"ngx-build-plus:browser\",           \"options\": {             \"outputPath\": \"dist\/layout\",             \"index\": \"src\/index.html\",             \"main\": \"src\/main.ts\",             \"polyfills\": \"src\/polyfills.ts\",             \"tsConfig\": \"tsconfig.app.json\",             \"inlineStyleLanguage\": \"scss\",             \"assets\": [               \"src\/favicon.ico\",               \"src\/assets\"             ],             \"styles\": [               \"src\/styles.scss\"             ],             \"scripts\": [],             \"extraWebpackConfig\": \"webpack.config.js\"           },           \"configurations\": {             \"production\": {               \"budgets\": [                 {                   \"type\": \"initial\",                   \"maximumWarning\": \"500kb\",                   \"maximumError\": \"1mb\"                 },                 {                   \"type\": \"anyComponentStyle\",                   \"maximumWarning\": \"2kb\",                   \"maximumError\": \"4kb\"                 }               ],               \"extraWebpackConfig\": \"webpack.prod.config.js\",               \"fileReplacements\": [                 {                   \"replace\": \"src\/environments\/environment.ts\",                   \"with\": \"src\/environments\/environment.prod.ts\"                 }               ],               \"outputHashing\": \"all\"             },             \"development\": {               \"buildOptimizer\": false,               \"optimization\": false,               \"vendorChunk\": true,               \"extractLicenses\": false,               \"sourceMap\": true,               \"namedChunks\": true             }           },           \"defaultConfiguration\": \"production\"         },         \"serve\": {           \"builder\": \"ngx-build-plus:dev-server\",           \"configurations\": {             \"production\": {               \"browserTarget\": \"layout:build:production\"             },             \"development\": {               \"browserTarget\": \"layout:build:development\",               \"extraWebpackConfig\": \"webpack.config.js\",               \"port\": 4205             }           },           \"defaultConfiguration\": \"development\"         },         \"extract-i18n\": {           \"builder\": \"@angular-devkit\/build-angular:extract-i18n\",           \"options\": {             \"browserTarget\": \"layout:build\"           }         },         \"test\": {           \"builder\": \"ngx-build-plus:karma\",           \"options\": {             \"main\": \"src\/test.ts\",             \"polyfills\": \"src\/polyfills.ts\",             \"tsConfig\": \"tsconfig.spec.json\",             \"karmaConfig\": \"karma.conf.js\",             \"inlineStyleLanguage\": \"scss\",             \"assets\": [               \"src\/favicon.ico\",               \"src\/assets\"             ],             \"styles\": [               \"src\/styles.scss\"             ],             \"scripts\": [],             \"extraWebpackConfig\": \"webpack.config.js\"           }         }       }     }   },   \"defaultProject\": \"layout\" }<\/code><\/pre>\n<h3>\u041c\u043e\u0434\u0443\u043b\u044c Register Page<\/h3>\n<p>  \u042d\u0442\u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u0445\u043e\u0434\u0430 \/ \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0439 webpack.<\/p>\n<p>  <code>ng new registerPage<br \/>  npm i --save-dev ngx-build-plus<br \/>  <\/code><br \/>  \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u043c webpack.config.js \u0438 webpack.prod.config.js<\/p>\n<pre><code class=\"javascript\">\/\/ webpack.config.js const webpack = require(\"webpack\");  const ModuleFederationPlugin = require(\"webpack\/lib\/container\/ModuleFederationPlugin\");  module.exports = {   output: {     publicPath: \"http:\/\/localhost:4201\/\",     uniqueName: \"register\",   },   optimization: {     runtimeChunk: false,   },   plugins: [     new ModuleFederationPlugin({       name: \"register\",       library: { type: \"var\", name: \"register\" },       filename: \"remoteEntry.js\",       exposes: {         RegisterPageModule:           \".\/src\/app\/modules\/register\/register-page.module.ts\",       },       shared: {         \"@angular\/core\": { singleton: true, requiredVersion: 'auto' },         \"@angular\/common\": { singleton: true, requiredVersion: 'auto' },         \"@angular\/router\": { singleton: true, requiredVersion: 'auto' },       },     }),   ], };   \/\/ webpack.prod.config.js  module.exports = require(\".\/webpack.config\"); <\/code><\/pre>\n<p>  \u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0434\u0443\u043b\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043a\u0430\u043a \u043c\u043e\u0434\u0443\u043b\u044c \u0441 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439.<\/p>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c builder \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0430 ngx-build-plus \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 webpack \u0432 \u0444\u0430\u0439\u043b angular.json (\u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f).<\/p>\n<h3>\u041c\u043e\u0434\u0443\u043b\u044c Dashboard<\/h3>\n<p>  \u042d\u0442\u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0422\u0430\u043a \u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e \u0441\u0432\u043e\u0438\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c webpack:<\/p>\n<pre><code class=\"javascript\">\/\/ webpack.config.js const webpack = require(\"webpack\"); const ModuleFederationPlugin = require(\"webpack\/lib\/container\/ModuleFederationPlugin\");  module.exports = {   output: {     publicPath: \"http:\/\/localhost:4204\/\",     uniqueName: \"dashboard\",   },   optimization: {     runtimeChunk: false,   },   plugins: [     new ModuleFederationPlugin({       name: \"dashboard\",       library: { type: \"var\", name: \"dashboard\" },       filename: \"remoteEntry.js\",       exposes: {         DashboardModule:           \".\/src\/app\/modules\/dashboard\/dashboard.module.ts\",       },       shared: {         \"@angular\/core\": { singleton: true, requiredVersion:'auto'  },         \"@angular\/common\": { singleton: true, requiredVersion:'auto'  },         \"@angular\/router\": { singleton: true, requiredVersion:'auto'  },       },     }),   ], }; <\/code><\/pre>\n<p>  <\/p>\n<h3>\u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Shell<\/h3>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0432\u0441\u0435 \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u0432 \u043e\u0434\u043d\u043e, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Shell.<\/p>\n<p>  <code>ng new shell <br \/>  npm i --save-dev ngx-build-plus<br \/>  <\/code><br \/>  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 webpack:<\/p>\n<pre><code class=\"javascript\">\/\/ webpack.config.js const webpack = require(\"webpack\"); const ModuleFederationPlugin = require(\"webpack\/lib\/container\/ModuleFederationPlugin\");  module.exports = {   output: {     publicPath: \"http:\/\/localhost:4200\/\",     uniqueName: \"shell\",   },   optimization: {     runtimeChunk: false,   },   plugins: [     new ModuleFederationPlugin({       shared: {         \"@angular\/core\": { eager: true, singleton: true },         \"@angular\/common\": { eager: true, singleton: true },         \"@angular\/router\": { eager: true, singleton: true },       },     }),   ], };<\/code><\/pre>\n<p>  \u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 webpack \u0432 \u0444\u0430\u0439\u043b\u0435 angular.json.<\/p>\n<p>  \u0412 environment\/environment.ts \u043c\u044b \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u0432\u0441\u0435 \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b (\u0434\u043b\u044f \u0432\u0435\u0440\u0441\u0438\u0438 prod \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0430\u0434\u0440\u0435\u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0445\u043e\u0441\u0442\u0430 \u043d\u0430 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044b\u0439 \u043e\u0431\u0449\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u0430\u0434\u0440\u0435\u0441):<\/p>\n<pre><code class=\"javascript\">export const environment = {   production: false,    microfrontends: {     dashboard: {       remoteEntry: 'http:\/\/localhost:4204\/remoteEntry.js',       remoteName: 'dashboard',       exposedModule: ['DashboardModule'],     },      layout: {       remoteEntry: 'http:\/\/localhost:4205\/remoteEntry.js',       remoteName: 'layout',       exposedModule: ['Header', 'Footer'],     }   } };<\/code><\/pre>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439.<\/p>\n<pre><code class=\"javascript\">\/\/ src\/app\/utils\/federation-utils.ts type Scope = unknown; type Factory = () => any; interface Container {   init(shareScope: Scope): void;   get(module: string): Factory; } declare const __webpack_init_sharing__: (shareScope: string) => Promise&lt;void>; declare const __webpack_share_scopes__: { default: Scope }; const moduleMap: Record&lt;string, boolean> = {}; function loadRemoteEntry(remoteEntry: string): Promise&lt;void> {   return new Promise&lt;void>((resolve, reject) => {     if (moduleMap[remoteEntry]) {       return resolve();     }     const script = document.createElement('script');     script.src = remoteEntry;     script.onerror = reject;     script.onload = () => {       moduleMap[remoteEntry] = true;       resolve(); \/\/ window is the global namespace     };     document.body.append(script);   }); } async function lookupExposedModule&lt;T>(   remoteName: string,   exposedModule: string ): Promise&lt;T> {   \/\/ Initializes the share scope. This fills it with known provided modules from this build and all remotes   await __webpack_init_sharing__('default');   const container = window[remoteName] as Container;    \/\/ Initialize the container, it may provide shared modules   await container.init(__webpack_share_scopes__.default);   const factory = await container.get(exposedModule);   const Module = factory();   return Module as T; }  export interface LoadRemoteModuleOptions {   remoteEntry: string;   remoteName: string;   exposedModule: string; }  export async function loadRemoteModule&lt;T = any>(   options: LoadRemoteModuleOptions ): Promise&lt;T> {   await loadRemoteEntry(options.remoteEntry);   return lookupExposedModule&lt;T>(     options.remoteName,     options.exposedModule   ); }<\/code><\/pre>\n<p>  \u0438 \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 lazy loaded \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432:<\/p>\n<pre><code class=\"javascript\">\/\/ src\/app\/utils\/route-utils.ts import { loadRemoteModule } from '.\/federation-utils'; import { Routes } from '@angular\/router'; import { APP_ROUTES } from '..\/app.routes'; import { Microfrontend } from '..\/core\/services\/microfrontends\/microfrontend.types';  export function buildRoutes(options: Microfrontend[]): Routes {   const lazyRoutes: Routes = options.map((o) => ({     path: o.routePath,     loadChildren: () => loadRemoteModule(o).then((m) => m[o.ngModuleName]),     canActivate: o.canActivate,     pathMatch: 'full'   }));    return [     ...APP_ROUTES,     ...lazyRoutes   ]; }<\/code><\/pre>\n<p>  \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u043d\u0434 \u0441\u0435\u0440\u0432\u0438\u0441:<\/p>\n<pre><code class=\"javascript\">\/\/ src\/app\/core\/services\/microfrontends\/microfrontend.service.ts import { Injectable } from '@angular\/core'; import { Router } from '@angular\/router'; import { MICROFRONTEND_ROUTES } from 'src\/app\/app.routes'; import { buildRoutes } from 'src\/app\/utils\/route-utils';  @Injectable({ providedIn: 'root' }) export class MicrofrontendService {   constructor(private router: Router) {}    \/*    * Initialize is called on app startup to load the initial list of    * remote microfrontends and configure them within the router    *\/   initialise(): Promise&lt;void> {     return new Promise&lt;void>((resolve) => {       this.router.resetConfig(buildRoutes(MICROFRONTEND_ROUTES));       return resolve();     });   } }<\/code><\/pre>\n<p>  \u0424\u0430\u0439\u043b \u0434\u043b\u044f \u0442\u0438\u043f\u0430:<\/p>\n<pre><code class=\"javascript\">\/\/ src\/app\/core\/services\/microfrontends\/microfrontend.types.ts import { LoadRemoteModuleOptions } from \"src\/app\/utils\/federation-utils\";  export type Microfrontend = LoadRemoteModuleOptions &amp; {   displayName: string;   routePath: string;   ngModuleName: string;   canActivate?: any[] };<\/code><\/pre>\n<p>  \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u0434\u044b \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430\u043c:<\/p>\n<pre><code class=\"javascript\">\/\/ src\/app\/app.routes.ts import { Routes } from '@angular\/router'; import { LoggedOnlyGuard } from '.\/core\/guards\/logged-only.guard'; import { UnloggedOnlyGuard } from '.\/core\/guards\/unlogged-only.guard'; import { Microfrontend } from '.\/core\/services\/microfrontends\/microfrontend.types'; import { environment } from 'src\/environments\/environment';  export const APP_ROUTES: Routes = [];  export const MICROFRONTEND_ROUTES: Microfrontend[] = [   {     ...environment.microfrontends.dashboard,     exposedModule: environment.microfrontends.dashboard.exposedModule[0],      \/\/ For Routing, enabling us to ngFor over the microfrontends and dynamically create links for the routes     displayName: 'Dashboard',     routePath: '',     ngModuleName: 'DashboardModule',     canActivate: [LoggedOnlyGuard]   },   {     ...environment.microfrontends.registerPage,     exposedModule: environment.microfrontends.registerPage.exposedModule[0],      displayName: 'Register',     routePath: 'signup',     ngModuleName: 'RegisterPageModule',     canActivate: [UnloggedOnlyGuard]   } ] <\/code><\/pre>\n<p>  \u0421\u0435\u0440\u0432\u0438\u0441 \u0432 \u043d\u0430\u0448\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438:<\/p>\n<pre><code class=\"javascript\">\/\/ src\/app\/app.module.ts import { APP_INITIALIZER, NgModule } from '@angular\/core'; import { BrowserModule } from '@angular\/platform-browser'; import { RouterModule } from '@angular\/router';  import { AppRoutingModule } from '.\/app-routing.module'; import { AppComponent } from '.\/app.component'; import { APP_ROUTES } from '.\/app.routes'; import { LoaderComponent } from '.\/core\/components\/loader\/loader.component'; import { NavbarComponent } from '.\/core\/components\/navbar\/navbar.component'; import { MicrofrontendService } from '.\/core\/services\/microfrontends\/microfrontend.service';  export function initializeApp(   mfService: MicrofrontendService ): () => Promise&lt;void> {   return () => mfService.initialise(); }  @NgModule({   declarations: [     AppComponent,     NavbarComponent,     LoaderComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     RouterModule.forRoot(APP_ROUTES, { relativeLinkResolution: 'legacy' }),   ],   providers: [     MicrofrontendService,     {       provide: APP_INITIALIZER,       useFactory: initializeApp,       multi: true,       deps: [MicrofrontendService],     },   ],   bootstrap: [AppComponent] }) export class AppModule { } <\/code><\/pre>\n<p>   \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c Footer \u0438 Header \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c app \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<pre><code class=\"xml\">\/\/ src\/app\/app.component.html &lt;main>   &lt;header #header>&lt;\/header>   &lt;div class=\"content\">     &lt;app-navbar [isLogged]=\"auth.isLogged\">&lt;\/app-navbar>     &lt;div class=\"page-content\">       &lt;router-outlet *ngIf=\"!loadingRouteConfig else loading\">&lt;\/router-outlet>       &lt;ng-template #loading>         &lt;app-loader>&lt;\/app-loader>       &lt;\/ng-template>     &lt;\/div>   &lt;\/div>   &lt;footer #footer>&lt;\/footer> &lt;\/main> <\/code><\/pre>\n<p>  \u0430 \u0444\u0430\u0439\u043b src\/app\/app.component.ts \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">import {   ViewContainerRef,   Component,   ComponentFactoryResolver,   OnInit,   AfterViewInit,   Injector,   ViewChild } from '@angular\/core'; import { RouteConfigLoadEnd, RouteConfigLoadStart, Router } from '@angular\/router'; import { loadRemoteModule } from '.\/utils\/federation-utils'; import { environment } from 'src\/environments\/environment';  @Component({   selector: 'app-root',   templateUrl: '.\/app.component.html',   styleUrls: ['.\/app.component.scss'] }) export class AppComponent implements AfterViewInit, OnInit{   @ViewChild('header', { read: ViewContainerRef, static: true })   headerContainer!: ViewContainerRef;    @ViewChild('footer', { read: ViewContainerRef, static: true })   footerContainer!: ViewContainerRef;    loadingRouteConfig = false;    constructor(private injector: Injector,     private resolver: ComponentFactoryResolver,     private router: Router     ) {}    ngOnInit() {     this.router.events.subscribe(event => {       if (event instanceof RouteConfigLoadStart) {           this.loadingRouteConfig = true;       } else if (event instanceof RouteConfigLoadEnd) {           this.loadingRouteConfig = false;       }     });   }    ngAfterViewInit(): void {     \/\/ load header     loadRemoteModule({       ...environment.microfrontends.layout,       exposedModule: environment.microfrontends.layout.exposedModule[0],     })       .then(module => {         const factory = this.resolver.resolveComponentFactory(module.HeaderComponent);         this.headerContainer?.createComponent(factory, undefined, this.injector);       });      \/\/ load footer     loadRemoteModule({       ...environment.microfrontends.layout,       exposedModule: environment.microfrontends.layout.exposedModule[1],     })       .then(module => {         const factory = this.resolver.resolveComponentFactory(module.FooterComponent);         this.footerContainer?.createComponent(factory, undefined, this.injector);       });   } } <\/code><\/pre>\n<p>  <\/p>\n<h3>\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430\u043c\u0438<\/h3>\n<p>  \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043e\u0431\u043c\u0435\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430\u043c\u0438. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u0438. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f.<\/p>\n<p>  \u041e\u0434\u0438\u043d \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">const busEvent = new CustomEvent('app-event-bus', {         bubbles: true,         detail: {           eventType: 'auth-register',           customData: 'some data here'         }       });       dispatchEvent(busEvent);<\/code><\/pre>\n<p>  \u0414\u0440\u0443\u0433\u0438\u0435 \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435:<\/p>\n<pre><code class=\"javascript\">onEventHandler(e: CustomEvent) {     if (e.detail.eventType === 'auth-register') {       const isLogged = Boolean(localStorage.getItem('token'));       this.auth.isLogged = isLogged;       if (isLogged) {         this.router.navigate(['\/']);       } else {         this.router.navigate(['\/signup']);       }     }   }    ngOnInit() {     this.$eventBus = fromEvent&lt;CustomEvent>(window, 'app-event-bus').subscribe((e) =>   this.onEventHandler(e));    \/\/ ...   }<\/code><\/pre>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>  \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u0432 \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0430\u0435\u0442 \u0432\u0441\u0435 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0438 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441 \u0442\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043a\u043e\u0434\u043e\u0432\u044b\u0435 \u0431\u0430\u0437\u044b \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438. \u041a\u0440\u0430\u0439\u043d\u0435 \u0432\u0430\u0436\u043d\u043e \u0443\u043c\u0435\u0442\u044c \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u044c \u0447\u0435\u0442\u043a\u0438\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u0435\u0436\u0434\u0443 \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438 \u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0445. \u041e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c, \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0438 \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <a href=\"https:\/\/github.com\/incora-dev\/Microfrontend-Angular\">\u0412\u0441\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043d\u0430 github<br \/>  <\/a><\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/auriga\/blog\/659199\/\"> https:\/\/habr.com\/ru\/company\/auriga\/blog\/659199\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\u0412 \u043d\u0430\u0448\u0435 \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u0431\u043e\u043b\u0435\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043d\u0435\u0439 \u0438 \u0441\u043b\u043e\u0436\u043d\u0435\u0439. \u0422\u0430\u043a\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u044b \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0445 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0434\u043e\u0431\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  \u041f\u043e \u043c\u0435\u0440\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u044e\u0442\u0441\u044f, \u0442\u0440\u0435\u0431\u0443\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u0438 \u00ab\u043d\u0430 \u043b\u0435\u0442\u0443\u00bb \u0438 \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 Angular, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0432\u0441\u0435 \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  \u041c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u2014 \u044d\u0442\u043e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u043a \u043d\u0430\u0431\u043e\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438. \u041a\u0430\u0436\u0434\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0438\u043b\u0438 \u0446\u0435\u043b\u0438. \u0422\u0430\u043a\u0430\u044f \u043a\u0440\u043e\u0441\u0441-\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0432\u0435\u0440\u0445\u0443 \u0434\u043e\u043d\u0438\u0437\u0443, \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.<\/p>\n<h3>\u041f\u043b\u044e\u0441\u044b \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b<\/h3>\n<p>  <\/p>\n<ul>\n<li><b>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f CI \/CD. <\/b>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e, \u044d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 CI\/CD. \u0422\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u044b, \u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u043e\u0431\u043e \u0432\u0441\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u0440\u0438 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f. \u0415\u0441\u043b\u0438 \u0432 \u043a\u043e\u0434\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0435\u0441\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0430, CI\/CD \u043f\u0440\u0435\u0440\u0432\u0435\u0442 \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u0431\u043e\u0440\u043a\u0438.<br \/>  \u0413\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u041c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0440\u0430\u0431\u043e\u0442\u0430\u044f \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/li>\n<li><b>\u0415\u0434\u0438\u043d\u0430\u044f \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c.<\/b> \u041a\u0430\u0436\u0434\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u0434\u0430 \u043d\u0430 100% \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/li>\n<li><b>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/b> \u041c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445.<\/li>\n<li><b>\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0430\u0433\u043d\u043e\u0441\u0442\u0438\u0446\u0438\u0437\u043c.<\/b> \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043c\u0438\u043a\u0440\u043e-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 (React, Vue, Angular \u0438 \u0442.\u0434.).<\/li>\n<li><b>\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u043e\u0440\u043e\u0433 \u0432\u0445\u043e\u0434\u0430 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443.<\/b> \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u043b\u0435\u0433\u0447\u0435 \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c, \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u0447\u0435\u043c \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u043d\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0441 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u043a\u043e\u0434\u0430.<\/li>\n<\/ul>\n<p>  <\/p>\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-331533","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/331533","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=331533"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/331533\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=331533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=331533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=331533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}