Что нового в Angular 20

import { signal } from '@angular/core';
 
const counter = signal(0);
 
function increment() {
  counter.set(counter() + 1);
  // или альтернативно
  // counter.update(value => value + 1);
}

import { provideZonelessChangeDetection } from '@angular/core';
 
bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()]
});

const name = signal('');
const isValid = computed(() => name().length > 2);

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideZonelessChangeDetection } from '@angular/core';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection()
  ]
};

constructor(private cdr: ChangeDetectorRef) {}
 
onThirdPartyEvent() {
  // Что-то происходит в сторонней библиотеке
  this.someValue = newValue;
  this.cdr.detectChanges(); // Вручную запускаем обнаружение изменений
}

@Component({
  selector: 'virtual-scroll-demo',
  template: `
    <div class="viewport">
      @for (item of virtualItems(); track item.id) {
        <div class="item">{{ item.name }}</div>
      }
    </div>
  `,
  styles: [`
    .viewport {
      height: 500px;
      overflow-y: auto;
    }
  `]
})
export class VirtualScrollDemoComponent {
  private allItems = Array.from({ length: 10000 }).map((_, i) => ({
    id: i,
    name: [INLINE]Item ${i}[/INLINE]
  }));
  
  virtualItems = signal(this.allItems.slice(0, 20));
  
  constructor(private elementRef: ElementRef) {
    // Настройка виртуализации...
  }
}

const routes: Routes = [
  {
    path: 'profile',
    loadComponent: () => import('./profile/profile.component').then(m => m.ProfileComponent)
  }
];

ng build --stats-json
npx webpack-bundle-analyzer dist/stats.json

npm install -g source-map-explorer
ng build --source-map
source-map-explorer dist/*.js

@Component({
  // ...
})
export class DataComponent {
  constructor() {
    // Эффект привязан к жизненному циклу компонента
    effect(() => {
      console.log('Данные обновились:', this.data());
    });
  }
  
  data = signal([]);
}

ng generate web-worker main

// component.ts
const worker = new Worker(new URL('./app.worker', import.meta.url));
 
processLargeData(data: any[]) {
  worker.postMessage(data);
  
  worker.onmessage = ({ data }) => {
    this.processedData.set(data); // Обновляем сигнал с результатом
  };
}
 
// app.worker.ts
addEventListener('message', ({ data }) => {
  // Выполняем тяжелые вычисления
  const result = heavyProcessing(data);
  postMessage(result);
});

// Создаём общую память между потоками
const sharedBuffer = new SharedArrayBuffer(1024);
const sharedArray = new Int32Array(sharedBuffer);
 
// Передаём ссылку на буфер воркеру
worker.postMessage({ buffer: sharedBuffer });

bootstrapApplication(AppComponent, {
providers: [
  provideClientHydration(),
  provideServerRendering()
]
});

// angular.json
{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            // ...
          }
        },
        "prerender": {
          "builder": "@angular-devkit/build-angular:prerender",
          "options": {
            "routes": [
              "/",
              "/products",
              "/about"
            ]
          }
        }
      }
    }
  }
}

// Традиционный подход
@Component({
  template: `
    <input [(ngModel)]="searchText">
    <div *ngFor="let item of filteredItems">{{ item.name }}</div>
  `
})
export class OldComponent {
  searchText = '';
  items = [/* много элементов */];
  
  get filteredItems() {
    return this.items.filter(i => i.name.includes(this.searchText));
  }
}
 
// Подход с сигналами в Angular 20
@Component({
  template: `
    <input [value]="searchText()" (input)="updateSearch($event)">
    @for (item of filteredItems(); track item.id) {
      <div>{{ item.name }}</div>
    }
  `
})
export class NewComponent {
  searchText = signal('');
  items = [/* много элементов */];
  
  filteredItems = computed(() => 
    this.items.filter(i => i.name.includes(this.searchText()))
  );
  
  updateSearch(event: Event) {
    this.searchText.set((event.target as HTMLInputElement).value);
  }
}

const userResource = resource(() => {
  return fetchUserData(this.userId());
});
 
// Данные автоматически загружаются при создании ресурса
// и перезагружаются при изменении this.userId()
// При уничтожении компонента ресурс автоматически очищается

// В режиме разработки можно включить профилирование памяти
import { enableMemoryProfiling } from '@angular/core/profiling';
 
