{"id":290599,"date":"2018-10-10T17:35:02","date_gmt":"2018-10-10T13:35:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=290599"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=290599","title":{"rendered":"\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u043f\u043e Angular"},"content":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\">\n<p>\u041f\u0440\u043e\u0448\u043b\u043e \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441 \u0432\u044b\u0445\u043e\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e Angular. \u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043e. \u041e\u0442 &quot;getting started&quot; \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0443\u0436\u0435 \u043f\u0435\u0440\u0435\u0448\u043b\u043e \u043a \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u044d\u0442\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u043e\u0431\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\/\u0438\u043b\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043b\u0438\u0431\u043e \u0443\u0436\u0435 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0441\u0432\u043e\u0438 style guides \u0438 best practice \u043b\u0438\u0431\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0447\u0443\u0436\u0438\u0435. \u041d\u043e \u0432 \u0442\u043e\u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043a\u043e\u0434\u0430 \u043d\u0430 Angular, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u044d\u0442\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0438\/\u0438\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u0432 \u0441\u0442\u0438\u043b\u0435 AngularJS.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Angular, \u043a\u043e\u0442\u043e\u0440\u044b\u0435, \u043f\u043e \u0441\u043a\u0440\u043e\u043c\u043d\u043e\u043c\u0443 \u043c\u043d\u0435\u043d\u0438\u044e \u0430\u0432\u0442\u043e\u0440\u0430, \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u044b \u0432 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430\u0445 \u0438\u043b\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438. <a name=\"habracut\"><\/a> \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 &quot;\u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u043e\u0432&quot; (Interceptors) HTTP \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Route Guards \u0434\u043b\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c. \u0414\u0430\u043d\u044b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e RxJS \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044e \u043a\u043e\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0447\u0438\u0449\u0435 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435. \u0410\u0432\u0442\u043e\u0440 \u043d\u0430\u0434\u0435\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 Angular, \u043d\u043e \u0438 \u043e\u043f\u044b\u0442\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c.<\/p>\n<p>  <\/p>\n<h2 id=\"rabota-s-http\">\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 HTTP<\/h2>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u043b\u044e\u0431\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e Web \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043e\u043a\u0440\u0443\u0433 HTTP \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443. \u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Angular \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 HTTP \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<h3 id=\"ispolzuem-interceptors\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Interceptors<\/h3>\n<p>  <\/p>\n<p>\u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d \u043f\u043e\u043f\u0430\u0434\u0435\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440. \u0418\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0442\u0432\u0435\u0442. \u041d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 Angular 4.3 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043d\u043e\u0432\u044b\u0439 HttpClient. \u0412 \u043d\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e interceptors (\u0414\u0430, \u0438\u0445 \u043d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u0432\u0435\u0440\u043d\u0443\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0432\u0435\u0440\u0441\u0438\u0438 4.3!, \u044d\u0442\u043e \u0431\u044b\u043b\u0430 \u043e\u0434\u043d\u0430 \u0438\u0437 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0445 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 AngularJs, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u0435\u0440\u0435\u043a\u043e\u0447\u0435\u0432\u0430\u043b\u0438 \u0432 Angular). \u042d\u0442\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u0435 \u041f\u041e \u043c\u0435\u0436\u0434\u0443 http-api \u0438 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0447\u0430\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043f\u043e\u0434\u043b\u0438\u043d\u043d\u043e\u0441\u0442\u0438 \u0432 \u0437\u0430\u043f\u0440\u043e\u0441. \u042d\u0442\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c interceptors \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e:<\/p>\n<p>  <\/p>\n<pre><code>import { Injectable } from &quot;@angular\/core&quot;; import { Observable } from &quot;rxjs\/Observable&quot;; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from @angular\/common\/http&quot;;  @Injectable() export class JWTInterceptor implements HttpInterceptor {   intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt;   {     req = req.clone({       setHeaders: {         authorization: localStorage.getItem(&quot;token&quot;)       }     });      return next.handle(req);   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u043e\u0432, \u043e\u043d\u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u0446\u0435\u043f\u043e\u0447\u043a\u0443. \u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u0438\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c Angular. \u0412\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u043c\u044b \u043d\u0435\u0441\u0435\u043c \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0437\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u0443. \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 handle \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0446\u0435\u043f\u043e\u0447\u043a\u0435, \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043c. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c interceptor:<\/p>\n<p>  <\/p>\n<pre><code>import { BrowserModule } from &quot;@angular\/platform-browser&quot;; import { NgModule } from &quot;@angular\/core&quot;;  import { AppComponent } from &quot;.\/app.component&quot;; import { HttpClientModule } from &quot;@angular\/common\/http&quot;; import { HTTP_INTERCEPTORS } from &quot;@angular\/common\/http&quot;;  @NgModule({   declarations: [AppComponent],   imports: [BrowserModule, HttpClientModule],   providers: [     {       provide: HTTP_INTERCEPTORS,       useClass: JWTInterceptor,       multi: true     }   ],   bootstrap: [AppComponent] }) export class AppModule {}<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f interceptors \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430.<\/p>\n<p>  <\/p>\n<h3 id=\"otslezhivanie-progressa\">\u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430<\/h3>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 <code>HttpClient<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0445\u043e\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0444\u0430\u0439\u043b, \u0442\u043e, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0430\u0442\u044c \u043e \u0445\u043e\u0434\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>reportProgress<\/code> \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>HttpRequest<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>true<\/code>. \u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434:<\/p>\n<p>  <\/p>\n<pre><code>import { Observable } from &quot;rxjs\/Observable&quot;; import { HttpClient } from &quot;@angular\/common\/http&quot;; import { Injectable } from &quot;@angular\/core&quot;; import { HttpRequest } from &quot;@angular\/common\/http&quot;; import { Subject } from &quot;rxjs\/Subject&quot;; import { HttpEventType } from &quot;@angular\/common\/http&quot;; import { HttpResponse } from &quot;@angular\/common\/http&quot;;  @Injectable() export class FileUploadService {   constructor(private http: HttpClient) {}    public post(url: string, file: File): Observable&lt;number&gt; {     var subject = new Subject&lt;number&gt;();     const req = new HttpRequest(&quot;POST&quot;, url, file, {       reportProgress: true     });     this.httpClient.request(req).subscribe(event =&gt; {       if (event.type === HttpEventType.UploadProgress) {         const percent = Math.round((100 * event.loaded) \/ event.total);         subject.next(percent);       } else if (event instanceof HttpResponse) {         subject.complete();       }     });     return subject.asObservable();   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 post \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044f (<code>Observable<\/code>), \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0445\u043e\u0434 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0412\u0441\u0435 \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e, \u044d\u0442\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0445\u043e\u0434 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435.<\/p>\n<p>  <\/p>\n<h2 id=\"marshrutizaciya-ispolzuem-route-guard\">\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Route Guard<\/h2>\n<p>  <\/p>\n<p>\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0435\u0448\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0443\u0442\u0438, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439. \u0412 \u044d\u0442\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0432 Angular \u0435\u0441\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u0441\u0435\u0440\u0432\u0438\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c route guard. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c JWT. \u0423\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441\u0435\u0440\u0432\u0438\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d \u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u0432\u0438\u0434\u0435:<\/p>\n<p>  <\/p>\n<pre><code>@Injectable() export class AuthService {   constructor(public jwtHelper: JwtHelperService) {}    public isAuthenticated(): boolean {     const token = localStorage.getItem(&quot;token&quot;);     \/\/ \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043d\u0435 \u0438\u0441\u0442\u0435\u043a \u043b\u0438 \u0441\u0440\u043e\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u0430     return !this.jwtHelper.isTokenExpired(token);   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 route guard \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <code>CanActivate<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>canActivate<\/code>.<\/p>\n<p>  <\/p>\n<pre><code>@Injectable() export class AuthGuardService implements CanActivate {   constructor(public auth: AuthService, public router: Router) {}   canActivate(): boolean {     if (!this.auth.isAuthenticated()) {       this.router.navigate([&quot;login&quot;]);       return false;     }     return true;   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <code>AuthGuardService<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435 <code>AuthService<\/code> \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041c\u0435\u0442\u043e\u0434 <code>canActivate<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u0438 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 Route Guard \u043a \u043b\u044e\u0431\u043e\u043c\u0443 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0443 \u0438\u043b\u0438 \u043f\u0443\u0442\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0438 <code>Routes<\/code> \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0438\u0441, \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 <code>CanActivate<\/code> \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0432 \u0441\u0435\u043a\u0446\u0438\u0438 <code>canActivate<\/code>:<\/p>\n<p>  <\/p>\n<pre><code>export const ROUTES: Routes = [   { path: &quot;&quot;, component: HomeComponent },   {     path: &quot;profile&quot;,     component: UserComponent,     canActivate: [AuthGuardService]   },   { path: &quot;**&quot;, redirectTo: &quot;&quot; } ];<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 <code>\/profile<\/code> \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>canActivate<\/code>. <code>AuthGuard<\/code>, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0440\u0430\u043d\u0435\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0432 \u0434\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>canActivate<\/code>. \u0414\u0430\u043b\u0435\u0435 \u043c\u0435\u0442\u043e\u0434 <code>canActivate<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043a\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0443\u0442\u0438 <code>\/profile<\/code>. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0443\u0442\u0438 <code>\/profile<\/code>, \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u043d\u0430 \u043f\u0443\u0442\u044c <code>\/login<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e <code>canActivate<\/code> \u043f\u043e \u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u043f\u0443\u0442\u0438, \u043d\u043e \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u043d\u0435\u0433\u043e. \u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0449\u0438\u0442\u0438\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u044e \u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u043e \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>canLoad<\/code>. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <code>CanLoad<\/code> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438.<\/p>\n<p>  <\/p>\n<h2 id=\"gotovim-rxjs\">\u0413\u043e\u0442\u043e\u0432\u0438\u043c RxJS<\/h2>\n<p>  <\/p>\n<p>Angular \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 RxJS. RxJS \u2014 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c\u0438 \u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u0445 \u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0435\u0439. RxJS \u2014 \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f ReactiveX API \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 JavaScript. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0432\u043e\u0435\u0439 \u043c\u0430\u0441\u0441\u0435 \u043e\u0448\u0438\u0431\u043a\u0438, \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0434\u0430\u043d\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u043d\u0438\u044f\u043c\u0438 \u043e\u0441\u043d\u043e\u0432 \u0435\u0451 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<h3 id=\"ispolzuem-async-vmesto-podpisyvaniya-na-sobytiya\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c async \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/h3>\n<p>  <\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043f\u0440\u0438\u0448\u043b\u0438 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Angular, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>subscribe<\/code> \u0443 <code>Observable<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435:<\/p>\n<p>  <\/p>\n<pre><code>@Component({   selector: &quot;my-component&quot;,   template: `     &lt;span&gt;{{localData.name}} : {{localData.value}}&lt;\/span&gt;` }) export class MyComponent {   localData;   constructor(http: HttpClient) {     http.get(&quot;api\/data&quot;).subscribe(data =&gt; {       this.localData = data;     });   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0448\u0430\u0431\u043b\u043e\u043d, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f async pipe:<\/p>\n<p>  <\/p>\n<pre><code>@Component({   selector: &quot;my-component&quot;,   template: `     &lt;p&gt;{{data.name | async}} : {{data.value | async}}&lt;\/p&gt;` }) export class MyComponent {   data;   constructor(http: HttpClient) {     this.data = http.get(&quot;api\/data&quot;);   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044f\u0441\u044c \u0447\u0435\u0440\u0435\u0437 \u0448\u0430\u0431\u043b\u043e\u043d, \u043c\u044b \u0438\u0437\u0431\u0435\u0433\u0430\u0435\u043c \u0443\u0442\u0435\u0447\u0435\u043a \u043f\u0430\u043c\u044f\u0442\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e Angular \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u043d\u0430 <code>Observable<\/code>, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0437\u0440\u0443\u0448\u0430\u0435\u0442\u0441\u044f. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u043b\u044f HTTP \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 async pipe \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432, \u043a\u0440\u043e\u043c\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u2014 async \u043e\u0442\u043c\u0435\u043d\u0438\u0442 \u0437\u0430\u043f\u0440\u043e\u0441, \u0435\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b, \u0430 \u043d\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<p>  <\/p>\n<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 <code>Observables<\/code> \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0435 \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u041f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 <code>Observables<\/code> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043e\u043c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, retry \u0432 http \u0437\u0430\u043f\u0440\u043e\u0441\u0435), \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u0430\u0439\u043c\u0435\u0440\u0430 \u0438\u043b\u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c.<\/p>\n<p>  <\/p>\n<h3 id=\"ispolzuem--dlya-oboznacheniya-observables\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>$<\/code> \u0434\u043b\u044f \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f observables<\/h3>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0443\u043d\u043a\u0442 \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u043a\u043e\u0434\u043e\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0432\u044b\u0442\u0435\u043a\u0430\u0435\u0442 \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0443\u043d\u043a\u0442\u0430. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u0442\u044c <code>Observable<\/code> \u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0447\u0430\u0441\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u043b\u044b\u0448\u0430\u0442\u044c \u0441\u043e\u0432\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u043a \u201c<code>$<\/code>\u201d \u0432 \u0438\u043c\u0435\u043d\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0438\u043b\u0438 \u043f\u043e\u043b\u044f. \u0414\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0442\u0440\u044e\u043a \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u0443 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 async.<\/p>\n<p>  <\/p>\n<pre><code>import { Component } from &quot;@angular\/core&quot;; import { Observable } from &quot;rxjs\/Rx&quot;;  import { UserClient } from &quot;..\/services\/user.client&quot;; import { User } from &quot;..\/services\/user&quot;;  @Component({   selector: &quot;user-list&quot;,   template: `   &lt;ul class=&quot;user_list&quot; *ngIf=&quot;(users$ | async).length&quot;&gt;     &lt;li class=&quot;user&quot; *ngFor=&quot;let user of users$ | async&quot;&gt;       {{ user.name }} - {{ user.birth_date }}     &lt;\/li&gt;   &lt;\/ul&gt;` }) export class UserList {   public users$: Observable&lt;User[]&gt;;    constructor(public userClient: UserClient) {}    public ngOnInit() {     this.users$ = this.client.getUsers();   } }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"kogda-nuzhno-otpisyvatsya-unsubscribe\">\u041a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f (unsubscribe)<\/h3>\n<p>  <\/p>\n<p>\u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0447\u0430\u0441\u0442\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043f\u0440\u0438 \u043d\u0435\u0434\u043e\u043b\u0433\u043e\u043c \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u0435 \u0441 Angular \u2014 \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u0442\u0430\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f, \u0430 \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u0442. \u0414\u043b\u044f \u043e\u0442\u0432\u0435\u0442\u0430 \u043d\u0430 \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043a\u0430\u043a\u043e\u0439 \u0432\u0438\u0434 <code>Observable<\/code> \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f. \u0412 Angular \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 2 \u0432\u0438\u0434\u0430 <code>Observable<\/code> \u2014 \u0444\u0438\u043d\u0438\u0442\u043d\u044b\u0435 \u0438 \u0438\u043d\u0444\u0438\u043d\u0438\u0442\u043d\u044b\u0435, \u043e\u0434\u043d\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u044f\u0442 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435, \u0434\u0440\u0443\u0433\u0438\u0435, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<p><code>Http<\/code> <code>Observable<\/code> \u2014 \u0444\u0438\u043d\u0438\u0442\u043d\u044b\u0439, \u0430 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438\/\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0438 (listeners) DOM \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u2014 \u044d\u0442\u043e \u0438\u043d\u0444\u0438\u043d\u0438\u0442\u043d\u044b\u0435 <code>Observable<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u0438\u043d\u0438\u0442\u043d\u043e\u0433\u043e <code>Observable<\/code> \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e (\u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f async pipe), \u0442\u043e \u0432 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u0442\u043f\u0438\u0441\u043a\u0430. \u0415\u0441\u043b\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u0432 \u0440\u0443\u0447\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043d\u0430 \u0444\u0438\u043d\u0438\u0442\u043d\u044b\u0439 Observable, \u0442\u043e \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u0442\u0441\u044f RxJS. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0444\u0438\u043d\u0438\u0442\u043d\u044b\u0445 <code>Observables<\/code> \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u043e\u0442\u043f\u0438\u0441\u043a\u0443, \u0435\u0441\u043b\u0438 <code>Observable<\/code> \u0438\u043c\u0435\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u0440\u043e\u043a \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0447\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0440\u0430\u0442\u043d\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0439\u0441\u044f HTTP \u0437\u0430\u043f\u0440\u043e\u0441.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0444\u0438\u043d\u0438\u0442\u043d\u044b\u0445 <code>Observables<\/code>:<\/p>\n<p>  <\/p>\n<pre><code>export class SomeComponent {   constructor(private http: HttpClient) { }     ngOnInit() {     Observable.timer(1000).subscribe(...);     this.http.get(&quot;http:\/\/api.com&quot;).subscribe(...);   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u043d\u0444\u0438\u043d\u0438\u0442\u043d\u044b\u0445 Observables<\/p>\n<p>  <\/p>\n<pre><code>export class SomeComponent {   constructor(private element : ElementRef) { }    interval: Subscription;   click: Subscription;    ngOnInit() {     this.interval = Observable.interval(1000).subscribe(...);     this.click = Observable.fromEvent(this.element.nativeElement, &quot;click&quot;).subscribe(...);   }    ngOnDestroy() {     this.interval.unsubscribe();     this.click.unsubscribe();   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0438\u0436\u0435, \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u0441\u043b\u0443\u0447\u0430\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0444\u043e\u0440\u043c\u044b \u0438 \u043e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043b\u0438\u0441\u044c:<\/li>\n<\/ol>\n<p>  <\/p>\n<pre><code>export class SomeComponent {    ngOnInit() {     this.form = new FormGroup({...});     this.valueChangesSubs  = this.form.valueChanges.subscribe(...);     this.statusChangesSubs = this.form.statusChanges.subscribe(...);   }    ngOnDestroy() {     this.valueChangesSubs.unsubscribe();     this.statusChangesSubs.unsubscribe();   } }<\/code><\/pre>\n<p>  <\/p>\n<ol>\n<li>Router. \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Angular \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u0430\u043c \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f, <a href=\"https:\/\/github.com\/angular\/angular\/issues\/16261\">\u043e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442<\/a>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u043d\u0438\u0435 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e:<\/li>\n<\/ol>\n<p>  <\/p>\n<pre><code>export class SomeComponent {   constructor(private route: ActivatedRoute, private router: Router) { }    ngOnInit() {     this.route.params.subscribe(..);     this.route.queryParams.subscribe(...);     this.route.fragment.subscribe(...);     this.route.data.subscribe(...);     this.route.url.subscribe(..);      this.router.events.subscribe(...);   }    ngOnDestroy() {     \/\/ \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0432\u0441\u0435\u0445 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 observables   } }<\/code><\/pre>\n<p>  <\/p>\n<ol>\n<li>\u0411\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>interva()<\/code> \u0438\u043b\u0438 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>(fromEvent())<\/code>:<\/li>\n<\/ol>\n<p>  <\/p>\n<pre><code>export class SomeComponent {    constructor(private element : ElementRef) { }    interval: Subscription;   click: Subscription;    ngOnInit() {     this.intervalSubs = Observable.interval(1000).subscribe(...);     this.clickSubs = Observable.fromEvent(this.element.nativeElement, &quot;click&quot;).subscribe(...);   }    ngOnDestroy() {     this.intervalSubs.unsubscribe();     this.clickSubs.unsubscribe();   } }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"takeuntil-i-takewhile\">takeUntil \u0438 takeWhile<\/h3>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u043d\u0444\u0438\u043d\u0438\u0442\u043d\u044b\u043c\u0438 <code>Observables<\/code> \u0432 RxJS \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0432\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u2014 \u044d\u0442\u043e <code>takeUntil<\/code> \u0438 <code>takeWhile<\/code>. \u041e\u043d\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u044f\u0442 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e\u0436\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u2014 \u043e\u0442\u043f\u0438\u0441\u043a\u0443 \u043e\u0442 <code>Observable<\/code> \u043f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u043a\u0430\u043a\u043e\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u044f, \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043b\u0438\u0448\u044c \u0432 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u0445. <code>takeWhile<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 <code>boolean<\/code>, \u0430 <code>takeUntil<\/code> \u2014 <code>Subject<\/code>.<br \/>  \u041f\u0440\u0438\u043c\u0435\u0440 <code>takeWhile<\/code>:<\/p>\n<p>  <\/p>\n<pre><code>export class SomeComponent implements OnDestroy, OnInit {   public user: User;   private alive: boolean = true;    public ngOnInit() {     this.userService       .authenticate(email, password)       .takeWhile(() =&gt; this.alive)       .subscribe(user =&gt; {         this.user = user;       });   }    public ngOnDestroy() {     this.alive = false;   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0444\u043b\u0430\u0433\u0430 <code>alive<\/code> \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u043e\u0442\u043f\u0438\u0441\u043a\u0430 \u043e\u0442 <code>Observable<\/code>. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043f\u0440\u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<br \/>  \u041f\u0440\u0438\u043c\u0435\u0440 <code>takeUntil<\/code>:<\/p>\n<p>  <\/p>\n<pre><code>export class SomeComponent implements OnDestroy, OnInit {   public user: User;   private unsubscribe: Subject&lt;void&gt; = new Subject(void);    public ngOnInit() {     this.userService.authenticate(email, password)       .takeUntil(this.unsubscribe)       .subscribe(user =&gt; {         this.user = user;       });   }    public ngOnDestroy() {     this.unsubscribe.next();     this.unsubscribe.complete();   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u043b\u044f \u043e\u0442\u043f\u0438\u0441\u043a\u0438 \u043e\u0442 <code>Observable<\/code> \u043c\u044b \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u043c, \u0447\u0442\u043e <code>subject<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u043c \u0435\u0433\u043e.<\/p>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0443\u0442\u0435\u0447\u0435\u043a \u0438 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043e\u0442\u043f\u0438\u0441\u043a\u0430\u043c\u0438 \u043e\u0442 \u0434\u0430\u043d\u043d\u044b\u0445. \u041a\u0430\u043a\u0443\u044e \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c? \u0412 \u043e\u0442\u0432\u0435\u0442\u0435 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441 \u043d\u0443\u0436\u043d\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u043c\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438.<\/p>\n<p>  <\/p>\n<h2 id=\"upravlenie-sostoyaniem-v-angular-prilozheniyah-ngrxstore\">\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0432 Angular \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, @ngrx\/store<\/h2>\n<p>  <\/p>\n<p>\u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043c\u044b \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u043d\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 ReactJs \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0445 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u2014 Flux, Redux, Redux-saga \u0438 \u0442.\u0434. \u0414\u043b\u044f Angular \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 RxJS \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 Redux \u2014 @ngrx\/store. \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0437\u0431\u0430\u0432\u0438\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043e\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043f\u0440\u0438 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 Redux?<br \/>  Redux \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442 \u0441\u0435\u0431\u044f \u043a\u0430\u043a \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f (state) \u0434\u043b\u044f JavaScript \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. Redux \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u043b\u0435\u043d Flux \u0438 Elm.<\/p>\n<p>  <\/p>\n<p>Redux \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u043a\u0430\u043a \u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c\u043e\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 (actions), \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u043f\u0440\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>Redux \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c, \u0438 \u0445\u043e\u0442\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0441\u044f \u0434\u043b\u044f React, \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441 Angular \u0438\u043b\u0438 jQuery.<\/p>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u043e\u0441\u0442\u0443\u043b\u0430\u0442\u044b Redux:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043e\u0434\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/li>\n<li>\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f<\/li>\n<li>\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0435\u043b\u0430\u044e\u0442\u0441\u044f \u00ab\u0447\u0438\u0441\u0442\u044b\u043c\u0438\u00bb \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438, \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u0440\u0435\u0434\u044a\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f:<\/li>\n<li>\u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u043f\u043e \u0441\u0435\u0442\u0438 \u0438\u043b\u0438 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445;<\/li>\n<li>\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0435\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432;<\/li>\n<li>\u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c\u0438, \u0442.\u0435. \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c;<\/li>\n<li>\u0432\u044b\u0437\u043e\u0432 \u0447\u0438\u0441\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441 \u0442\u0435\u043c\u0438 \u0436\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442;<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c:<\/p>\n<p>  <\/p>\n<pre><code>\/\/ counter.ts import { ActionReducer, Action } from &quot;@ngrx\/store&quot;;  export const INCREMENT = &quot;INCREMENT&quot;; export const DECREMENT = &quot;DECREMENT&quot;; export const RESET = &quot;RESET&quot;;  export function counterReducer(state: number = 0, action: Action) {   switch (action.type) {     case INCREMENT:       return state + 1;      case DECREMENT:       return state - 1;      case RESET:       return 0;      default:       return state;   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f Reducer \u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>StoreModule.provideStore(reducers)<\/code> \u0434\u0435\u043b\u0430\u0435\u043c \u0435\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u043b\u044f Angular \u0438\u043d\u0436\u0435\u043a\u0442\u043e\u0440\u0430:<\/p>\n<p>  <\/p>\n<pre><code>\/\/ app.module.ts import { NgModule } from &quot;@angular\/core&quot;; import { StoreModule } from &quot;@ngrx\/store&quot;; import { counterReducer } from &quot;.\/counter&quot;;  @NgModule({   imports: [     BrowserModule,     StoreModule.provideStore({ counter: counterReducer })   ] }) export class AppModule { }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 <code>Store<\/code> \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u044b. \u0414\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 &quot;\u0441\u0440\u0435\u0437\u0430&quot; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f store.select():<\/p>\n<p>  <\/p>\n<pre><code>\/\/ app.component.ts ... interface AppState {   counter: number; } @Component({   selector: &quot;my-app&quot;,   template: `   &lt;button (click)=&quot;increment()&quot;&gt;Increment&lt;\/button&gt;   &lt;div&gt;Current Count: {{ counter | async }}&lt;\/div&gt;   &lt;button (click)=&quot;decrement()&quot;&gt;Decrement&lt;\/button&gt;   &lt;button (click)=&quot;reset()&quot;&gt;Reset Counter&lt;\/button&gt;` }) class AppComponent {   counter: Observable&lt;number&gt;;   constructor(private store: Store&lt;AppState&gt;) {     this.counter = store.select(&quot;counter&quot;);   }   increment() {     this.store.dispatch({ type: INCREMENT });   }   decrement() {     this.store.dispatch({ type: DECREMENT });   }   reset() {     this.store.dispatch({ type: RESET });   } }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"ngrxrouter-store\">@ngrx\/router-store<\/h3>\n<p>  <\/p>\n<p>\u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0443\u0434\u043e\u0431\u043d\u043e \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u044d\u0442\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u044c @ngrx\/router-store. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u043e <code>router-store<\/code> \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c <code>routerReducer<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u044b\u0437\u043e\u0432 <code>RouterStoreModule.connectRoute<\/code> \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code>import { StoreModule } from &quot;@ngrx\/store&quot;; import { routerReducer, RouterStoreModule } from &quot;@ngrx\/router-store&quot;;  @NgModule({   imports: [     BrowserModule,     StoreModule.provideStore({ router: routerReducer }),     RouterStoreModule.connectRouter()   ],   bootstrap: [AppComponent] }) export class AppModule { }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c <code>RouterState<\/code> \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code>import { RouterState } from &quot;@ngrx\/router-store&quot;;  export interface AppState { ...   router: RouterState; };<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0438 store:<\/p>\n<p>  <\/p>\n<pre><code>StoreModule.provideStore(   { router: routerReducer },   {     router: {       path: window.location.pathname + window.location.search     }   } );<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code>import { go, replace, search, show, back, forward } from &quot;@ngrx\/router-store&quot;;  \/\/\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0441 \u043d\u043e\u0432\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0432 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 store.dispatch(go([&quot;\/path&quot;, { routeParam: 1 }], { query: &quot;string&quot; }));  \/\/ \u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0441 \u0437\u0430\u043c\u0435\u043d\u043e\u0439 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 store.dispatch(replace([&quot;\/path&quot;], { query: &quot;string&quot; }));  \/\/ \u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0431\u0435\u0437 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0438\u0441\u0442\u043e\u0440\u0438\u044e store.dispatch(show([&quot;\/path&quot;], { query: &quot;string&quot; }));  \/\/ \u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 store.dispatch(search({ query: &quot;string&quot; }));  \/\/ \u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043d\u0430\u0437\u0430\u0434 store.dispatch(back());  \/\/ \u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0432\u043f\u0435\u0440\u0435\u0434 store.dispatch(forward());<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0437\u0431\u0430\u0432\u0438\u0442 \u043e\u0442 \u043c\u043d\u043e\u0433\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041e\u0434\u043d\u0430\u043a\u043e, \u0432\u0430\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0449\u0435. \u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u0437\u043b\u0438\u0448\u043d\u044f\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u0447\u0442\u043e \u043b\u0438\u0448\u044c \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<h2 id=\"organizaciya-koda\">\u041e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0430<\/h2>\n<p>  <\/p>\n<h3 id=\"izbavlyaemsya-ot-gromozdkih-vyrazheniy-v-import\">\u0418\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u0441\u044f \u043e\u0442 \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 <code>import<\/code><\/h3>\n<p>  <\/p>\n<p>\u041c\u043d\u043e\u0433\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 <code>import<\/code> \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u0435. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u0433\u0434\u0435 \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.<\/p>\n<p>  <\/p>\n<pre><code>import { SomeService } from &quot;..\/..\/..\/core\/subpackage1\/subpackage2\/some.service&quot;;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u0435\u0449\u0435 \u043f\u043b\u043e\u0445\u043e \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435? \u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0434\u0440\u0443\u0433\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e, \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 <code>import<\/code> \u0431\u0443\u0434\u0443\u0442 \u043d\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0441\u0435\u0432\u0434\u043e\u043d\u0438\u043c\u043e\u0432 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0443\u0439\u0442\u0438 \u043e\u0442 \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 <code>import<\/code> \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u0434 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0447\u0438\u0449\u0435. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043f\u0441\u0435\u0432\u0434\u043e\u043d\u0438\u043c\u043e\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c baseUrl \u0438 path \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432<code>tsconfig.json<\/code>:<\/p>\n<p>  <\/p>\n<pre><code>\/ tsconfig.json { &quot;compilerOptions&quot;: {     ...     &quot;baseUrl&quot;: &quot;src&quot;,     &quot;paths&quot;: {       &quot;@app\/*&quot;: [&quot;app\/*&quot;],       &quot;@env\/*&quot;: [&quot;environments\/*&quot;]     }   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421 \u044d\u0442\u0438\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u044b\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438:<\/p>\n<p>  <\/p>\n<pre><code>import { Component, OnInit } from &quot;@angular\/core&quot;; import { Observable } from &quot;rxjs\/Observable&quot;;  \/* \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b *\/ import { SomeService } from &quot;@app\/core&quot;; import { environment } from &quot;@env\/environment&quot;;  \/* \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0443\u0442\u044c*\/ import { LocalService } from &quot;.\/local.service&quot;;  @Component({   \/* ... *\/ }) export class ExampleComponent implements OnInit {   constructor(     private someService: SomeService,     private localService: LocalService   ) { } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438\u043c\u043f\u043e\u0440\u0442 <code>SomeService<\/code> \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0437 <code>@app\/core<\/code> \u0432\u043c\u0435\u0441\u0442\u043e \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>@app\/core\/some-package\/some.service<\/code>). \u042d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0440\u0435-\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0443 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 <code>index.ts<\/code>. \u0416\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b <code>index.ts<\/code> \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0440\u0435\u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u0432\u0441\u0435\u0445 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439:<\/p>\n<p>  <\/p>\n<pre><code>\/\/  index.ts export * from &quot;.\/core.module&quot;; export * from &quot;.\/auth\/auth.service&quot;; export * from &quot;.\/user\/user.service&quot;; export * from &quot;.\/some-service\/some.service&quot;;<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"core-shared-i-feature-moduli\">Core, Shared \u0438 Feature \u043c\u043e\u0434\u0443\u043b\u0438<\/h3>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u043e\u0433\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u044b\u043c\u0438 \u0447\u0430\u0441\u0442\u044f\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0447\u0430\u0441\u0442\u043e \u0432 \u043b\u0438\u0442\u0435\u0440\u0430\u0442\u0443\u0440\u0435 \u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u0445 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e\u0442 \u0440\u0430\u0437\u043d\u043e\u0441\u0438\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u044b\u043c\u0438 \u0447\u0430\u0441\u0442\u044f\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442\u0441\u044f. \u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435: Core, Shared \u0438 Feature \u043c\u043e\u0434\u0443\u043b\u0438.<\/p>\n<p>  <\/p>\n<h4 id=\"coremodule\">CoreModule<\/h4>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 CoreModule \u2014 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u043e\u0434\u0438\u043d \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043d\u0430 \u0432\u0441\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (\u0442.\u0435. \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d). \u041a \u0442\u0430\u043a\u0438\u043c \u0447\u0430\u0441\u0442\u043e \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0438\u0441 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0441\u0435\u0440\u0432\u0438\u0441 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435. \u041f\u0440\u0438\u043c\u0435\u0440 CoreModule:<\/p>\n<p>  <\/p>\n<pre><code>import { NgModule, Optional, SkipSelf } from &quot;@angular\/core&quot;; import { CommonModule } from &quot;@angular\/common&quot;; import { HttpClientModule } from &quot;@angular\/common\/http&quot;; \/* \u0441\u0435\u0440\u0432\u0438\u0441\u044b  *\/ import { SomeSingletonService } from &quot;.\/some-singleton\/some-singleton.service&quot;;  @NgModule({   imports: [CommonModule, HttpClientModule],   declarations: [],   providers: [SomeSingletonService] }) export class CoreModule {   \/* \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0438\u043c\u0441\u044f \u0447\u0442\u043e CoreModule \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0438\u043c NgModule the AppModule *\/   constructor(     @Optional()     @SkipSelf()     parentModule: CoreModule   ) {     if (parentModule) {       throw new Error(&quot;CoreModule is already loaded. Import only in AppModule&quot;);     }   } }<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"sharedmodule\">SharedModule<\/h4>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u042d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442 \u0438 \u043d\u0435 \u0432\u043d\u0435\u0434\u0440\u044f\u044e\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0432 \u0441\u0432\u043e\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b. \u041e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0447\u0435\u0440\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. <code>SharedModule<\/code> \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\u042d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0438 \u0440\u0435\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Angular Material \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 UI \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.<\/p>\n<p>  <\/p>\n<pre><code>import { NgModule } from &quot;@angular\/core&quot;; import { CommonModule } from &quot;@angular\/common&quot;; import { FormsModule } from &quot;@angular\/forms&quot;; import { MdButtonModule } from &quot;@angular\/material&quot;; \/*\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b *\/ import { SomeCustomComponent } from &quot;.\/some-custom\/some-custom.component&quot;;  @NgModule({   imports: [CommonModule, FormsModule, MdButtonModule],   declarations: [SomeCustomComponent],   exports: [     \/* \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Angular Material*\/     CommonModule,     FormsModule,     MdButtonModule,     \/* \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430 *\/     SomeCustomComponent   ] }) export class SharedModule { }<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"featuremodule\">FeatureModule<\/h4>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c Angular style guide. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 FeatureModule. FeatureModule \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437 <code>CoreModule<\/code>. \u0415\u0441\u043b\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043e\u0434\u0443\u043b\u044e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u043e\u0441\u044c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044d\u0442\u043e\u0442 \u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 <code>CoreModule<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438 \u0438 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0435\u0433\u043e \u0432 <code>CoreModule<\/code>. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0441\u043e\u0431\u044b\u0439 <code>SharedModule<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u044d\u0442\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u044f\u0445.<br \/>  \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0435 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u2014 \u043f\u043e\u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0445 <code>CoreModule<\/code> \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0445 <code>SharedModule<\/code>.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043a\u043e\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0441\u0442\u044b\u043c, \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0438. \u042d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0443\u0441\u0438\u043b\u0438\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0430. \u0415\u0441\u043b\u0438 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u043f\u0440\u0430\u0432\u0438\u043b\u0443, \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u043c, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435 \u043d\u0435 \u0441\u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u0438\u043b\u0438 \u0440\u0430\u0437\u0440\u0443\u0448\u0438\u0442\u044c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<h3 id=\"spisok-literatury\">\u0421\u043f\u0438\u0441\u043e\u043a \u043b\u0438\u0442\u0435\u0440\u0430\u0442\u0443\u0440\u044b<\/h3>\n<p>  <\/p>\n<ol>\n<li><a href=\"https:\/\/github.com\/ngrx\/store\">https:\/\/github.com\/ngrx\/store<\/a><\/li>\n<li><a href=\"http:\/\/stepansuvorov.com\/blog\/2017\/06\/angular-rxjs-unsubscribe-or-not-unsubscribe\/\">http:\/\/stepansuvorov.com\/blog\/2017\/06\/angular-rxjs-unsubscribe-or-not-unsubscribe\/<\/a><\/li>\n<li><a href=\"https:\/\/medium.com\/@tomastrajan\/6-best-practices-pro-tips-for-angular-cli-better-developer-experience-7b328bc9db81\">https:\/\/medium.com\/@tomastrajan\/6-best-practices-pro-tips-for-angular-cli-better-developer-experience-7b328bc9db81<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/post\/336280\/\">https:\/\/habr.com\/post\/336280\/<\/a><\/li>\n<li><a href=\"https:\/\/angular.io\/docs\">https:\/\/angular.io\/docs<\/a><\/li>\n<\/ol>\n<\/div>\n<p>        <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d()}}}t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>     <br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/post\/425959\/\"> https:\/\/habr.com\/post\/425959\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\">\n<p>\u041f\u0440\u043e\u0448\u043b\u043e \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441 \u0432\u044b\u0445\u043e\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e Angular. \u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043e. \u041e\u0442 &quot;getting started&quot; \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0443\u0436\u0435 \u043f\u0435\u0440\u0435\u0448\u043b\u043e \u043a \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u044d\u0442\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u043e\u0431\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\/\u0438\u043b\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043b\u0438\u0431\u043e \u0443\u0436\u0435 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0441\u0432\u043e\u0438 style guides \u0438 best practice \u043b\u0438\u0431\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0447\u0443\u0436\u0438\u0435. \u041d\u043e \u0432 \u0442\u043e\u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043a\u043e\u0434\u0430 \u043d\u0430 Angular, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u044d\u0442\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0438\/\u0438\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u0432 \u0441\u0442\u0438\u043b\u0435 AngularJS.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Angular, \u043a\u043e\u0442\u043e\u0440\u044b\u0435, \u043f\u043e \u0441\u043a\u0440\u043e\u043c\u043d\u043e\u043c\u0443 \u043c\u043d\u0435\u043d\u0438\u044e \u0430\u0432\u0442\u043e\u0440\u0430, \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u044b \u0432 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430\u0445 \u0438\u043b\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438. <\/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-290599","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/290599","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=290599"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/290599\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=290599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=290599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=290599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}