{"id":319763,"date":"2021-03-17T15:01:11","date_gmt":"2021-03-17T15:01:11","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=319763"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=319763","title":{"rendered":"Angular Universal: \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f73\/6a6\/ad7\/f736a6ad7b93344917eff8462c8652d5.png\" width=\"4584\" height=\"2086\"><figcaption><\/figcaption><\/figure>\n<p><strong>Angular Universal<\/strong> \u2014 \u044d\u0442\u043e \u043e\u043f\u0435\u043d\u0441\u043e\u0440\u0441\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c @angular\/platform-server. \u041e\u043d \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c Server Side Rendering \u0432 Angular.<\/p>\n<p>Angular Universal \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u0432:<\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/github.com\/angular\/universal\/blob\/master\/modules\/express-engine\/README.md\">Express<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/angular\/universal\/blob\/master\/modules\/aspnetcore-engine\/README.md\">ASP.NET Core<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/angular\/universal\/blob\/master\/modules\/hapi-engine\/README.md\">hapi<\/a>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/github.com\/angular\/universal\/tree\/master\/modules\/socket-engine\">Socket Engine<\/a> \u2014 \u044d\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a-\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043a SSR-\u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043b\u044e\u0431\u043e\u0439 \u0431\u044d\u043a\u0435\u043d\u0434. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 Angular Universal \u0438 Express, \u0438 \u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<h2>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 Angular Universal<\/h2>\n<p>\u0414\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 Angular \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e DOM \u0434\u043b\u044f node.js \u2014 <a href=\"https:\/\/www.npmjs.com\/package\/domino\">domino.<\/a> \u041d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 GET-\u0437\u0430\u043f\u0440\u043e\u0441 domino \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u043c\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0443.<\/p>\n<p>\u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 Angular \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u043c\u0443\u0442\u0438\u0440\u0443\u0435\u0442 DOM, \u043d\u0430\u0445\u043e\u0434\u044f\u0441\u044c \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438. \u0417\u0430\u0442\u0435\u043c \u0434\u0432\u0438\u0436\u043e\u043a \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u0442 DOM \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u043e\u0442\u0434\u0430\u0435\u0442 \u044d\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0443. \u0421\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 HTML \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0442\u0432\u0435\u0442\u0430 \u043d\u0430 GET-\u0437\u0430\u043f\u0440\u043e\u0441. Angular-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043f\u043e\u0441\u043b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0440\u0430\u0437\u0440\u0443\u0448\u0430\u0435\u0442\u0441\u044f.<\/p>\n<h2>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b SSR \u0432 Angular<\/h2>\n<h3>1. \u0411\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h3>\n<h4>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f<\/h4>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u0438 \u0432\u0438\u0434\u0438\u0442 \u0431\u0435\u043b\u044b\u0439 \u044d\u043a\u0440\u0430\u043d. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0432\u0440\u0435\u043c\u044f \u0434\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0431\u0430\u0439\u0442\u0430 \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u0441\u044f \u043a \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0441\u0442\u0438. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0447\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043d\u043e \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u0439\u043c\u0430\u0443\u0442\u043e\u043c.<\/p>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442<\/h4>\n<p>\u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u043c \u0434\u043b\u044f Angular \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0435 SSR. \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u044c, \u0432 \u043a\u0430\u043a\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0434\u0430\u0434\u0438\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 Zone.js \u0438 ApplicationRef.<\/p>\n<p><strong>Zone.js<\/strong> \u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438. \u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e Angular \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0441\u0432\u043e\u044e \u0437\u043e\u043d\u0443 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0432 \u043d\u0435\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041f\u0440\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 \u0437\u043e\u043d\u0435 Angular \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439.<\/p>\n<p><strong>ApplicationRef<\/strong> \u2014 \u044d\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (<a href=\"https:\/\/angular.io\/api\/core\/ApplicationRef\">docs<\/a>). \u0418\u0437 \u0432\u0441\u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <a href=\"https:\/\/angular.io\/api\/core\/ApplicationRef#isStable\">ApplicationRef#isStable<\/a>. \u042d\u0442\u043e Observable, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u0443\u0441\u043a\u0430\u0435\u0442 boolean. isStable \u0440\u0430\u0432\u0435\u043d true \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0432 \u0437\u043e\u043d\u0435 Angular \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0430 false \u2014 \u043a\u043e\u0433\u0434\u0430 \u0442\u0430\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0435\u0441\u0442\u044c.<\/p>\n<p><strong>\u0418\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442, \u0447\u0442\u043e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0432 \u0437\u043e\u043d\u0435 Angular<\/strong><\/p>\n<p>\u0418\u0442\u0430\u043a, \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 <a href=\"https:\/\/github.com\/angular\/angular\/blob\/11.1.x\/packages\/platform-server\/src\/utils.ts#L43\">\u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a> Angular <a href=\"https:\/\/github.com\/angular\/angular\/blob\/11.1.x\/packages\/platform-server\/src\/utils.ts#L69\">\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/a> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 <a href=\"https:\/\/github.com\/angular\/angular\/blob\/11.1.x\/packages\/platform-server\/src\/utils.ts#L70\">\u0434\u0435\u0441\u0442\u0440\u043e\u0438\u0442 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443.<\/a> \u0410 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0434\u0435\u0441\u0442\u0440\u043e\u0438\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u0438. setInterval, rxjs.interval \u0438\u043b\u0438 \u043b\u044e\u0431\u0430\u044f \u0434\u0440\u0443\u0433\u0430\u044f \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u0430\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f, \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u0430\u044f \u0432 \u0437\u043e\u043d\u0435 Angular, \u0441\u0434\u0435\u043b\u0430\u044e\u0442 \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c. HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0442\u0430\u043a \u0436\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u0417\u0430\u0442\u044f\u043d\u0443\u0432\u0448\u0438\u0439\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043e\u0442\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<h4>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/h4>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0441 \u0434\u043e\u043b\u0433\u0438\u043c\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 timeout:<\/p>\n<pre><code class=\"javascript\">import { timeout, catchError } from 'rxjs\/operators'; import { of } from 'rxjs\/observable\/of';  http.get('https:\/\/example.com') \t.pipe( \t\ttimeout(2000), \t\tcatchError(e =&gt; of(null)) \t).subscribe()<\/code><\/pre>\n<p>\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0432\u044b\u0431\u0440\u043e\u0441\u0438\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u043a \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0435\u0441\u043b\u0438 \u043e\u0442\u0432\u0435\u0442 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d.<\/p>\n<p>\u0423 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043c\u0438\u043d\u0443\u0441\u0430:<\/p>\n<ul>\n<li>\n<p>\u043d\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u043f\u043e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u043c;<\/p>\n<\/li>\n<li>\n<p>\u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 timeout \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u043a \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c NgxSsrTimeoutModule \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 @ngx-ssr\/timeout. \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u043c\u043e\u0434\u0443\u043b\u044c \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u0430\u0439\u043c\u0430\u0443\u0442\u0430 \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u0432 AppServerModule, \u0442\u043e \u0442\u0430\u0439\u043c\u0430\u0443\u0442\u044b HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<pre><code class=\"javascript\">import { NgModule } from '@angular\/core'; import { \tServerModule, } from '@angular\/platform-server'; import { AppModule } from '.\/app.module'; import { AppComponent } from '.\/app.component'; import { NgxSsrTimeoutModule } from '@ngx-ssr\/timeout';  @NgModule({ \timports: [ \t\tAppModule, \t\tServerModule, \t\tNgxSsrTimeoutModule.forRoot({ timeout: 500 }), \t], \tbootstrap: [AppComponent], }) export class AppServerModule {}<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0438\u0437 \u0437\u043e\u043d\u044b Angular \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u0435\u0440\u0432\u0438\u0441 <a href=\"https:\/\/angular.io\/api\/core\/NgZone\">NgZone<\/a>.<\/p>\n<pre><code class=\"javascript\">import { Injectable, NgZone } from \"@angular\/core\";  @Injectable() export class SomeService { \tconstructor(private ngZone: NgZone){ \t\tthis.ngZone.runOutsideAngular(() =&gt; { \t\t\tinterval(1).subscribe(() =&gt; { \t\t\t\t\/\/ somo code \t\t\t}) \t\t}); \t} }<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 <a href=\"https:\/\/github.com\/TinkoffCreditSystems\/taiga-ui\/blob\/main\/projects\/cdk\/observables\/zone-free.ts#L30\">tuiZonefree<\/a> \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 @taiga-ui\/cdk:<\/p>\n<pre><code class=\"javascript\">import { Injectable, NgZone } from \"@angular\/core\"; import { tuiZonefree } from \"@taiga-ui\/cdk\";  @Injectable() export class SomeService { \tconstructor(private ngZone: NgZone){ \t\tinterval(1).pipe(tuiZonefree(ngZone)).subscribe() \t} } <\/code><\/pre>\n<p>\u041d\u043e \u0435\u0441\u0442\u044c \u043d\u044e\u0430\u043d\u0441. \u041b\u044e\u0431\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0443\u0448\u0435\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u043d\u0430\u0447\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0439\u043c\u0430\u0442\u044c \u0443\u0442\u0435\u0447\u043a\u0443 \u043f\u0430\u043c\u044f\u0442\u0438 (\u0441\u043c. \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u2116 7). \u0422\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 \u0437\u043e\u043d\u044b \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439.<\/p>\n<h2>2. \u041d\u0435\u0442 \u043a\u044d\u0448\u0430 \u00ab\u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb<\/h2>\n<h4>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f<\/h4>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u0430\u0439\u0442\u0430. \u0421\u0435\u0440\u0432\u0435\u0440 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0435\u0435, \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0432 \u043d\u0430 \u044d\u0442\u043e 2 \u0441\u0435\u043a\u0443\u043d\u0434\u044b. \u0417\u0430\u0442\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0445\u043e\u0434\u0438\u0442 \u0441 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0440\u0430\u0437\u0434\u0435\u043b. \u041f\u043e\u0442\u043e\u043c \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0438 \u0436\u0434\u0435\u0442 \u0442\u0435 \u0436\u0435 2 \u0441\u0435\u043a\u0443\u043d\u0434\u044b, \u0447\u0442\u043e \u0438 \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u0440\u0435\u043d\u0434\u0435\u0440 \u0433\u043b\u0430\u0432\u043d\u043e\u0439, \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e html \u0441 \u044d\u0442\u0438\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0443\u0436\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u0441\u044f. \u0418 \u0432 \u0442\u0435\u043e\u0440\u0438\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c html, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u0440\u0430\u043d\u0435\u0435.<\/p>\n<h4>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/h4>\n<p>\u041d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438 \u0434\u0432\u0435: in-memory cache \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 \u043a\u044d\u0448.<\/p>\n<p><strong>\u0411\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 \u043a\u044d\u0448<\/strong>. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u044d\u0448\u0430 \u0432\u0441\u0435 \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u043e\u0442\u0432\u0435\u0442\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0412 \u043d\u0438\u0445 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0440\u0435\u043c\u044f \u0436\u0438\u0437\u043d\u0438 \u043a\u044d\u0448\u0430 \u0438 \u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f:<\/p>\n<pre><code>Cache-Control: max-age=31536000<\/code><\/pre>\n<p>\u042d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u0434\u043b\u044f \u043d\u0435\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0437\u043e\u043d\u044b \u0438 \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0434\u043e\u043b\u0433\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u043c \u043a\u044d\u0448\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Caching\">\u0442\u0443\u0442<\/a>.<\/p>\n<p><strong>In-memory cache<\/strong>. In-memory cache \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0434\u043b\u044f \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f API-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 \u0441\u0430\u043c\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u041e\u0431\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0430\u043a\u0435\u0442 <code>@ngx-ssr\/cache<\/code>.<\/p>\n<p>\u0414\u043b\u044f \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f API-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043c\u043e\u0434\u0443\u043b\u044c NgxSsrCacheModule \u0432 AppModule.<\/p>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e maxSize \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u044d\u0448\u0430. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 50 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u044d\u0448 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 50 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 GET-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u044b\u0445 \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e maxAge \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u0440\u043e\u043a \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043a\u044d\u0448\u0430, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445.<\/p>\n<pre><code class=\"javascript\">import { BrowserModule } from '@angular\/platform-browser'; import { NgModule } from '@angular\/core'; import { AppComponent } from '.\/app.component'; import { NgxSsrCacheModule } from '@ngx-ssr\/cache'; import { environment } from '..\/environments\/environment';  @NgModule({ \tdeclarations: [AppComponent], \timports: [ \t\tBrowserModule, \t\tNgxSsrCacheModule.configLruCache({ maxAge: 10 * 60_000, maxSize: 50 }), \t], \tbootstrap: [AppComponent], }) export class AppModule {}<\/code><\/pre>\n<p>\u041c\u043e\u0436\u043d\u043e \u043f\u043e\u0439\u0442\u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c html.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0441\u0435 \u0432 \u0442\u043e\u043c \u0436\u0435 \u043f\u0430\u043a\u0435\u0442\u0435 @ngx-ssr\/cache \u0435\u0441\u0442\u044c \u0441\u0430\u0431\u043c\u043e\u0434\u0443\u043b\u044c @ngx-ssr\/cache\/express. \u041e\u043d \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e withCache. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u043d\u0430\u0434 \u0434\u0432\u0438\u0436\u043a\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0430.<\/p>\n<pre><code class=\"javascript\">import { ngExpressEngine } from '@nguniversal\/express-engine'; import { LRUCache } from '@ngx-ssr\/cache'; import { withCache } from '@ngx-ssr\/cache\/express';  server.engine( \t'html', \twithCache( \t\tnew LRUCache({ maxAge: 10 * 60_000, maxSize: 100 }), \t\tngExpressEngine({ \t\t\tbootstrap: AppServerModule, \t\t}) \t) );<\/code><\/pre>\n<h2>3. \u041e\u0448\u0438\u0431\u043a\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0442\u0438\u043f\u0430 ReferenceError: localStorage is not defined<\/h2>\n<h4>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f<\/h4>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a localStorage \u043f\u0440\u044f\u043c\u043e \u0432 \u0442\u0435\u043b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u0430. \u041e\u043d \u0434\u043e\u0441\u0442\u0430\u0435\u0442 \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u043a\u043b\u044e\u0447\u0443. \u041d\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439: ReferenceError: localStorage is not defined.<\/p>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442<\/h4>\n<p>\u041f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 Angular-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 API. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 node.js \u043d\u0435\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 document. \u041d\u043e \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u043e \u0442\u043e\u043a\u0435\u043d\u0443 DOCUMENT \u0447\u0435\u0440\u0435\u0437 DI.<\/p>\n<h4>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/h4>\n<p>\u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0435 API \u0447\u0435\u0440\u0435\u0437 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c DI. \u0427\u0435\u0440\u0435\u0437 DI \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u043b\u0438 \u0432\u044b\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0438\u0445 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f <a href=\"https:\/\/ng-web-apis.github.io\/\">\u043a Web APIs for Angular.<\/a><\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">import {Component, Inject, NgModule} from '@angular\/core'; import {LOCAL_STORAGE} from '@ng-web-apis\/common';  @Component({...}) export class SomeComponent { \tconstructor(@Inject(LOCAL_STORAGE) localStorage: Storage) { \t\tlocalStorage.getItem('key'); \t} }<\/code><\/pre>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0442\u043e\u043a\u0435\u043d LOCAL_STORAGE \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 <a href=\"https:\/\/github.com\/ng-web-apis\/common#tokens\">@ng-web-apis\/common<\/a>. \u041d\u043e \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u0438\u0437 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f. \u041f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 UNIVERSAL_LOCAL_STORAGE \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 <a href=\"https:\/\/github.com\/ng-web-apis\/universal\">@ng-web-apis\/universal<\/a> \u0432 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u044b AppServerModule \u2014 \u0438 \u043f\u043e \u0442\u043e\u043a\u0435\u043d LOCAL_STORAGE \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e localStorage \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<pre><code class=\"javascript\">import { NgModule } from '@angular\/core'; import { \tServerModule, } from '@angular\/platform-server'; import { AppModule } from '.\/app.module'; import { AppComponent } from '.\/app.component'; import { UNIVERSAL_LOCAL_STORAGE } from '@ngx-ssr\/timeout';  @NgModule({ \timports: [ \t\tAppModule, \t\tServerModule, \t], \tproviders: [UNIVERSAL_LOCAL_STORAGE], \tbootstrap: [AppComponent], }) export class AppServerModule {}<\/code><\/pre>\n<h2>4. \u041d\u0435\u0443\u0434\u043e\u0431\u043d\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u0433\u0438\u043a\u0438<\/h2>\n<h4>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">@Component({ \tselector: 'ram-root', \ttemplate: '&lt;some-\u0441omp *ngIf=\"isServer\"&gt;&lt;\/some-\u0441omp&gt;', \tstyleUrls: ['.\/app.component.less'], }) export class AppComponent { \tisServer = isPlatformServer(this.platformId); \t \tconstructor(@Inject(PLATFORM_ID) private platformId: Object){} }<\/code><\/pre>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c PLATFORM_ID, \u043f\u043e\u043d\u044f\u0442\u044c \u0446\u0435\u043b\u0435\u0432\u0443\u044e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043b\u0430\u0441\u0441\u0430. \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u043e\u0439 ngIf.<\/p>\n<h4>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/h4>\n<p>C \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u0438 DI \u043c\u043e\u0436\u043d\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0432\u0435\u0440\u043d\u0435\u043c \u0432 \u0442\u043e\u043a\u0435\u043d \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<pre><code class=\"javascript\">export const IS_SERVER_PLATFORM = new InjectionToken&lt;boolean&gt;('Is server?', { \tfactory() { \t\treturn isPlatformServer(inject(PLATFORM_ID)); \t}, });<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0442\u043e\u043a\u0435\u043d\u0430 IS_SERVER_PLATFORM \u0441 \u043e\u0434\u043d\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439: \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<pre><code class=\"javascript\">@Directive({ \tselector: '[ifIsServer]', }) export class IfIsServerDirective { \tconstructor( \t\t@Inject(IS_SERVER_PLATFORM) isServer: boolean, \t\ttemplateRef: TemplateRef&lt;any&gt;, \t\tviewContainer: ViewContainerRef \t) { \t\tif (isServer) { \t\t\tviewContainer.createEmbeddedView(templateRef); \t\t} \t} }<\/code><\/pre>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u043e\u0434 \u0434\u043b\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b IfIsBowser.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<pre><code class=\"javascript\">@Component({ \tselector: 'ram-root', \ttemplate: '&lt;some-\u0441omp *ifIsServer\"&gt;&lt;\/some-\u0441omp&gt;', \tstyleUrls: ['.\/app.component.less'], }) export class AppComponent {}<\/code><\/pre>\n<p>\u0418\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0443\u0434\u0430\u043b\u0435\u043d\u044b \u043b\u0438\u0448\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0428\u0430\u0431\u043b\u043e\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0442\u0430\u043b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435. \u0422\u0430\u043a\u0438\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0442\u0430\u0441\u043a\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u043c\u0435\u0436\u0434\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438, \u043c\u044b \u0441\u043e\u0431\u0440\u0430\u043b\u0438 \u0438\u0445 \u0432 \u043f\u0430\u043a\u0435\u0442 @ngx-ssr\/platform.<\/p>\n<h2>5. Memory leak<\/h2>\n<h4>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f<\/h4>\n<p>\u0421\u0435\u0440\u0432\u0438\u0441 \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 interval \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">import { Injectable, NgZone } from \"@angular\/core\"; import { interval } from \"rxjs\";  @Injectable() export class LocationService { \tconstructor(ngZone: NgZone) { \t\tngZone.runOutsideAngular(() =&gt; interval(1000).subscribe(() =&gt; { \t\t... \t\t})); \t} }<\/code><\/pre>\n<p>\u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0443\u0448\u0435\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043a\u043e\u043b\u0431\u044d\u043a, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u0432 subscribe, \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f. \u041a\u0430\u0436\u0434\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u0437\u0430 \u0441\u043e\u0431\u043e\u0439 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u0430. \u0410 \u044d\u0442\u043e \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0443\u0442\u0435\u0447\u043a\u0430 \u043f\u0430\u043c\u044f\u0442\u0438.<\/p>\n<h4>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/h4>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0445\u0443\u043a\u0430 ngOnDestoroy. \u041e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043b\u0438\u0448\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c \u0435\u0435 \u043f\u0440\u0438 \u0434\u0435\u0441\u0442\u0440\u043e\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u0430. \u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0442\u0435\u0445\u043d\u0438\u043a \u043f\u043e \u043e\u0442\u043f\u0438\u0441\u043a\u0435, \u043d\u043e \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043c \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u0443:<\/p>\n<pre><code class=\"javascript\">import { Injectable, NgZone, OnDestroy } from \"@angular\/core\"; import { interval, Subscription } from \"rxjs\";  @Injectable() export class LocationService implements OnDestroy { \tprivate subscription: Subscription;  \tconstructor(ngZone: NgZone) { \t\tthis.subscription = ngZone.runOutsideAngular(() =&gt; \t\t\tinterval(1000).subscribe(() =&gt; {}) \t\t); \t}  \tngOnDestroy(): void { \t\tthis.subscription.unsubscribe(); \t} }<\/code><\/pre>\n<h3>6. \u041d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u0435\u0440\u0432\u0430\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440<\/h3>\n<h4>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f<\/h4>\n<p>\u041c\u044b \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043e\u0448\u0438\u0431\u043a\u0443. \u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0438 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u0441\u043c\u044b\u0441\u043b\u0430. \u041d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u0440\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438 \u043e\u0442\u0434\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 index.html.<\/p>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442<\/h4>\n<p>\u0415\u0449\u0435 \u0440\u0430\u0437 \u043e\u0431\u0440\u0430\u0442\u0438\u043c\u0441\u044f <a href=\"https:\/\/github.com\/angular\/angular\/blob\/11.1.x\/packages\/platform-server\/src\/utils.ts#L43\">\u043a \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/a> \u041e\u043d \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438 \u0438\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u2116 1. \u041d\u043e \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u0440\u0435\u0440\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0435? \u0410 \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043b\u0438\u043c\u0438\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u043f\u043e\u043f\u044b\u0442\u043a\u0443 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435?<\/p>\n<h4>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/h4>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442.<\/p>\n<h2>7. \u041d\u0435\u0442 \u0440\u0435\u0433\u0438\u0434\u0440\u0430\u0446\u0438\u0438<\/h2>\n<h4>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f<\/h4>\n<p>\u041f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0430\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043d\u0430 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u043c\u0435\u043b\u044c\u043a\u0430\u0435\u0442 \u0431\u0435\u043b\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e.<\/p>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442<\/h4>\n<p>Angular \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u043e\u043d \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041e\u043d \u0432\u044b\u0440\u0435\u0437\u0430\u0435\u0442 \u0432\u0435\u0441\u044c html \u0438\u0437 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0437\u0430\u043d\u043e\u0432\u043e.<\/p>\n<h4>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/h4>\n<p>\u0415\u0433\u043e \u0432\u0441\u0435 \u0435\u0449\u0435 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442. \u041d\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u0434\u0430, \u0447\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432\u0441\u0435 \u0436\u0435 \u0431\u0443\u0434\u0435\u0442. \u0412 roadmap Angular Universal \u0435\u0441\u0442\u044c \u043f\u0443\u043d\u043a\u0442 \u00abFull client rehydration strategy that reuses DOM elements\/CSS rendered on the server\u00bb.<\/p>\n<h2>\u0412\u044b\u0432\u043e\u0434\u044b<\/h2>\n<p>\u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 Angular Universal \u2014 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0435 \u0438 \u0441\u0430\u043c\u043e\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u043e \u043c\u043d\u043e\u0433\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430.<\/p>\n<p>\u0412\u0441\u0435 \u0435\u0449\u0435 \u0435\u0441\u0442\u044c \u043d\u0435\u0440\u0435\u0448\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0438\u0437-\u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043b\u0438\u0447\u043d\u043e \u044f \u043d\u0435 \u043c\u043e\u0433\u0443 \u043d\u0430\u0437\u0432\u0430\u0442\u044c Angular Universal \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c, \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u043a \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0443. \u041e\u043d \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u0434\u043b\u044f \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u043e\u0432 \u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043d\u043e \u043d\u0430 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u043e\u0440\u043e\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0430\u0437\u043e\u0431\u044c\u0435\u0442\u0441\u044f \u043e \u043c\u043e\u0440\u0433\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0437-\u0437\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u0440\u0435\u0433\u0438\u0434\u0440\u0430\u0446\u0438\u0438.<\/p>\n<\/div>\n<p> \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\/tinkoff\/blog\/547520\/\"> https:\/\/habr.com\/ru\/company\/tinkoff\/blog\/547520\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><strong>Angular Universal<\/strong> \u2014 \u044d\u0442\u043e \u043e\u043f\u0435\u043d\u0441\u043e\u0440\u0441\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c @angular\/platform-server. \u041e\u043d \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c Server Side Rendering \u0432 Angular.<\/p>\n<p>Angular Universal \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u0432:<\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/github.com\/angular\/universal\/blob\/master\/modules\/express-engine\/README.md\">Express<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/angular\/universal\/blob\/master\/modules\/aspnetcore-engine\/README.md\">ASP.NET Core<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/angular\/universal\/blob\/master\/modules\/hapi-engine\/README.md\">hapi<\/a>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/github.com\/angular\/universal\/tree\/master\/modules\/socket-engine\">Socket Engine<\/a> \u2014 \u044d\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a-\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043a SSR-\u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043b\u044e\u0431\u043e\u0439 \u0431\u044d\u043a\u0435\u043d\u0434. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 Angular Universal \u0438 Express, \u0438 \u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<h2>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 Angular Universal<\/h2>\n<p>\u0414\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 Angular \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e DOM \u0434\u043b\u044f node.js \u2014 <a href=\"https:\/\/www.npmjs.com\/package\/domino\">domino.<\/a> \u041d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 GET-\u0437\u0430\u043f\u0440\u043e\u0441 domino \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u043c\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0443.<\/p>\n<p>\u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 Angular \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u043c\u0443\u0442\u0438\u0440\u0443\u0435\u0442 DOM, \u043d\u0430\u0445\u043e\u0434\u044f\u0441\u044c \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438. \u0417\u0430\u0442\u0435\u043c \u0434\u0432\u0438\u0436\u043e\u043a \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u0442 DOM \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u043e\u0442\u0434\u0430\u0435\u0442 \u044d\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0443. \u0421\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 HTML \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0442\u0432\u0435\u0442\u0430 \u043d\u0430 GET-\u0437\u0430\u043f\u0440\u043e\u0441. Angular-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043f\u043e\u0441\u043b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0440\u0430\u0437\u0440\u0443\u0448\u0430\u0435\u0442\u0441\u044f.<\/p>\n<h2>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b SSR \u0432 Angular<\/h2>\n<h3>1. \u0411\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h3>\n<h4>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f<\/h4>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u0438 \u0432\u0438\u0434\u0438\u0442 \u0431\u0435\u043b\u044b\u0439 \u044d\u043a\u0440\u0430\u043d. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0432\u0440\u0435\u043c\u044f \u0434\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0431\u0430\u0439\u0442\u0430 \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u0441\u044f \u043a \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0441\u0442\u0438. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0447\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043d\u043e \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u0439\u043c\u0430\u0443\u0442\u043e\u043c.<\/p>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442<\/h4>\n<p>\u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u043c \u0434\u043b\u044f Angular \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0435 SSR. \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u044c, \u0432 \u043a\u0430\u043a\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0434\u0430\u0434\u0438\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 Zone.js \u0438 ApplicationRef.<\/p>\n<p><strong>Zone.js<\/strong> \u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438. \u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e Angular \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0441\u0432\u043e\u044e \u0437\u043e\u043d\u0443 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0432 \u043d\u0435\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041f\u0440\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 \u0437\u043e\u043d\u0435 Angular \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439.<\/p>\n<p><strong>ApplicationRef<\/strong> \u2014 \u044d\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (<a href=\"https:\/\/angular.io\/api\/core\/ApplicationRef\">docs<\/a>). \u0418\u0437 \u0432\u0441\u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <a href=\"https:\/\/angular.io\/api\/core\/ApplicationRef#isStable\">ApplicationRef#isStable<\/a>. \u042d\u0442\u043e Observable, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u0443\u0441\u043a\u0430\u0435\u0442 boolean. isStable \u0440\u0430\u0432\u0435\u043d true \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0432 \u0437\u043e\u043d\u0435 Angular \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0430 false \u2014 \u043a\u043e\u0433\u0434\u0430 \u0442\u0430\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0435\u0441\u0442\u044c.<\/p>\n<p><strong>\u0418\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442, \u0447\u0442\u043e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0432 \u0437\u043e\u043d\u0435 Angular<\/strong><\/p>\n<p>\u0418\u0442\u0430\u043a, \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 <a href=\"https:\/\/github.com\/angular\/angular\/blob\/11.1.x\/packages\/platform-server\/src\/utils.ts#L43\">\u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a> Angular <a href=\"https:\/\/github.com\/angular\/angular\/blob\/11.1.x\/packages\/platform-server\/src\/utils.ts#L69\">\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/a> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 <a href=\"https:\/\/github.com\/angular\/angular\/blob\/11.1.x\/packages\/platform-server\/src\/utils.ts#L70\">\u0434\u0435\u0441\u0442\u0440\u043e\u0438\u0442 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443.<\/a> \u0410 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0434\u0435\u0441\u0442\u0440\u043e\u0438\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u0438. setInterval, rxjs.interval \u0438\u043b\u0438 \u043b\u044e\u0431\u0430\u044f \u0434\u0440\u0443\u0433\u0430\u044f \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u0430\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f, \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u0430\u044f \u0432 \u0437\u043e\u043d\u0435 Angular, \u0441\u0434\u0435\u043b\u0430\u044e\u0442 \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c. HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0442\u0430\u043a \u0436\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u0417\u0430\u0442\u044f\u043d\u0443\u0432\u0448\u0438\u0439\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043e\u0442\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<h4>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/h4>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0441 \u0434\u043e\u043b\u0433\u0438\u043c\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 timeout:<\/p>\n<pre><code class=\"javascript\">import { timeout, catchError } from 'rxjs\/operators'; import { of } from 'rxjs\/observable\/of';  http.get('https:\/\/example.com') \t.pipe( \t\ttimeout(2000), \t\tcatchError(e =&gt; of(null)) \t).subscribe()<\/code><\/pre>\n<p>\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0432\u044b\u0431\u0440\u043e\u0441\u0438\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u043a \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0435\u0441\u043b\u0438 \u043e\u0442\u0432\u0435\u0442 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d.<\/p>\n<p>\u0423 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043c\u0438\u043d\u0443\u0441\u0430:<\/p>\n<ul>\n<li>\n<p>\u043d\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u043f\u043e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u043c;<\/p>\n<\/li>\n<li>\n<p>\u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 timeout \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u043a \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c NgxSsrTimeoutModule \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 @ngx-ssr\/timeout. \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u043c\u043e\u0434\u0443\u043b\u044c \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u0430\u0439\u043c\u0430\u0443\u0442\u0430 \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u0432 AppServerModule, \u0442\u043e \u0442\u0430\u0439\u043c\u0430\u0443\u0442\u044b HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<pre><code class=\"javascript\">import { NgModule } from '@angular\/core'; import { \tServerModule, } from '@angular\/platform-server'; import { AppModule } from '.\/app.module'; import { AppComponent } from '.\/app.component'; import { NgxSsrTimeoutModule } from '@ngx-ssr\/timeout';  @NgModule({ \timports: [ \t\tAppModule, \t\tServerModule, \t\tNgxSsrTimeoutModule.forRoot({ timeout: 500 }), \t], \tbootstrap: [AppComponent], }) export class AppServerModule {}<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0438\u0437 \u0437\u043e\u043d\u044b Angular \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u0435\u0440\u0432\u0438\u0441 <a href=\"https:\/\/angular.io\/api\/core\/NgZone\">NgZone<\/a>.<\/p>\n<pre><code class=\"javascript\">import { Injectable, NgZone } from \"@angular\/core\";  @Injectable() export class SomeService { \tconstructor(private ngZone: NgZone){ \t\tthis.ngZone.runOutsideAngular(() =&gt; { \t\t\tinterval(1).subscribe(() =&gt; { \t\t\t\t\/\/ somo code \t\t\t}) \t\t}); \t} }<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 <a href=\"https:\/\/github.com\/TinkoffCreditSystems\/taiga-ui\/blob\/main\/projects\/cdk\/observables\/zone-free.ts#L30\">tuiZonefree<\/a> \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 @taiga-ui\/cdk:<\/p>\n<pre><code class=\"javascript\">import { Injectable, NgZone } from \"@angular\/core\"; import { tuiZonefree } from \"@taiga-ui\/cdk\";  @Injectable() export class SomeService { \tconstructor(private ngZone: NgZone){ \t\tinterval(1).pipe(tuiZonefree(ngZone)).subscribe() \t} } <\/code><\/pre>\n<p>\u041d\u043e \u0435\u0441\u0442\u044c \u043d\u044e\u0430\u043d\u0441. \u041b\u044e\u0431\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0443\u0448\u0435\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u043d\u0430\u0447\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0439\u043c\u0430\u0442\u044c \u0443\u0442\u0435\u0447\u043a\u0443 \u043f\u0430\u043c\u044f\u0442\u0438 (\u0441\u043c. \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u2116 7). \u0422\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 \u0437\u043e\u043d\u044b \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439.<\/p>\n<h2>2. \u041d\u0435\u0442 \u043a\u044d\u0448\u0430 \u00ab\u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb<\/h2>\n<h4>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f<\/h4>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u0430\u0439\u0442\u0430. \u0421\u0435\u0440\u0432\u0435\u0440 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0435\u0435, \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0432 \u043d\u0430 \u044d\u0442\u043e 2 \u0441\u0435\u043a\u0443\u043d\u0434\u044b. \u0417\u0430\u0442\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0445\u043e\u0434\u0438\u0442 \u0441 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0440\u0430\u0437\u0434\u0435\u043b. \u041f\u043e\u0442\u043e\u043c \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0438 \u0436\u0434\u0435\u0442 \u0442\u0435 \u0436\u0435 2 \u0441\u0435\u043a\u0443\u043d\u0434\u044b, \u0447\u0442\u043e \u0438 \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u0440\u0435\u043d\u0434\u0435\u0440 \u0433\u043b\u0430\u0432\u043d\u043e\u0439, \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e html \u0441 \u044d\u0442\u0438\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0443\u0436\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u0441\u044f. \u0418 \u0432 \u0442\u0435\u043e\u0440\u0438\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c html, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u0440\u0430\u043d\u0435\u0435.<\/p>\n<h4>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/h4>\n<p>\u041d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438 \u0434\u0432\u0435: in-memory cache \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 \u043a\u044d\u0448.<\/p>\n<p><strong>\u0411\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 \u043a\u044d\u0448<\/strong>. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u044d\u0448\u0430 \u0432\u0441\u0435 \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u043e\u0442\u0432\u0435\u0442\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0412 \u043d\u0438\u0445 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0440\u0435\u043c\u044f \u0436\u0438\u0437\u043d\u0438 \u043a\u044d\u0448\u0430 \u0438 \u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f:<\/p>\n<pre><code>Cache-Control: max-age=31536000<\/code><\/pre>\n<p>\u042d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u0434\u043b\u044f \u043d\u0435\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0437\u043e\u043d\u044b \u0438 \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0434\u043e\u043b\u0433\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u043c \u043a\u044d\u0448\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Caching\">\u0442\u0443\u0442<\/a>.<\/p>\n<p><strong>In-memory cache<\/strong>. In-memory cache \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0434\u043b\u044f \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f API-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 \u0441\u0430\u043c\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u041e\u0431\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0430\u043a\u0435\u0442 <code>@ngx-ssr\/cache<\/code>.<\/p>\n<p>\u0414\u043b\u044f \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f API-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043c\u043e\u0434\u0443\u043b\u044c NgxSsrCacheModule \u0432 AppModule.<\/p>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e maxSize \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u044d\u0448\u0430. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 50 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u044d\u0448 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 50 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 GET-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u044b\u0445 \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e maxAge \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u0440\u043e\u043a \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043a\u044d\u0448\u0430, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445.<\/p>\n<pre><code class=\"javascript\">import { BrowserModule } from '@angular\/platform-browser'; import { NgModule } from '@angular\/core'; import { AppComponent } from '.\/app.component'; import { NgxSsrCacheModule } from '@ngx-ssr\/cache'; import { environment } from '..\/environments\/environment';  @NgModule({ \tdeclarations: [AppComponent], \timports: [ \t\tBrowserModule, \t\tNgxSsrCacheModule.configLruCache({ maxAge: 10 * 60_000, maxSize: 50 }), \t], \tbootstrap: [AppComponent], }) export class AppModule {}<\/code><\/pre>\n<p>\u041c\u043e\u0436\u043d\u043e \u043f\u043e\u0439\u0442\u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c html.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0441\u0435 \u0432 \u0442\u043e\u043c \u0436\u0435 \u043f\u0430\u043a\u0435\u0442\u0435 @ngx-ssr\/cache \u0435\u0441\u0442\u044c \u0441\u0430\u0431\u043c\u043e\u0434\u0443\u043b\u044c @ngx-ssr\/cache\/express. \u041e\u043d \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e withCache. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u043d\u0430\u0434 \u0434\u0432\u0438\u0436\u043a\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0430.<\/p>\n<pre><code class=\"javascript\">import { ngExpressEngine } from '@nguniversal\/express-engine'; import { LRUCache } from '@ngx-ssr\/cache'; import { withCache } from '@ngx-ssr\/cache\/express';  server.engine( \t'html', \twithCache( \t\tnew LRUCache({ maxAge: 10 * 60_000, maxSize: 100 }), \t\tngExpressEngine({ \t\t\tbootstrap: AppServerModule, \t\t}) \t) );<\/code><\/pre>\n<h2>3. \u041e\u0448\u0438\u0431\u043a\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0442\u0438\u043f\u0430 ReferenceError: localStorage is not defined<\/h2>\n<h4>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f<\/h4>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a localStorage \u043f\u0440\u044f\u043c\u043e \u0432 \u0442\u0435\u043b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u0430. \u041e\u043d \u0434\u043e\u0441\u0442\u0430\u0435\u0442 \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u043a\u043b\u044e\u0447\u0443. \u041d\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439: ReferenceError: localStorage is not defined.<\/p>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442<\/h4>\n<p>\u041f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 Angular-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 API. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 node.js \u043d\u0435\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 document. \u041d\u043e \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u043e \u0442\u043e\u043a\u0435\u043d\u0443 DOCUMENT \u0447\u0435\u0440\u0435\u0437 DI.<\/p>\n<h4>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/h4>\n<p>\u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0435 API \u0447\u0435\u0440\u0435\u0437 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c DI. \u0427\u0435\u0440\u0435\u0437 DI \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u043b\u0438 \u0432\u044b\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0438\u0445 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f <a href=\"https:\/\/ng-web-apis.github.io\/\">\u043a Web APIs for Angular.<\/a><\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">import {Component, Inject, NgModule} from '@angular\/core'; import {LOCAL_STORAGE} from '@ng-web-apis\/common';  @Component({...}) export class SomeComponent { \tconstructor(@Inject(LOCAL_STORAGE) localStorage: Storage) { \t\tlocalStorage.getItem('key'); \t} }<\/code><\/pre>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0442\u043e\u043a\u0435\u043d LOCAL_STORAGE \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 <a href=\"https:\/\/github.com\/ng-web-apis\/common#tokens\">@ng-web-apis\/common<\/a>. \u041d\u043e \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u0438\u0437 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f. \u041f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 UNIVERSAL_LOCAL_STORAGE \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 <a href=\"https:\/\/github.com\/ng-web-apis\/universal\">@ng-web-apis\/universal<\/a> \u0432 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u044b AppServerModule \u2014 \u0438 \u043f\u043e \u0442\u043e\u043a\u0435\u043d LOCAL_STORAGE \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e localStorage \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<pre><code class=\"javascript\">import { NgModule } from '@angular\/core'; import { \tServerModule, } from '@angular\/platform-server'; import { AppModule } from '.\/app.module'; import { AppComponent } from '.\/app.component'; import { UNIVERSAL_LOCAL_STORAGE } from '@ngx-ssr\/timeout';  @NgModule({ \timports: [ \t\tAppModule, \t\tServerModule, \t], \tproviders: [UNIVERSAL_LOCAL_STORAGE], \tbootstrap: [AppComponent], }) export class AppServerModule {}<\/code><\/pre>\n<h2>4. \u041d\u0435\u0443\u0434\u043e\u0431\u043d\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u0433\u0438\u043a\u0438<\/h2>\n<h4>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">@Component({ \tselector: 'ram-root', \ttemplate: '&lt;some-\u0441omp *ngIf=\"isServer\"&gt;&lt;\/some-\u0441omp&gt;', \tstyleUrls: ['.\/app.component.less'], }) export class AppComponent { \tisServer = isPlatformServer(this.platformId); \t \tconstructor(@Inject(PLATFORM_ID) private platformId: Object){} }<\/code><\/pre>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c PLATFORM_ID, \u043f\u043e\u043d\u044f\u0442\u044c \u0446\u0435\u043b\u0435\u0432\u0443\u044e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043b\u0430\u0441\u0441\u0430. \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u043e\u0439 ngIf.<\/p>\n<h4>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/h4>\n<p>C \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u0438 DI \u043c\u043e\u0436\u043d\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0432\u0435\u0440\u043d\u0435\u043c \u0432 \u0442\u043e\u043a\u0435\u043d \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<pre><code class=\"javascript\">export const IS_SERVER_PLATFORM = new InjectionToken&lt;boolean&gt;('Is server?', { \tfactory() { \t\treturn<\/code><\/pre>\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-319763","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/319763","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=319763"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/319763\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=319763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=319763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=319763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}