if (environment.development) {
  enableMemoryProfiling();
}

# Для общей оценки производительности
npx lighthouse [url]https://ваш-сайт.com[/url]
 
# Для профилирования рантайма
ng serve --prod --profile
 
# Для анализа размера бандла
npm install -g source-map-explorer
ng build --source-map
source-map-explorer dist/main.*.js

// Традиционный подход с NgModule
@NgModule({
  providers: [UserService]
})
export class UserModule {}
 
// Новый подход в Angular 20
bootstrapApplication(AppComponent, {
  providers: [
    provideUserService(), // Функциональный провайдер
    {provide: API_URL, useValue: 'https://api.example.com'} // Токен инъекции
  ]
});

export function provideAuth(config: AuthConfig) {
  return [
    {provide: AUTH_CONFIG, useValue: config},
    AuthService,
    // Условная регистрация провайдеров
    ...config.useOAuth ? [OAuthService] : [],
    ...config.useBiometrics ? [BiometricService] : [],
    
    // Перехватчики и защита маршрутов
    {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true},
    {
      provide: 'canActivateAuth',
      useFactory: (authService: AuthService) => () => authService.isAuthenticated(),
      deps: [AuthService]
    }
  ];
}
 
// Использование
bootstrapApplication(AppComponent, {
  providers: [
    provideAuth({
      useOAuth: true,
      useBiometrics: isPlatformSupported('biometrics')
    })
  ]
});

@Component({
  // Селектор больше не обязателен для динамически создаваемых компонентов
  standalone: true,
  imports: [CommonModule],
  template: [INLINE]<h1>{{title}}</h1>[/INLINE]
})
export class DynamicModalComponent {
  title = 'Динамический компонент';
}

@Component({
  selector: 'app-root',
  standalone: true,
  template: [INLINE]<button (click)="openModal()">Открыть модальное окно</button>[/INLINE]
})
export class AppComponent {
  constructor(private viewContainerRef: ViewContainerRef) {}
  
  async openModal() {
    // Динамическое создание компонента без прописанного селектора
    const { DynamicModalComponent } = await import('./dynamic-modal.component');
    this.viewContainerRef.createComponent(DynamicModalComponent);
  }
}

@Component({
  selector: 'user-profile',
  template: [INLINE]<div>{{userData().name}}</div>[/INLINE]
})
export class UserProfileComponent {
  userId = input<string>(); // Новый API для входных параметров
  userData = signal<User | null>(null);
  
  // Новый lifecycle-хук для сигналов
  constructor() {
    // Эффект создается и привязывается к жизненному циклу компонента
    effect(() => {
      if (this.userId()) {
        this.loadUserData(this.userId());
      }
    });
  }
  
  private loadUserData(id: string) {
    fetch(`/api/users/${id}`)
      .then(res => res.json())
      .then(user => this.userData.set(user));
  }
}

// store.ts
export const counterState = signal(0);
export const increment = () => counterState.update(state => state + 1);
export const decrement = () => counterState.update(state => state - 1);
export const reset = () => counterState.set(0);
 
// Селекторы как computed-значения
export const isPositive = computed(() => counterState() > 0);
export const isNegative = computed(() => counterState() < 0);
 
// component.ts
@Component({
  selector: 'counter',
  template: `
    <div>Счетчик: {{counter()}}</div>
    <button (click)="increment()">+</button>
    <button (click)="decrement()">-</button>
    <button (click)="reset()">Reset</button>
    <div *ngIf="isPositive()">Положительное число</div>
  `
})
export class CounterComponent {
  // Используем сигналы из хранилища
  counter = counterState;
  isPositive = isPositive;
  
  // Методы из хранилища
  increment = increment;
  decrement = decrement;
  reset = reset;
}

// Создаем хранилище с иммутабельным состоянием
export function createStore<T>(initialState: T) {
  const state = signal<T>(initialState);
  
  // Функция для отправки экшенов
  function dispatch(reducer: (state: T) => T) {
    state.update(currentState => reducer(currentState));
  }
  
  // Функция для создания селекторов
  function select<R>(selector: (state: T) => R) {
    return computed(() => selector(state()));
  }
  
  return { state, dispatch, select };
}
 
// Использование
const store = createStore({ counter: 0, user: null });
 
// Диспатч "экшена"
store.dispatch(state => ({...state, counter: state.counter + 1}));
 
