Angular 및 ZoneLess

Angular 14, 15...19를 사용해도 상관없습니다. 귀하의 앱은 여전히 ​​Zone.js 보호 아래 있습니다. Angular 앱이 잘 작동한다고 느낄 수도 있지만 내부적으로는 Zone.js를 사용하여 Angular가 전체 DOM 트리를 반복해야 하므로 앱 성능에 영향을 미칩니다. 이는 Zone.js가 모킹 패치를 사용하여 DOM 이벤트를 수신하고 앱에서 이벤트가 트리거될 때 Angular에 알리기 때문에 발생합니다. Zone.js는 애플리케이션의 상태나 변경의 원인을 모르기 때문에 Angular는 모든 노드를 확인해야 합니다. 앱에서.

영역 없는 접근 방식으로 전환한 후에는 ChangeDetectorRef.markForCheck(AsyncPipe), ComponentRef.setInput 또는 심지어 신호를 사용하여 변경 사항이나 afterNextRender 또는 `afterRender`와 같은 새로운 수명 주기 후크에 반응할 수 있습니다.

ZoneLess로 이동

먼저 Angular 19 CLI ng new my-zoneless-app을 사용하여 새 프로젝트를 만듭니다.

ng new my-zoneless-app
✔ Which stylesheet format would you like to use? Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss        
        ]
✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? no
CREATE my-zoneless-app/README.md (1476 bytes)
CREATE my-zoneless-app/.editorconfig (314 bytes)
CREATE my-zoneless-app/.gitignore (587 bytes)
CREATE my-zoneless-app/angular.json (2800 bytes)
CREATE my-zoneless-app/package.json (1046 bytes)
CREATE my-zoneless-app/tsconfig.json (915 bytes)

npm uninstall zone.js 명령을 실행하여 프로젝트에서 Zone.js를 제거하세요.

npm uninstall zone.js

Angular.json 파일을 편집하여 둘 다에서 zone.js 및 zone.js/testing을 제거하여 빌드에서 제거합니다. 명시적 polyfills.ts 파일을 사용하는 프로젝트는 import 'zone.js'를 제거해야 합니다. 'zone.js/testing'을 가져옵니다. 파일에서.

zonejs 없이 각도를 활성화하려면 app.config.ts 파일을 열고 공급자 섹션에서 ProvideZoneChangeDetection({ eventCoalescing: true })을 제거하고 ProvideExperimentalZonelessChangeDetection()을 추가하세요.

providExperimentalZonelessChangeDetection은 실험적입니다

app.config는 다음과 같습니다.

import {ApplicationConfig, provideExperimentalZonelessChangeDetection, provideZoneChangeDetection} from '@angular/core';
import { provideRouter } from '@angular/router';
​
import { routes } from './app.routes';
​
export const appConfig: ApplicationConfig = {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    provideRouter(routes)]
};

그냥 서브를 실행하면서 변경사항을 저장하세요!! 우리 앱은 이전과 동일하게 작동하지만 NgZone이 없습니다! ?

완벽하지만 기본적으로 영역 없는 생성을 만들고 싶을 수도 있습니다. 걱정하지 마세요. Angular CLI를 사용하면 플래그를 사용하여 이를 수행할 수 있습니다.

기본적으로 영역 없는 앱을 생성하시겠습니까?

Angular CLI를 사용하여 직접 영역 없는 앱을 만들고 --experimental-zoneless 플래그를 사용하여 새 프로젝트를 만듭니다.

ng new fastweb --experimental-zoneless

--experimental-zoneless 플래그는 기본적으로 영역 없는 프로젝트를 설정하여 Angular Zone 없이 작동하도록 구성합니다.

슬프게도 Angular 19.0.1에서는 npm uninstall zonejs를 실행하여 "zone.js" 패키지를 수동으로 제거해야 합니다

이제 Angular 19에서 영역 없는 앱을 구축할 준비가 되었습니다!

요약

zone.js 기존 애플리케이션을 제거하거나 CLI 플래그를 사용하여 기본적으로 생성하는 방법을 배웠습니다. ZoneJS 없이 앱 빌드를 시작하시기 바랍니다. ?

소스코드: https://github.com/danywalls/zoneless-angular-app

위 내용은 Angular 및 ZoneLess의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!