{"id":283960,"date":"2017-03-27T13:50:02","date_gmt":"2017-03-27T09:50:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=283960"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=283960","title":{"rendered":"\u0414\u0440\u0443\u0436\u0438\u043c Angular \u0441 Google (Angular Universal)"},"content":{"rendered":"<h1 id=\"druzhim-angular-s-google\">\u0414\u0440\u0443\u0436\u0438\u043c Angular \u0441 Google<\/h1>\n<p>  <\/p>\n<h2 id=\"google-nenavidit-spa\">Google \u043d\u0435\u043d\u0430\u0432\u0438\u0434\u0438\u0442 SPA<\/h2>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u044b, \u043c\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0435\u0431\u0435 \u0442\u044f\u0436\u0435\u043b\u044b\u0435 \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u044b, \u0440\u0435\u043d\u0434\u0440\u044f\u0449\u0438\u0435 \u0442\u044b\u0441\u044f\u0447\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u0435\u043a. \u041f\u0440\u0438\u0447\u0435\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0438 \u0442\u044b\u0441\u044f\u0447\u0438 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043e\u0434\u043d\u0430 \u0438\u0437 \u043f\u0440\u0438\u0447\u0438\u043d, \u043f\u043e\u0447\u0435\u043c\u0443 Single Page Applications \u043d\u0435 \u043f\u0440\u0438\u0436\u0438\u043b\u0438\u0441\u044c \u0432 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438. \u0414\u0430\u0436\u0435 \u043a\u0440\u0443\u043f\u043d\u0435\u0439\u0448\u0438\u0435 \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u044b \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043a\u0430\u043a \u043a\u0443\u0447\u0430 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u0414\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u044d\u0442\u043e \u043d\u0435\u0441\u043a\u043e\u043d\u0447\u0430\u0435\u043c\u044b\u0439 \u0446\u0438\u043a\u043b \u043a\u043b\u0438\u043a\u043e\u0432, \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0439 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. <a name=\"habracut\"><\/a><br \/>  \u041e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u044f\u0442\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u043c UX. \u041d\u043e \u043a\u0430\u043a \u043d\u0435 \u043f\u0440\u0438\u0441\u043a\u043e\u0440\u0431\u043d\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u0444\u043e\u0440\u0442 \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0432 \u0436\u0435\u0440\u0442\u0432\u0443 SEO \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438. \u0414\u043b\u044f \u0441\u0435\u043e\u0448\u043d\u0438\u043a\u0430 \u0441\u0430\u0439\u0442 \u043d\u0430 angular \u2013 \u044d\u0442\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u0430\u043c \u0442\u0440\u0443\u0434\u043d\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c.<br \/>  \u0414\u0440\u0443\u0433\u043e\u0439 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a <code>SPA<\/code> \u2014 \u044d\u0442\u043e \u043f\u0440\u0435\u0432\u044c\u044e \u0441\u0430\u0439\u0442\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0442\u043e\u043b\u044c\u043a\u043e-\u0447\u0442\u043e \u043a\u0443\u043f\u0438\u043b \u043d\u043e\u0432\u044b\u0439 \u0442\u0435\u043b\u0435\u0432\u0438\u0437\u043e\u0440 \u0432 \u043d\u0430\u0448\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0435 \u0438 \u0445\u043e\u0447\u0435\u0442 \u043f\u043e\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u0432\u043e\u0438\u043c \u0434\u0440\u0443\u0437\u044c\u044f\u043c \u0432 \u0441\u043e\u0446\u0441\u0435\u0442\u044f\u0445. \u041f\u0440\u0435\u0432\u044c\u044e \u0441\u0441\u044b\u043b\u043a\u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 <code>Angular<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<br \/>  <img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/cNApen1_8xeIBMwgVXSKkQVOcwhO1ueAVcYlmF_PqY6RP1XVdFmEO51qcyRypNNrHT8DqXm-RzWvg6hSRaorsKDXeHEUjaV6ifjCpmOxvKbbLl3I6ho3kIepQW0_lYZhfJ1O45qQ7nbtLD3lP2LFSZq1HLF60Fm5oEHy-092Wv94_oWiaRFM5vzOCdM-g7yWMkTEjvwrQbRwcNmKocHvidtYJUUVnJiSvj3jtgjnssuR1bloPKztKZ-tO-vQDrPbtlLsKMuv_VpTZnP6nhesQ5f8e0IQtL3QrTGIaY9TAy0aeqbW0-cgNjZS1XSG6Crp3Ux6iLbxLHU8591iid3kscL9uT4SAPRAyg4QPPWKup1L2ncTQASCvUQKFfagrL3ON_2oxCW1esiSFZhGOSQrUSEhoMBqmBzMdTlRxSeY8LHYMmnWdzIPyt59QasjMVszabpUdeM7QqQyIsnOTrNSx53X_hKl7g0oJA_2Y3KG5-HagzL66nheQSA-SkHZOz03e5IcXi9Qp1-6RNo6a7J4lZmQblYtyexT0LGWne8zW0p1xcwZz_rUvJuoQ3tYzDffp1Ao9t82fQEXUuRq4toqu28iRu6lMcGk0k9iWf0wl0eg4M37ipcr3YSJ3zfJ_JpYoILD6QkVu5V5NcHRx0g2oln-6YrNxTxrssx7eNcR=w495-h533-no\" alt=\"site preview\"\/><br \/>  <a href=\"http:\/\/nodeart.io\/ru\/?utm_source=habrahabr&amp;utm_medium=articles&amp;utm_campaign=angular-commerce\">\u041c\u044b<\/a> \u043b\u044e\u0431\u0438\u043c JS \u0438 Angular. \u041c\u044b \u0432\u0435\u0440\u0438\u043c, \u0447\u0442\u043e \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0439 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 UX \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 \u044d\u0442\u043e\u043c \u0441\u0442\u0435\u043a\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0435\u0448\u0438\u0442\u044c \u0432\u0441\u0435 \u0441\u043e\u043f\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u0412 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0441 <code>Angular Universal<\/code>. \u042d\u0442\u043e \u043c\u043e\u0434\u0443\u043b\u044c <code>Angular<\/code> \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0432\u043e\u0442 \u043e\u043d\u043e \u2013 \u0440\u0435\u0448\u0435\u043d\u0438\u0435! \u041d\u043e \u0440\u0430\u0434\u043e\u0441\u0442\u044c \u0431\u044b\u043b\u0430 \u043f\u0440\u0435\u0436\u0434\u0435\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u2014 \u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0441 \u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u043c\u0443 \u0434\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e.<br \/>  \u0412 \u0438\u0442\u043e\u0433\u0435, \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0439 <code>Angular 2<\/code>, \u0438 \u0436\u0434\u0430\u043b\u0438, \u043a\u043e\u0433\u0434\u0430 <code>Universal<\/code> \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d \u0441 <code>Angular Core<\/code>. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u043b\u0438\u044f\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0435\u0449\u0435 \u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e, \u0438 \u043f\u043e\u043a\u0430 \u043d\u0435 \u044f\u0441\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 (\u0438\u043b\u0438 \u043a\u0430\u043a \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c \u0441 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439), \u043e\u0434\u043d\u0430\u043a\u043e \u0441\u0430\u043c <code>Universal<\/code> \u0443\u0436\u0435 \u043f\u0435\u0440\u0435\u043a\u043e\u0447\u0435\u0432\u0430\u043b \u0432 github \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 <code>Angular<\/code>.<br \/>  \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u044d\u0442\u0438 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438, \u043d\u0430\u0448\u0430 \u0446\u0435\u043b\u044c \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u043e\u0439 \u2014 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 <code>Angular<\/code> \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u0434\u043b\u044f \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u0430\u043c\u0438. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430 \u0431\u043e\u043b\u0435\u0435 20 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0445 <a href=\"https:\/\/github.com\/NodeArt\/angular-commerce\">\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430<\/a>. \u041a\u0430\u043a \u0432 \u0438\u0442\u043e\u0433\u0435 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0443\u0442\u043e?<\/p>\n<p>  <\/p>\n<h2 id=\"chto-takoe-angular-universal\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Angular Universal<\/h2>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0431\u0441\u0443\u0434\u0438\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 <a href=\"https:\/\/github.com\/angular\/universal\">Angular Universal<\/a>. \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 <code>Angular 2<\/code> \u0438 \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434, \u0443\u0432\u0438\u0434\u0438\u043c \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u044d\u0442\u043e\u0433\u043e:<\/p>\n<p>  <\/p>\n<pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;   &lt;meta charset=&quot;utf-8&quot;&gt;   &lt;title&gt;Angular 2 app&lt;\/title&gt;   &lt;!-- base url --&gt;   &lt;base href=&quot;\/&quot;&gt; &lt;body&gt;   &lt;app&gt;&lt;\/app&gt; &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0424\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a Angular, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0441\u0442\u0438\u043b\u0438 \u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0442\u0435\u0433 .<br \/>  \u0414\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u0430 \u0431\u0438\u0437\u043d\u0435\u0441 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0439 \u043e\u0442 \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u0438 \u0441\u0430\u0439\u0442\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u0430\u043c\u0438 \u0432\u0430\u0436\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u0438 \u0431\u044b\u043b \u0432 \u0442\u043e\u043f\u0435 \u0432\u044b\u0434\u0430\u0447\u0438 google.<br \/>  \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c c \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u0435\u0439 <code>Angular Universal<\/code> \u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041d\u0430\u0448\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u00ab\u0431\u044d\u043a\u044d\u043d\u0434-\u0441\u0435\u0440\u0432\u0435\u0440\u0435\u00bb, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u043c \u043d\u0430 <code>Node.Js, .NET \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u043c \u044f\u0437\u044b\u043a\u0435<\/code>, \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u043c\u0438 \u0442\u0435\u0433\u0430\u043c\u0438 \u0432 \u043d\u0435\u0439 &#8212;<code>\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438, \u043c\u0435\u0442\u0430-\u0442\u0435\u0433\u0430\u043c\u0438 \u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c<\/code>.<br \/>  \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u0440\u0430\u0443\u043b\u0435\u0440\u044b \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u043e\u0432 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u044b \u043a \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u041c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 <code>Angular<\/code>, \u0430 <code>Universal<\/code> \u0437\u0430\u0431\u043e\u0442\u0438\u0442\u0441\u044f \u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435.<br \/>  \u0414\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0432\u0441\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435\u043f\u043b\u043e\u0445\u043e? \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u043e \u0434\u044c\u044f\u0432\u043e\u043b \u0441\u043a\u0440\u044b\u0442 \u0432 \u043c\u0435\u043b\u043e\u0447\u0430\u0445, \u043a\u0430\u043a \u0432\u0441\u0435\u0433\u0434\u0430.<br \/>  \u0418\u0442\u0430\u043a, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u043c\u0438 \u043a\u0430\u043c\u043d\u044f\u043c\u0438, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u043f\u0443\u0442\u0438.  <\/p>\n<h2 id=\"podvodnye-kamni-angular-universal\">\u041f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438 Angular Universal<\/h2>\n<p>  <\/p>\n<h3 id=\"ne-trogayte-dom\">\u041d\u0435 \u0442\u0440\u043e\u0433\u0430\u0439\u0442\u0435 DOM<\/h3>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430\u0448\u0435\u0433\u043e \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Universal<\/code>, \u043d\u0430\u043c \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0430\u0434\u0430\u0435\u0442 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0431\u0435\u0437 \u0432\u044b\u0432\u043e\u0434\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <a href=\"https:\/\/www.npmjs.com\/package\/@nodeart\/session-flow\">Session Flow component<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0435\u0441\u0441\u0438\u0438 (\u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u043b\u0438\u043a\u0438, \u0440\u0435\u0444\u0444\u0435\u0440\u0435\u0440, \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e\u0431 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0442.\u0434.). \u041f\u043e\u0441\u043b\u0435 \u043f\u043e\u0438\u0441\u043a\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0432 issues \u043d\u0430 <code>GitHub<\/code> \u043c\u044b \u043f\u043e\u043d\u044f\u043b\u0438, \u0447\u0442\u043e \u0432 <code>Universal<\/code> \u043d\u0435\u0442 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u043d\u0430\u0434 DOM.<br \/>  <code>DOM \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442<\/code>.<br \/>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u043a\u043b\u043e\u043d\u0438\u0440\u0443\u0435\u0442\u0435 <a href=\"https:\/\/github.com\/angular\/universal-starter\">\u044d\u0442\u043e\u0442 Angular Universal \u0441\u0442\u0430\u0440\u0442\u0435\u0440<\/a> \u0438 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0435 <a href=\"https:\/\/github.com\/angular\/universal-starter\/blob\/master\/src\/browser.module.ts\">browser.module.ts<\/a> \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 <code>providers<\/code> \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Universal \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0434\u0432\u0430<code>boolean \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/code>:<\/p>\n<p>  <\/p>\n<pre><code>providers: [     { provide: 'isBrowser', useValue: isBrowser },     { provide: 'isNode', useValue: isNode },     ...   ]<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u043d\u0435\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b, \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u0438\u043d\u0436\u0435\u043a\u0442\u0438\u0442\u044c \u0432 \u0441\u0432\u043e\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u044d\u0442\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0441\u0440\u0435\u0434\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u0430, \u0433\u0434\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 <code>DOM<\/code>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code>@Injectable() export class SessionFlow{     private reffererUrl : string;     constructor(@Inject('isBrowser') private isBrowser){         if(isBrowser){             this.reffererUrl = document.referrer;         }     } }<\/code><\/pre>\n<p>  <\/p>\n<p><code>Universal<\/code> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 <code>false<\/code>, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0441\u0435\u0440\u0432\u0435\u0440, \u0438 <code>true<\/code>, \u0435\u0441\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440. \u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u043f\u043e\u0437\u0436\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 <code>Universal<\/code> \u043f\u0435\u0440\u0435\u0441\u043c\u043e\u0442\u0440\u044f\u0442 \u044d\u0442\u0443 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u0438 \u043d\u0430\u043c \u043d\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u043e\u0431 \u044d\u0442\u043e\u043c.<br \/>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 DOM, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b <code>Angular<\/code> API, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a<code>ElementRef<\/code>, <code>Renderer<\/code> \u0438\u043b\u0438 <code>ViewContainer<\/code>.<\/p>\n<p>  <\/p>\n<h3 id=\"pravilnyy-routing\">\u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0440\u043e\u0443\u0442\u0438\u043d\u0433<\/h3>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u0440\u0430\u0436\u0430\u0435\u0442 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u043e\u043c.<br \/>  <code>\u0412\u0430\u0448 \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 Angular, \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0443 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/code><br \/>  \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u0442 \u0436\u0435 \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0447\u0442\u043e \u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0440\u043e\u0443\u0442\u044b \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435:<\/p>\n<p>  <\/p>\n<pre><code>    [       { path: '', redirectTo: '\/home', pathMatch: 'full' },       { path: 'products', component: ProductsComponent },       { path: 'product\/:id', component: ProductComponent}     ]<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b <code>server.routes.ts<\/code> \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0440\u043e\u0443\u0442\u043e\u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c:<\/p>\n<p>  <\/p>\n<pre><code>export const routes: string[] = [   'products',   'product\/:id' ];<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0440\u043e\u0443\u0442\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code>import { routes } from '.\/server.routes'; ... other server configuration app.get('\/', ngApp); routes.forEach(route =&gt; {   app.get(`\/${route}`, ngApp);   app.get(`\/${route}\/*`, ngApp); });<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"prerendering-startovoy-stranicy\">\u041f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h3>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u0430\u0436\u043d\u044b\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 <code>Angular Universal<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433. \u0418\u0437 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f <a href=\"https:\/\/blog.kissmetrics.com\/loading-time\/\">Kissmetrics<\/a> \u0441\u043b\u0435\u0434\u0443\u0435\u0442, \u0447\u0442\u043e 47% \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u043e\u0436\u0438\u0434\u0430\u044e\u0442, \u0447\u0442\u043e \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0437\u0430 2 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043c\u0435\u043d\u0435\u0435. \u0414\u043b\u044f \u043d\u0430\u0441 \u0431\u044b\u043b\u043e \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0432 <code>Universal<\/code> \u043a\u0430\u043a \u0440\u0430\u0437 \u043f\u0440\u043e \u043d\u0430\u0448\u0443 \u0437\u0430\u0434\u0430\u0447\u0443. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0438 \u043a\u0430\u043a \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<br \/>  \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 URL \u043d\u0430\u0448\u0435\u0433\u043e \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430, <code>Universal<\/code> \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u0443\u044e HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443 \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c, \u0430 \u0443\u0436\u0435 \u0437\u0430\u0442\u0435\u043c \u0437\u0430\u0442\u0435\u043c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f, <code>Universal<\/code> \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0435\u0442 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430\u0448\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c. \u0412\u044b \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0447\u043d\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0434\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f? \u041d\u0435 \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0439\u0442\u0435\u0441\u044c, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <a href=\"https:\/\/github.com\/angular\/preboot\">Preboot.js<\/a> \u0437\u0430\u043f\u0438\u0448\u0435\u0442 \u0432\u0441\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u0438\u0445 \u0443\u0436\u0435 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<br \/>  \u0427\u0442\u043e\u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 <code>preboot: true<\/code>:<\/p>\n<p>  <\/p>\n<pre><code>res.render('index', {       req,       res,       preboot: true,       baseUrl: '\/',       requestUrl: req.originalUrl,       originUrl: `http:\/\/localhost:${ app.get('port') }`     });   });<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"dobavlenie-meta-tegov\">\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0430-\u0442\u0435\u0433\u043e\u0432<\/h3>\n<p>  <\/p>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 SEO-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0430-\u0442\u0435\u0433\u043e\u0432 \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c <code>Product component<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430. \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430\u0445 \u0438\u0437 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043c\u0435\u0442\u0430-\u0442\u0435\u0433\u0438 \u0438 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0433\u043e \u0440\u043e\u0431\u043e\u0442\u0430.<br \/>  \u041a\u043e\u043c\u0430\u043d\u0434\u0430 <code>Angular Universal<\/code> \u0441\u043e\u0437\u0434\u0430\u043b\u0430 <a href=\"https:\/\/github.com\/angular\/universal-starter\/blob\/master\/src\/angular2-meta.ts\">\u0441\u0435\u0440\u0432\u0438\u0441 angular2-meta<\/a>, \u0447\u0442\u043e\u0431\u044b \u043b\u0435\u0433\u043a\u043e \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u0430-\u0442\u0435\u0433\u0430\u043c\u0438. \u0412\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043c\u0435\u0442\u0430-\u0441\u0435\u0440\u0432\u0438\u0441 \u0432 \u0432\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442 \u043c\u0435\u0442\u0430-\u0442\u0435\u0433\u0438 \u0432 \u0432\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443:<\/p>\n<p>  <\/p>\n<pre><code>import { Meta, MetaDefinition } from '.\/..\/..\/angular2-meta'; @Component({   selector: 'main-page',   templateUrl: '.\/main-page.component.html',   styleUrls: ['.\/main-page.component.scss'] }) export class MainPageComponent {   constructor(private metaService: Meta){     const name: MetaDefinition = {       name: 'application-name',       content: 'application-content'     };     metaService.addTags(name);   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 Angular \u044d\u0442\u043e\u0442 \u0441\u0435\u0440\u0432\u0438\u0441 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d \u0432<a href=\"https:\/\/www.npmjs.com\/package\/@angular\/platform-server\">@angular\/platform-server<\/a><\/p>\n<p>  <\/p>\n<h3 id=\"keshirovanie-dannyh\">\u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/h3>\n<p>  <\/p>\n<p><code>Angular Universal<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0432\u0430\u0448 XHR \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u0432\u0430\u0436\u0434\u044b: \u043e\u0434\u0438\u043d \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430.<br \/>  \u041d\u043e \u0437\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u0432\u0430\u0436\u0434\u044b? <a href=\"https:\/\/github.com\/gdi2290\">PatricJs<\/a> \u0441\u043e\u0437\u0434\u0430\u043b \u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c Http-\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u0437\u0430\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/github.com\/angular\/universal-starter\/blob\/master\/src\/%2Bapp\/shared\/model\/model.service.ts#L34-L50\">\u0437\u0434\u0435\u0441\u044c<\/a>. \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0437\u0430\u0438\u043d\u0436\u0435\u043a\u0442\u0435 <code>Model service<\/code> \u0438 \u0432\u044b\u0437\u043e\u0432\u0438\u0442\u0435 \u043c\u0435\u0442\u043e\u0434 <code>get<\/code> \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f http-\u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0441 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c:<\/p>\n<p>  <\/p>\n<pre><code>    public data;     constructor(public model: ModelService) {         this.universalInit();     }     universalInit() {         this.model.get('\/data.json').subscribe(data =&gt; {         this.data = data;         });     }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"vyvody\">\u0412\u044b\u0432\u043e\u0434\u044b<\/h2>\n<p>  <\/p>\n<p>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Angular Universal<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u0431\u043e\u043b\u0435\u0435 \u043d\u0435 \u043f\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u044f \u043e\u0431 \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u00abprendering\u00bb \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0430\u0439\u0442 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0443\u043b\u0443\u0447\u0448\u0430\u044f \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 (\u0447\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0434\u043b\u044f <code>Angular<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438\u0437-\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u0430\u043c\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438).<\/p>\n<\/p>\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:\/\/habrahabr.ru\/post\/324926\/\"> https:\/\/habrahabr.ru\/post\/324926\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<h1 id=\"druzhim-angular-s-google\">\u0414\u0440\u0443\u0436\u0438\u043c Angular \u0441 Google<\/h1>\n<p>  <\/p>\n<h2 id=\"google-nenavidit-spa\">Google \u043d\u0435\u043d\u0430\u0432\u0438\u0434\u0438\u0442 SPA<\/h2>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u044b, \u043c\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0435\u0431\u0435 \u0442\u044f\u0436\u0435\u043b\u044b\u0435 \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u044b, \u0440\u0435\u043d\u0434\u0440\u044f\u0449\u0438\u0435 \u0442\u044b\u0441\u044f\u0447\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u0435\u043a. \u041f\u0440\u0438\u0447\u0435\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0438 \u0442\u044b\u0441\u044f\u0447\u0438 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043e\u0434\u043d\u0430 \u0438\u0437 \u043f\u0440\u0438\u0447\u0438\u043d, \u043f\u043e\u0447\u0435\u043c\u0443 Single Page Applications \u043d\u0435 \u043f\u0440\u0438\u0436\u0438\u043b\u0438\u0441\u044c \u0432 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438. \u0414\u0430\u0436\u0435 \u043a\u0440\u0443\u043f\u043d\u0435\u0439\u0448\u0438\u0435 \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u044b \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043a\u0430\u043a \u043a\u0443\u0447\u0430 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u0414\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u044d\u0442\u043e \u043d\u0435\u0441\u043a\u043e\u043d\u0447\u0430\u0435\u043c\u044b\u0439 \u0446\u0438\u043a\u043b \u043a\u043b\u0438\u043a\u043e\u0432, \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0439 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-283960","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/283960","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=283960"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/283960\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=283960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=283960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=283960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}