// Создание селектора
const counter = store.select(state => state.counter);
console.log(counter()); // 1

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';
import { provideHttpClient } from '@angular/common/http';
 
bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    // Другие провайдеры...
  ]
});

// features/auth/auth.providers.ts
export function provideAuth() {
  return [
    AuthService,
    {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true}
  ];
}
 
// features/products/products.providers.ts
export function provideProducts() {
  return [
    ProductService,
    CategoryService
  ];
}
 
// main.ts
bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideAuth(),
    provideProducts()
  ]
});

// angular.json (для Shell-приложения)
{
  "projects": {
    "shell": {
      "architect": {
        "build": {
          "builder": "@angular-architects/module-federation:build",
          "options": {
            "federationConfig": "src/federation.config.js"
          }
        }
      }
    }
  }
}
 
// federation.config.js
module.exports = {
  name: 'shell',
  remotes: {
    microApp1: "http://localhost:4201/remoteEntry.js",
    microApp2: "http://localhost:4202/remoteEntry.js"
  }
}

// Маршрутизация для Shell-приложения с динамической загрузкой микрофронтендов
const routes: Routes = [
  {
    path: 'micro-app-1',
    loadChildren: () => import('microApp1/Module').then(m => m.MicroApp1Module)
  },
  {
    path: 'micro-app-2',
    loadComponent: () => import('microApp2/Component').then(c => c.MicroApp2Component)
  }
];

// Настройка shared-библиотек
module.exports = {
  // ...
  shared: {
    "@angular/core": { singleton: true, eager: true },
    "@angular/common": { singleton: true, eager: true },
    "@angular/router": { singleton: true, eager: true },
    "my-shared-lib": { singleton: true }
  }
};

@Component({
  selector: 'user-card',
  template: `
    <div class="card">
      <h2>{{name()}}</h2>
      <p>ID: {{userId()}}</p>
    </div>
  `
})
export class UserCardComponent {
  // Новый синтаксис для @Input с использованием сигналов
  name = input<string>('Гость'); // С дефолтным значением
  userId = input.required<number>(); // Обязательный параметр
  
  // Трансформирующий input
  createdDate = input<string, Date>({
    transform: (isoString) => new Date(isoString)
  });
}

@Component({
  selector: 'custom-button',
  template: [INLINE]<button (click)="handleClick($event)">{{label()}}</button>[/INLINE]
})
export class CustomButtonComponent {
  label = input<string>('Нажать');
  
  // Новый синтаксис для @Output
  clicked = output<MouseEvent>();
  
  handleClick(event: MouseEvent) {
    this.clicked.emit(event);
  }
}

@Component({
  selector: 'tabs-container',
  template: `
    <div class="tabs">
      <ng-content></ng-content>
    </div>
  `
})
export class TabsContainerComponent {
  // Новый функциональный декоратор для доступа к дочерним компонентам
  tabComponents = viewChildren(TabComponent);
  
  ngAfterViewInit() {
    // tabComponents() возвращает сигнал с массивом компонентов
    console.log(`У нас ${this.tabComponents().length} вкладок`);
    
    // Реагируем на изменения в составе дочерних компонентов
    effect(() => {
      this.updateTabNavigation(this.tabComponents());
    });
  }
}

@Component({
  selector: 'registration-form',
  template: `
    <form>
      <input [value]="username()" (input)="updateUsername($event)">
      <input type="password" [value]="password()" (input)="updatePassword($event)">
      <input type="password" [value]="confirmPassword()" (input)="updateConfirmPassword($event)">
      
      @if (passwordMismatch()) {
        <div class="error">Пароли не совпадают!</div>
      }
      
      <button [disabled]="!formValid()">Зарегистрироваться</button>
    </form>
  `
})
export class RegistrationFormComponent {
  // Базовые сигналы для полей формы
  username = signal('');
  password = signal('');
  confirmPassword = signal('');
  
  // Вычисляемые сигналы для валидации
  passwordMismatch = computed(() => 
    this.password() !== '' && 
    this.confirmPassword() !== '' && 
    this.password() !== this.confirmPassword()
  );
  
  usernameValid = computed(() => this.username().length >= 4);
  passwordValid = computed(() => this.password().length >= 8);
  
  // Общая валидность формы
  formValid = computed(() => 
    this.usernameValid() && 
    this.passwordValid() && 
    !this.passwordMismatch()
  );
  
