{"id":461830,"date":"2025-06-02T15:00:57","date_gmt":"2025-06-02T15:00:57","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=461830"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=461830","title":{"rendered":"<span>Angular 20: \u0411\u043e\u043b\u044c\u0448\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0435\u0431\u0430<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>Angular 20 \u2014 \u044d\u0442\u043e \u043c\u043e\u0449\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0435\u0435. \u041d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0441\u0438\u0433\u043d\u0430\u043b\u044b, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 zoneless \u0440\u0435\u0436\u0438\u043c\u0430 \u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 AI \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u043a\u043e\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0443\u0441\u0438\u043b\u0438\u044f\u043c\u0438. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u044f Angular 20 \u0438 \u043f\u043e\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0432\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<h3>\u041d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438:<\/h3>\n<h3>\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 JavaScript-\u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445<\/h3>\n<p>Angular 20 \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0430\u0435\u0442\u0441\u044f \u043a \u043f\u043e\u043b\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0441 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c TypeScript, \u0434\u0435\u043b\u0430\u044f \u0438\u0445 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438. \u0421\u0440\u0435\u0434\u0438 \u043d\u043e\u0432\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439:<\/p>\n<ul>\n<li>\n<p><strong>\u0428\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438<\/strong> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u044e \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0439:<\/p>\n<pre><code class=\"javascript\">&lt;p&gt;{{ `User id: ${userId()}` }}&lt;\/p&gt;<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>\u041c\u0435\u0447\u0435\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438<\/strong>: \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u0442\u0440\u043e\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u0432\u044b\u0432\u043e\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">function highlight(strings: TemplateStringsArray, ...values: any[]): string {   return strings.reduce((result, str, i) =&gt; result + str + (values[i] || ''), ''); }  @Component({...}) class MyComponent {   user = { name: '\u0410\u043b\u0435\u043a\u0441\u0435\u0439' };   highlightedName = highlight`\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c: ${this.user.name}`; }<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0432\u043e\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0435\u043f\u0435\u043d\u044c (<\/strong>**<strong>)<\/strong>: \u0423\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445:<\/p>\n<pre><code class=\"javascript\">{{ 2 ** 3 }} &lt;!-- \u0412\u044b\u0432\u0435\u0434\u0435\u0442 8 --&gt;<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 <\/strong>in: \u0423\u0434\u043e\u0431\u043d\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435:<\/p>\n<pre><code class=\"javascript\">@if ('magicDamage' in attack) {   &lt;p&gt;{{ `\u0423\u0440\u043e\u043d \u043c\u0430\u0433\u0438\u0435\u0439: ${attack.magicDamage}` }}&lt;\/p&gt; }<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 <\/strong>void: \u0413\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439:<\/p>\n<pre><code class=\"javascript\">@Component({...}) class MyComponent {   onClick(event: Event): void {     console.log('\u041a\u043b\u0438\u043a \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d');     return void 0;   } }<\/code><\/pre>\n<\/li>\n<\/ul>\n<h4>\u0410\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0440\u0435\u0434\u0438\u0440\u0435\u043a\u0442\u044b<\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>redirectTo<\/code> \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c <code>Promise<\/code>, <code>Observable&lt;string&gt;<\/code> \u0438\u043b\u0438 <code>UrlTree<\/code>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c.<\/p>\n<pre><code class=\"javascript\">const routes: Routes = [   {     path: 'admin',     redirectTo: async () =&gt; {       const isAuthorized = await checkAuthorization();       return isAuthorized ? '\/dashboard' : '\/login';     }   } ];<\/code><\/pre>\n<h4>\u041e\u0442\u043c\u0435\u043d\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/h4>\n<p>\u041c\u0435\u0442\u043e\u0434 <code>Router.getCurrentNavigation()?.abort()<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043f\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0443, \u0447\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u0440\u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 Navigation API.<\/p>\n<h4>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f NgComponentOutlet<\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c <code>NgComponentOutlet<\/code> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442:<\/p>\n<ul>\n<li>\n<p><code>ngComponentOutletInputs<\/code> \u2014 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<\/p>\n<\/li>\n<li>\n<p><code>ngComponentOutletContent<\/code> \u2014 \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<li>\n<p><code>ngComponentOutletInjector<\/code> \u2014 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0436\u0435\u043a\u0442\u043e\u0440<\/p>\n<\/li>\n<\/ul>\n<p>\u042d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u0434 \u0447\u0438\u0449\u0435.<\/p>\n<h4>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u0438\u0432\u044f\u0437\u043e\u043a \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h4>\n<p>Angular 20 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c input\/output-\u0441\u0432\u044f\u0437\u0438, \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044e\u044e \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 <code>ViewContainerRef.createComponent<\/code>.<\/p>\n<pre><code class=\"javascript\">bindings: [   inputBinding('canClose', this.canClose),   outputBinding('close', value =&gt; console.log(value)) ]<\/code><\/pre>\n<h4>\u041c\u0435\u0442\u043e\u0434 destroy() \u0434\u043b\u044f Injector<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u0438\u043d\u0436\u0435\u043a\u0442\u043e\u0440 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0447\u0435\u0440\u0435\u0437 <code>Injector.create()<\/code>, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c <code>destroy()<\/code> \u0434\u043b\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0438.<\/p>\n<pre><code class=\"javascript\">const injector = Injector.create({ providers: [...] }); injector.destroy();<\/code><\/pre>\n<h4>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 keepalive \u0432 HttpClient<\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0443) \u043f\u0440\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u043e\u043f\u0446\u0438\u0435\u0439 keepalive:<\/p>\n<pre><code class=\"javascript\">@Component({...}) class AnalyticsComponent {   constructor(private http: HttpClient) {}    sendAnalyticsOnClose() {     this.http.post('\/analytics', { event: 'page_closed' }, { keepalive: true })       .subscribe();   } }<\/code><\/pre>\n<h4>ScrollOptions \u0432 ViewportScroller<\/h4>\n<p>\u041c\u0435\u0442\u043e\u0434\u044b <code>scrollToAnchor<\/code> \u0438 <code>scrollToPosition<\/code> \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 <code>ScrollOptions<\/code> \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438.<\/p>\n<h3>\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432<\/h3>\n<h4>\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043e\u043a \u0445\u043e\u0441\u0442\u0430<\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c Angular \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0442\u0438\u043f\u044b \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 <code>@HostBinding<\/code>, <code>@HostListener<\/code> \u0438 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 <code>host<\/code>. \u042d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043e\u0442\u043b\u0430\u0434\u043a\u0443 \u0438 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433.<\/p>\n<h4>\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u0441\u043c\u0435\u0448\u0430\u043d\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432<\/h4>\n<p>Angular 20 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0430\u0435\u0442 \u043e \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>??<\/code>, <code>&amp;&amp;<\/code> \u0438 <code>||<\/code> \u0431\u0435\u0437 \u0441\u043a\u043e\u0431\u043e\u043a:<\/p>\n<pre><code class=\"javascript\">&lt;!-- \u041e\u0448\u0438\u0431\u043a\u0430: \u043d\u0435\u044f\u0441\u043d\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 --&gt; &lt;div&gt;{{ value ?? defaultValue &amp;&amp; fallback }}&lt;\/div&gt; &lt;!-- \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e --&gt; &lt;div&gt;{{ (value ?? defaultValue) &amp;&amp; fallback }}&lt;\/div&gt;<\/code><\/pre>\n<h4>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u0430\u044f \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u0434\u043b\u044f track<\/h4>\n<p>\u0412 @for \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u044b\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0431\u044b\u043b\u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e track, \u0447\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c:<\/p>\n<pre><code class=\"javascript\">&lt;!-- \u041e\u0448\u0438\u0431\u043a\u0430: track \u043d\u0435 \u0432\u044b\u0437\u0432\u0430\u043d --&gt; @for (item of items; track trackByName) {} &lt;!-- \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e --&gt; @for (item of items; track trackByName(item)) {}<\/code><\/pre>\n<h4>\u0418\u043c\u043f\u043e\u0440\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432<\/h4>\n<p>Angular \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0430\u0435\u0442, \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0441\u0432\u043e\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 (<code>*myDirective<\/code>) \u0431\u0435\u0437 \u0438\u043c\u043f\u043e\u0440\u0442\u0430.<\/p>\n<h3>\u0421\u0442\u0430\u0431\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f API<\/h3>\n<ul>\n<li>\n<p><strong>\u0421\u0438\u0433\u043d\u0430\u043b\u044b<\/strong>: API toSignal, toObservable, linkedSignal \u0438 effect \u0442\u0435\u043f\u0435\u0440\u044c \u0432 \u0441\u0442\u0430\u0442\u0443\u0441\u0435 <strong>Stable<\/strong>. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0438\u0433\u043d\u0430\u043b\u044b \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 <\/strong>afterRender: \u0425\u0443\u043a \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d \u0432 afterEveryRender \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u044f\u0441\u043d\u043e\u0441\u0442\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>Zoneless Angular<\/strong>: API \u0434\u043b\u044f \u0437\u043e\u043d\u0435\u043b\u0435\u0441\u0441-\u0434\u0435\u0442\u0435\u043a\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043f\u0435\u0440\u0435\u0448\u0451\u043b \u0432 <strong>Developer Preview<\/strong>. \u041d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440: provideZonelessChangeDetection. CLI \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c zoneless \u0440\u0435\u0436\u0438\u043c \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d provideCheckNoChangesConfig \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u043a \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0443. \u041d\u0430 \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043b\u0443\u0447\u0448\u0435 \u0434\u043e\u0436\u0434\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u0442\u0443\u0441\u0430 <strong>Stable<\/strong>.<\/p>\n<\/li>\n<\/ul>\n<h4>SSR: \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438<\/h4>\n<p>API <code>PendingTasks<\/code> \u0441\u0442\u0430\u0431\u0438\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043b\u043e\u0436\u0438\u0442\u044c SSR-\u043e\u0442\u0432\u0435\u0442 \u0434\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447. \u0422\u0430\u043a\u0436\u0435 \u0432 \u0441\u0442\u0430\u0442\u0443\u0441 Developer Preview \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0451\u043d \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 <code>pendingUntilEvent<\/code>.<\/p>\n<h3>\u041a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f:<\/h3>\n<h4>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/h4>\n<ul>\n<li>\n<p>Node: ^20.11.1 || ^22.11.0 || ^24.0.0<\/p>\n<\/li>\n<li>\n<p>TypeScript: &gt;=5.8.0 &lt;5.9.0<\/p>\n<\/li>\n<li>\n<p>RxJS: ^6.5.3 || ^7.4.0<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 Node 18 \u0438 TypeScript &lt;5.8 \u043f\u0440\u0435\u043a\u0440\u0430\u0449\u0435\u043d\u0430.<\/p>\n<h4>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 ng-reflect-* \u0432 dev-\u0440\u0435\u0436\u0438\u043c\u0435<\/h4>\n<p>Angular \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 <code>ng-reflect-*<\/code> \u0432 DOM. \u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0438 \u0442\u0435\u0441\u0442\u044b \u043d\u0430 \u044d\u0442\u043e \u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u2014 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u0441\u044c \u043d\u0430 <code>data-testid<\/code> \u0438\u043b\u0438 <code>data-cy<\/code>.<\/p>\n<h4>\u0423\u0434\u0430\u043b\u0451\u043d InjectFlags<\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u043c\u0435\u0441\u0442\u043e InjectFlags \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a:<\/p>\n<pre><code class=\"javascript\">inject(ElementRef, { optional: true, host: true, skipSelf: true });<\/code><\/pre>\n<h4>\u0414\u0435\u043f\u0440\u0435\u043a\u0435\u0439\u0442 HammerJS<\/h4>\n<p>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 HammerJS \u0441\u043d\u044f\u0442\u0430 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u0430\u043b\u0435\u043d\u0430 \u0432 Angular 21. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 API (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, PointerEvent) \u0438\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u0440\u043e\u0434\u0435 interact.js \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0436\u0435\u0441\u0442\u043e\u0432.<\/p>\n<h3>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 AI<\/h3>\n<p>Angular 20 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e AI:<\/p>\n<ul>\n<li>\n<p><strong>Genkit<\/strong>: \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 AI-\u043c\u043e\u0434\u0435\u043b\u044f\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>Firebase AI Logic<\/strong>: \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 AI-\u043b\u043e\u0433\u0438\u043a\u0438 \u043d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 Firebase.<\/p>\n<\/li>\n<li>\n<p><strong>Gemini API<\/strong>: API \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0447\u0430\u0442-\u0431\u043e\u0442\u043e\u0432, \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<h4>\u0424\u0430\u0439\u043b llms.txt<\/h4>\n<p>\u041d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b llms.txt \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u043c \u043c\u043e\u0434\u0435\u043b\u044f\u043c (LLMs) \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 Angular-\u043a\u043e\u0434:<\/p>\n<h4>\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0435:<\/h4>\n<p>Angular 20 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 Chrome DevTools, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u0432 \u0438 AI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f effect \u0438\u043b\u0438 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u0432 SSR). \u042d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043e\u0442\u043b\u0430\u0434\u043a\u0443 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>Angular 20 \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0435\u0440\u044c\u0451\u0437\u043d\u044b\u0439 \u0448\u0430\u0433 \u0432\u043f\u0435\u0440\u0451\u0434: \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445, \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0441\u0438\u0433\u043d\u0430\u043b\u044c\u043d\u044b\u0435 API, \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043a zoneless-\u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435.<\/p>\n<p>\u041e\u0436\u0438\u0434\u0430\u0435\u043c \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c Signal Forms \u0438 Selectorless Components, \u043d\u043e \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 Angular 20 \u2014 \u044d\u0442\u043e \u043c\u043e\u0449\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u043e\u0442\u043b\u0438\u0447\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c\u044e.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/914934\/\"> https:\/\/habr.com\/ru\/articles\/914934\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>Angular 20 \u2014 \u044d\u0442\u043e \u043c\u043e\u0449\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0435\u0435. \u041d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0441\u0438\u0433\u043d\u0430\u043b\u044b, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 zoneless \u0440\u0435\u0436\u0438\u043c\u0430 \u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 AI \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u043a\u043e\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0443\u0441\u0438\u043b\u0438\u044f\u043c\u0438. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u044f Angular 20 \u0438 \u043f\u043e\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0432\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<h3>\u041d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438:<\/h3>\n<h3>\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 JavaScript-\u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445<\/h3>\n<p>Angular 20 \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0430\u0435\u0442\u0441\u044f \u043a \u043f\u043e\u043b\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0441 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c TypeScript, \u0434\u0435\u043b\u0430\u044f \u0438\u0445 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438. \u0421\u0440\u0435\u0434\u0438 \u043d\u043e\u0432\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439:<\/p>\n<ul>\n<li>\n<p><strong>\u0428\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438<\/strong> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u044e \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0439:<\/p>\n<pre><code class=\"javascript\">&lt;p&gt;{{ `User id: ${userId()}` }}&lt;\/p&gt;<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>\u041c\u0435\u0447\u0435\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438<\/strong>: \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u0442\u0440\u043e\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u0432\u044b\u0432\u043e\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">function highlight(strings: TemplateStringsArray, ...values: any[]): string {   return strings.reduce((result, str, i) =&gt; result + str + (values[i] || ''), ''); }  @Component({...}) class MyComponent {   user = { name: '\u0410\u043b\u0435\u043a\u0441\u0435\u0439' };   highlightedName = highlight`\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c: ${this.user.name}`; }<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0432\u043e\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0435\u043f\u0435\u043d\u044c (<\/strong>**<strong>)<\/strong>: \u0423\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445:<\/p>\n<pre><code class=\"javascript\">{{ 2 ** 3 }} &lt;!-- \u0412\u044b\u0432\u0435\u0434\u0435\u0442 8 --&gt;<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 <\/strong>in: \u0423\u0434\u043e\u0431\u043d\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435:<\/p>\n<pre><code class=\"javascript\">@if ('magicDamage' in attack) {   &lt;p&gt;{{ `\u0423\u0440\u043e\u043d \u043c\u0430\u0433\u0438\u0435\u0439: ${attack.magicDamage}` }}&lt;\/p&gt; }<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 <\/strong>void: \u0413\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439:<\/p>\n<pre><code class=\"javascript\">@Component({...}) class MyComponent {   onClick(event: Event): void {     console.log('\u041a\u043b\u0438\u043a \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d');     return void 0;   } }<\/code><\/pre>\n<\/li>\n<\/ul>\n<h4>\u0410\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0440\u0435\u0434\u0438\u0440\u0435\u043a\u0442\u044b<\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>redirectTo<\/code> \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c <code>Promise<\/code>, <code>Observable&lt;string&gt;<\/code> \u0438\u043b\u0438 <code>UrlTree<\/code>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c.<\/p>\n<pre><code class=\"javascript\">const routes: Routes = [   {     path: 'admin',     redirectTo: async () =&gt; {       const isAuthorized = await checkAuthorization();       return isAuthorized ? '\/dashboard' : '\/login';     }   } ];<\/code><\/pre>\n<h4>\u041e\u0442\u043c\u0435\u043d\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/h4>\n<p>\u041c\u0435\u0442\u043e\u0434 <code>Router.getCurrentNavigation()?.abort()<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043f\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0443, \u0447\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u0440\u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 Navigation API.<\/p>\n<h4>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f NgComponentOutlet<\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c <code>NgComponentOutlet<\/code> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442:<\/p>\n<ul>\n<li>\n<p><code>ngComponentOutletInputs<\/code> \u2014 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<\/p>\n<\/li>\n<li>\n<p><code>ngComponentOutletContent<\/code> \u2014 \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<li>\n<p><code>ngComponentOutletInjector<\/code> \u2014 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0436\u0435\u043a\u0442\u043e\u0440<\/p>\n<\/li>\n<\/ul>\n<p>\u042d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u0434 \u0447\u0438\u0449\u0435.<\/p>\n<h4>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u0438\u0432\u044f\u0437\u043e\u043a \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h4>\n<p>Angular 20 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c input\/output-\u0441\u0432\u044f\u0437\u0438, \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044e\u044e \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 <code>ViewContainerRef.createComponent<\/code>.<\/p>\n<pre><code class=\"javascript\">bindings: [   inputBinding('canClose', this.canClose),   outputBinding('close', value =&gt; console.log(value)) ]<\/code><\/pre>\n<h4>\u041c\u0435\u0442\u043e\u0434 destroy() \u0434\u043b\u044f Injector<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u0438\u043d\u0436\u0435\u043a\u0442\u043e\u0440 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0447\u0435\u0440\u0435\u0437 <code>Injector.create()<\/code>, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c <code>destroy()<\/code> \u0434\u043b\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0438.<\/p>\n<pre><code class=\"javascript\">const injector = Injector.create({ providers: [...] }); injector.destroy();<\/code><\/pre>\n<h4>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 keepalive \u0432 HttpClient<\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0443) \u043f\u0440\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u043e\u043f\u0446\u0438\u0435\u0439 keepalive:<\/p>\n<pre><code class=\"javascript\">@Component({...}) class AnalyticsComponent {   constructor(private http: HttpClient) {}    sendAnalyticsOnClose() {     this.http.post('\/analytics', { event: 'page_closed' }, { keepalive: true })       .subscribe();   } }<\/code><\/pre>\n<h4>ScrollOptions \u0432 ViewportScroller<\/h4>\n<p>\u041c\u0435\u0442\u043e\u0434\u044b <code>scrollToAnchor<\/code> \u0438 <code>scrollToPosition<\/code> \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 <code>ScrollOptions<\/code> \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438.<\/p>\n<h3>\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432<\/h3>\n<h4>\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043e\u043a \u0445\u043e\u0441\u0442\u0430<\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c Angular \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0442\u0438\u043f\u044b \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 <code>@HostBinding<\/code>, <code>@HostListener<\/code> \u0438 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 <code>host<\/code>. \u042d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043e\u0442\u043b\u0430\u0434\u043a\u0443 \u0438 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433.<\/p>\n<h4>\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u0441\u043c\u0435\u0448\u0430\u043d\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432<\/h4>\n<p>Angular 20 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0430\u0435\u0442 \u043e \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>??<\/code>, <code>&amp;&amp;<\/code> \u0438 <code>||<\/code> \u0431\u0435\u0437 \u0441\u043a\u043e\u0431\u043e\u043a:<\/p>\n<pre><code class=\"javascript\">&lt;!-- \u041e\u0448\u0438\u0431\u043a\u0430: \u043d\u0435\u044f\u0441\u043d\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 --&gt; &lt;div&gt;{{ value ?? defaultValue &amp;&amp; fallback }}&lt;\/div&gt; &lt;!-- \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e --&gt; &lt;div&gt;{{ (value ?? defaultValue) &amp;&amp; fallback }}&lt;\/div&gt;<\/code><\/pre>\n<h4>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u0430\u044f \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u0434\u043b\u044f track<\/h4>\n<p>\u0412 @for \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u044b\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0431\u044b\u043b\u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e track, \u0447\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c:<\/p>\n<pre><code class=\"javascript\">&lt;!-- \u041e\u0448\u0438\u0431\u043a\u0430: track \u043d\u0435 \u0432\u044b\u0437\u0432\u0430\u043d --&gt; @for (item of items; track trackByName) {} &lt;!-- \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e --&gt; @for (item of items; track trackByName(item)) {}<\/code><\/pre>\n<h4>\u0418\u043c\u043f\u043e\u0440\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432<\/h4>\n<p>Angular \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0430\u0435\u0442, \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0441\u0432\u043e\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 (<code>*myDirective<\/code>) \u0431\u0435\u0437 \u0438\u043c\u043f\u043e\u0440\u0442\u0430.<\/p>\n<h3>\u0421\u0442\u0430\u0431\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f API<\/h3>\n<ul>\n<li>\n<p><strong>\u0421\u0438\u0433\u043d\u0430\u043b\u044b<\/strong>: API toSignal, toObservable, linkedSignal \u0438 effect \u0442\u0435\u043f\u0435\u0440\u044c \u0432 \u0441\u0442\u0430\u0442\u0443\u0441\u0435 <strong>Stable<\/strong>. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0438\u0433\u043d\u0430\u043b\u044b \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 <\/strong>afterRender: \u0425\u0443\u043a \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d \u0432 afterEveryRender \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u044f\u0441\u043d\u043e\u0441\u0442\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>Zoneless Angular<\/strong>: API \u0434\u043b\u044f \u0437\u043e\u043d\u0435\u043b\u0435\u0441\u0441-\u0434\u0435\u0442\u0435\u043a\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043f\u0435\u0440\u0435\u0448\u0451\u043b \u0432 <strong>Developer Preview<\/strong>. \u041d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440: provideZonelessChangeDetection. CLI \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c zoneless \u0440\u0435\u0436\u0438\u043c \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d provideCheckNoChangesConfig \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u043a \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0443. \u041d\u0430 \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043b\u0443\u0447\u0448\u0435 \u0434\u043e\u0436\u0434\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u0442\u0443\u0441\u0430 <strong>Stable<\/strong>.<\/p>\n<\/li>\n<\/ul>\n<h4>SSR: \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438<\/h4>\n<p>API <code>PendingTasks<\/code> \u0441\u0442\u0430\u0431\u0438\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043b\u043e\u0436\u0438\u0442\u044c SSR-\u043e\u0442\u0432\u0435\u0442 \u0434\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447. \u0422\u0430\u043a\u0436\u0435 \u0432 \u0441\u0442\u0430\u0442\u0443\u0441 Developer Preview \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0451\u043d \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 <code>pendingUntilEvent<\/code>.<\/p>\n<h3>\u041a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f:<\/h3>\n<h4>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/h4>\n<ul>\n<li>\n<p>Node: ^20.11.1 || ^22.11.0 || ^24.0.0<\/p>\n<\/li>\n<li>\n<p>TypeScript: &gt;=5.8.0 &lt;5.9.0<\/p>\n<\/li>\n<li>\n<p>RxJS: ^6.5.3 || ^7.4.0<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 Node 18 \u0438 TypeScript &lt;5.8 \u043f\u0440\u0435\u043a\u0440\u0430\u0449\u0435\u043d\u0430.<\/p>\n<h4>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 ng-reflect-* \u0432 dev-\u0440\u0435\u0436\u0438\u043c\u0435<\/h4>\n<p>Angular \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 <code>ng-reflect-*<\/code> \u0432 DOM. \u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0438 \u0442\u0435\u0441\u0442\u044b \u043d\u0430 \u044d\u0442\u043e \u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u2014 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u0441\u044c \u043d\u0430 <code>data-testid<\/code> \u0438\u043b\u0438 <code>data-cy<\/code>.<\/p>\n<h4>\u0423\u0434\u0430\u043b\u0451\u043d InjectFlags<\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u043c\u0435\u0441\u0442\u043e InjectFlags \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a:<\/p>\n<pre><code class=\"javascript\">inject(ElementRef, { optional: true, host: true, skipSelf: true });<\/code><\/pre>\n<h4>\u0414\u0435\u043f\u0440\u0435\u043a\u0435\u0439\u0442 HammerJS<\/h4>\n<p>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 HammerJS \u0441\u043d\u044f\u0442\u0430 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u0430\u043b\u0435\u043d\u0430 \u0432 Angular 21. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 API (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, PointerEvent) \u0438\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u0440\u043e\u0434\u0435 interact.js \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0436\u0435\u0441\u0442\u043e\u0432.<\/p>\n<h3>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 AI<\/h3>\n<p>Angular 20 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e AI:<\/p>\n<ul>\n<li>\n<p><strong>Genkit<\/strong>: \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 AI-\u043c\u043e\u0434\u0435\u043b\u044f\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>Firebase AI Logic<\/strong>: \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 AI-\u043b\u043e\u0433\u0438\u043a\u0438 \u043d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 Firebase.<\/p>\n<\/li>\n<li>\n<p><strong>Gemini API<\/strong>: API \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0447\u0430\u0442-\u0431\u043e\u0442\u043e\u0432, \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<h4>\u0424\u0430\u0439\u043b llms.txt<\/h4>\n<p>\u041d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b llms.txt \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u043c \u043c\u043e\u0434\u0435\u043b\u044f\u043c (LLMs) \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 Angular-\u043a\u043e\u0434:<\/p>\n<h4>\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0435:<\/h4>\n<p>Angular 20 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 Chrome DevTools, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u0432 \u0438 AI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f effect \u0438\u043b\u0438 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u0432 SSR). \u042d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043e\u0442\u043b\u0430\u0434\u043a\u0443 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>Angular 20 \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0435\u0440\u044c\u0451\u0437\u043d\u044b\u0439 \u0448\u0430\u0433 \u0432\u043f\u0435\u0440\u0451\u0434: \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445, \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0441\u0438\u0433\u043d\u0430\u043b\u044c\u043d\u044b\u0435 API, \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043a zoneless-\u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435.<\/p>\n<p>\u041e\u0436\u0438\u0434\u0430\u0435\u043c \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c Signal Forms \u0438 Selectorless Components, \u043d\u043e \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 Angular 20 \u2014 \u044d\u0442\u043e \u043c\u043e\u0449\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u043e\u0442\u043b\u0438\u0447\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c\u044e.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/914934\/\"> https:\/\/habr.com\/ru\/articles\/914934\/<\/a><br \/><\/br><\/br><\/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-461830","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/461830","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=461830"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/461830\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=461830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=461830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=461830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}