  // Обработчики событий
  updateUsername(event: Event) {
    this.username.set((event.target as HTMLInputElement).value);
  }
  
  updatePassword(event: Event) {
    this.password.set((event.target as HTMLInputElement).value);
  }
  
  updateConfirmPassword(event: Event) {
    this.confirmPassword.set((event.target as HTMLInputElement).value);
  }
}

@Component({
  selector: 'data-dashboard',
  template: [INLINE]<div>Данные загружаются...</div>[/INLINE]
})
export class DataDashboardComponent {
  userId = input<string>();
  userType = input<string>();
  
  dashboardData = signal<any>(null);
  
  constructor(private dataService: DataService) {
    // Автоматически реагируем на изменения входных параметров
    // и перезагружаем данные
    effect(() => {
      const id = this.userId();
      const type = this.userType();
      
      if (id && type) {
        this.loadDashboard(id, type);
      }
    });
  }
  
  private loadDashboard(id: string, type: string) {
    this.dataService.getDashboard(id, type)
      .then(data => this.dashboardData.set(data));
  }
}

# Создание нового проекта с Vitest вместо Karma
ng new my-app --test-runner=vitest
 
# Для существующего проекта
ng generate @angular/core:vitest

import { describe, it, expect } from 'vitest';
import { TestBed } from '@angular/core/testing';
import { UserProfileComponent } from './user-profile.component';
 
describe('UserProfileComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [UserProfileComponent]
    });
  });
 
  it('should create the component', () => {
    const fixture = TestBed.createComponent(UserProfileComponent);
    const component = fixture.componentInstance;
    expect(component).toBeTruthy();
  });
 
  it('should display user name when provided', async () => {
    const fixture = TestBed.createComponent(UserProfileComponent);
    const component = fixture.componentInstance;
    component.user.set({ name: 'Иван', id: 1 });
    fixture.detectChanges();
    await fixture.whenStable();
    const nameElement = fixture.nativeElement.querySelector('.user-name');
    expect(nameElement.textContent).toContain('Иван');
  });
});

# Новый генератор сигнал-компонентов
ng generate signal-component my-feature
 
# Генерация стилей с CSS-переменными
ng generate signal-component my-feature --style=css-variables
 
# Анализ размера бандла и зависимостей
ng analytics bundle-size

# Запуск с профилированием производительности
ng serve --profile
 
# Анализ бандла после сборки
ng build --analyze-bundle

ng lint --fix-style --fix-code

// В режиме разработки можно включить расширенную отладку
import { enableDebugTools } from '@angular/platform-browser';
 
if (environment.development) {
  enableDebugTools(appRef);
}

# Добавление PWA в существующий проект
ng add @angular/pwa
 
# Генерация иконок для разных платформ
ng generate pwa-assets

// Проверка и использование возможностей устройства
import { DeviceAPI } from '@angular/pwa';
 
@Component({
  // ...
})
export class CameraComponent {
  constructor(private deviceApi: DeviceAPI) {}
 
  async takePhoto() {
    if (await this.deviceApi.hasCapability('camera')) {
      const photo = await this.deviceApi.camera.takePhoto();
      this.userPhoto.set(photo);
    } else {
      // Fallback для устройств без камеры
      this.showFileUpload();
    }
  }
}

// Настройка стратегии кеширования для разных ресурсов
import { registerCache } from '@angular/service-worker';
 
registerCache({
  urls: ['/api/products'],
  strategy: 'staleWhileRevalidate',
  maxEntries: 50
});
 
// Настройка фоновой синхронизации
import { BackgroundSync } from '@angular/pwa';
 
@Injectable({ providedIn: 'root' })
export class OrderService {
  constructor(private http: HttpClient, private sync: BackgroundSync) {}
 
  submitOrder(order: Order) {
    try {
      return this.http.post('/api/orders', order);
    } catch (e) {
      // Если нет сети, ставим в очередь на синхронизацию
      this.sync.registerForSync('pending-orders', {
        data: order,
        url: '/api/orders',
        method: 'POST'
      });
      return of({ status: 'pending' });
    }
  }
}

// Использование нативного API для обмена данными
@Component({
  // ...
})
export class ShareComponent {
  shareContent() {
    if (navigator.share) {
      navigator.share({
        title: 'Взгляните на это!',
        text: 'Очень интересная статья',
        url: window.location.href,
      });
    } else {
      // Fallback для браузеров без поддержки Share API
      this.openCustomShareDialog();
    }
  }
}

@Component({
  selector: 'lazy-image',
  template: `
    <img 
      [src]="imageSrc()" 
      [attr.loading]="loading" 
      [attr.fetchpriority]="priority">
  `
})
export class LazyImageComponent {
  imageSrc = signal('placeholder.jpg');
  
  @Input() src: string;
  @Input() loading: 'lazy' | 'eager' = 'lazy';
  @Input() priority: 'high' | 'low' | 'auto' = 'auto';
  
  constructor(private el: ElementRef) {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        this.imageSrc.set(this.src);
        observer.disconnect();
      }
    });
    
    observer.observe(this.el.nativeElement);
  }
}

// Использование новых утилитарных типов
type User = {
  id: number;
  name: string;
  email: string;
  preferences?: {
    theme: 'light' | 'dark';
    notifications: boolean;
  }
};
 
// TypeScript 5.8 позволяет получать глубокие ключи объектов
type DeepKeys<T> = T extends object
  ? { [K in keyof T]: K extends string
      ? T[K] extends object
        ? `${K}.${DeepKeys<T[K]>}`
        : K
      : never
    }[keyof T]
  : never;
 
// Теперь можно типизировать глубокие пути в объектах
function getNestedValue<T, K extends DeepKeys<T>>(obj: T, key: K): any {
  const parts = key.split('.');
  let value: any = obj;
  
  for (const part of parts) {
    value = value[part];
  }
  
  return value;
}
 
// Пример использования
const user: User = { id: 1, name: 'Анна', email: 'anna@example.com' };
const name = getNestedValue(user, 'name'); // Типизировано как string
const theme = getNestedValue(user, 'preferences.theme'); // Типизировано как 'light' | 'dark'

// Angular 20 корректно выводит типы из сигналов
const users = signal<User[]>([]);
const activeUser = computed(() => users().find(u => u.id === activeId()));
 
// TypeScript правильно определяет тип как User | undefined
const userName = computed(() => activeUser()?.name);

@Component({
  template: `
    <!-- Это вызовет ошибку компиляции, если user может быть null -->
    <div>{{ user.name }}</div>
    
    <!-- Правильный способ -->
    @if (user) {
      <div>{{ user.name }}</div>
    }
  `
})
export class UserComponent {
  user = signal<User | null>(null);
}

node -v

npm install typescript@5.8 --save-dev

git add .
git commit -m "Состояние перед миграцией на Angular 20"

npm uninstall -g @angular/cli
npm install -g @angular/cli@20

ng version

ng update @angular/core@20 @angular/cli@20

// Было
@Component({
  // ...
})
export class CounterComponent {
  count = 0;
  
  increment() {
    this.count++;
  }
}
 
// Стало
@Component({
  // ...
})
export class CounterComponent {
  count = signal(0);
  
  increment() {
    this.count.update(c => c + 1);
  }
}

import { provideZonelessChangeDetection } from '@angular/core';
 
export const appConfig: ApplicationConfig = {
  providers: [provideZonelessChangeDetection()]
};

constructor(private cdr: ChangeDetectorRef) {}
 
onThirdPartyEvent() {
  // Код, работающий со сторонней библиотекой
  this.cdr.detectChanges();
}

Chrome >= 107
Firefox >= 104
Safari >= 16

ng test --no-watch
ng e2e

ng build --stats-json
npx webpack-bundle-analyzer dist/stats.json

ng serve --ssr

rm -rf node_modules package-lock.json
npm install

provideZonelessChangeDetection({ ngZone: 'noop' })

// angular.json
{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "options": {
            "browserTarget": {
              "modern": true,
              "legacy": true
            }
          }
        }
      }
    }
  }
}

Time to Interactive:
Angular 20: 1.4с
React 19: 1.3с
Vue 4: 1.2с

// Angular 20
const count = signal(0);
const doubleCount = computed(() => count() * 2);
function increment() { count.update(c => c + 1); }
 
// React 19
const [count, setCount] = useState(0);
const doubleCount = useMemo(() => count * 2, [count]);
const increment = () => setCount(c => c + 1);
 
// Vue 4
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
function increment() { count.value++; }