Angular 11 – 알아야 할 모든 것

게시 됨: 2021-03-31

Angular 버전 11이 출시되었으며 개발자를 위한 몇 가지 훌륭한 업데이트를 제공합니다. 프레임워크에서 구성 요소 및 CLI에 이르기까지 모든 것이 업데이트됩니다. Angular 팀은 업데이트할 때마다 몇 가지 주요 변경 사항을 적용하려고 합니다. 예를 들어 iVY는 Angular 9에서 출시되었고 Typescript 3.8에 대한 지원은 Angular 9.1에서 제공되었으며 Angular Material UI 구성 요소 라이브러리의 수정 사항은 Angular 10에서 제공되었습니다. 오늘은 Angular 11의 기능을 살펴보겠습니다. 그 다음에.

Angular 11 – 기능 및 업데이트

이 버전의 하이라이트는 더 엄격한 유형, 글꼴 자동 인라인 및 라우터 성능 개선입니다. 업데이트되는 앱에 대해 기본 자동 글꼴 인라인이 활성화됩니다. 향상된 라우터 성능으로 애플리케이션이 더 빠르게 만들어집니다. 이 외에도 아래에 나열할 Angular 11에 더 많은 것이 있습니다.

#컴포넌트 테스트 하네스

Angular 버전 9에서 커뮤니티는 Component Test Harnesses를 도입했습니다. 이는 Angular Material 구성 요소를 테스트하는 데 도움이 되는 강력한 API 표면을 제공했습니다. 개발자는 지원되는 API를 사용하여 구성 요소와 상호 작용할 수 있습니다.

버전 11에서는 각 구성 요소에 대해 구성 요소 하네스를 사용할 수 있습니다. 성능 향상, 업데이트 및 새로운 API가 많이 제공됩니다. 이제 병렬 기능을 사용하면 개발자가 구성 요소와 여러 비동기 상호 작용을 병렬로 실행할 수 있으므로 테스트 내에서 비동기 작업을 쉽게 처리할 수 있습니다. 예를 들어, 수동 변경 감지 기능을 사용하면 단위 테스트 내에서 자동 변경 감지를 비활성화하여 감지를 더 잘 제어할 수 있습니다.

#핫 모듈 교체 지원 업데이트

핫 모듈 교체 또는 HMR은 전체 브라우저를 새로 고치지 않고도 모듈을 교체할 수 있는 메커니즘입니다. 이것은 오래된 개념이지만 Angular 11은 여기에 더 많은 것을 추가합니다.

Angular 11은 필요한 코드 변경 및 구성과 함께 HMR에 대한 지원을 제공합니다. 이를 통해 CLI는 ng serve로 앱을 시작하는 동안 HMR을 활성화할 수 있습니다. 시작하려면 다음 명령이 필요합니다.

ng 서브 -hmr

따라서 CLI 명령은 HMR을 구성하는 데 필요한 노력을 크게 줄입니다. 개발자가 이 명령을 삽입하면 로컬 서버에서 HMR이 활성 상태임을 확인하는 즉시 콘솔에 메시지가 표시됩니다.

개발 중에 템플릿, 스타일 및 구성 요소에 대한 최신 변경 사항은 실행 중인 응용 프로그램에 자동으로 업데이트됩니다. 전체 페이지를 새로 고칠 필요가 없으므로 개발자의 생산성이 향상됩니다.

#업데이트된 언어 서비스 미리보기

Angular Language Service는 웹 사이트 개발 회사의 전문가에 따르면 번거롭지 않은 웹 개발을 보장하는 다양한 유용한 도구를 제공합니다. 업데이트된 언어 서비스는 개발자에게 보다 정확한 경험을 제공할 것입니다. 그들은 더 나은 렌더러와 뷰 엔진으로 어떻게 작동하는지 미리 볼 수 있습니다. 언어 서비스는 TypeScript 컴파일러와 마찬가지로 템플릿에서 제네릭 유형을 적절하게 유추할 수 있습니다.

#글꼴 자동 인라인

Angular 11은 Google 아이콘과 글꼴을 색인 HTML에서 인라인으로 변환하는 데 도움이 되는 자동 글꼴 인라인을 제공합니다. 컴파일하는 동안 Angular CLI는 응용 프로그램에서 연결되고 사용되는 인라인 글꼴을 다운로드하고 결과적으로 포함합니다. 구성을 위해 기본적으로 활성화되어 있습니다.

이것은 버전 11로 빌드된 애플리케이션에서 기본값으로 설정됩니다. 따라서 이 최적화의 이점을 활용하려면 개발자가 먼저 앱을 업데이트해야 합니다.

#웹팩 5 지원

Webpack은 많은 파일을 하나의 작은 파일이나 번들로 컴파일하는 데 사용됩니다. 최신 버전인 Webpack 5가 몇 달 전에 출시되었습니다.

Angular 11은 webpack 5에 대한 실험적 지원을 제공하며 개발자는 이를 사용하여 새로운 것을 시도할 수 있습니다. Angular 팀은 웹팩이 더 안정되면 더 작은 번들과 더 빠른 빌드를 달성하기 위해 실험 지원을 확장할 수 있습니다.

다음은 webpack 5를 사용하기 위한 명령입니다. package.json 파일에 다음 줄을 추가합니다.

"해결책": {
"웹팩": "5.4.0"
}

#ESLint로 이동

TSLint는 Angular 개발 서비스 제공업체에서 사용하고 권장하는 가장 인기 있는 목록 도구 중 하나입니다. 최근에는 ESLint에 임무가 이양되었습니다.

Angular 11에서 Codelyzer와 TSLint는 공식적으로 더 이상 사용되지 않으며 향후 버전에서 제거될 예정입니다. 최신 버전에서는 TSLint에서 ESLint로 마이그레이션하는 3단계 방법을 도입했습니다.

1단계 – ng add @angular-eslint/schematics 실행
2단계 – 이제 ng g @angular/schematics:convert-tslint-to-eslint {{YOUR PROJECT NAME}} 명령을 실행합니다.
3단계 – 루트 수준 tslint.json을 제거합니다.

#빠른 빌드

Angular 11은 급격한 속도 향상을 가져옵니다. NGCC 업데이트 프로세스가 이전보다 2~4배 빨라졌습니다. 따라서 개발자는 빌드 및 재구축 완료를 기다리는 데 오랜 시간을 할애할 필요가 없습니다.

#TypeScript 4.0 지원

Angular 11은 TypeScript 4.0을 지원합니다. 이제 TypeScript 3.9에 대한 지원이 중단되었습니다. 이 이면의 주요 이유 중 하나는 빌드 속도를 높이는 것입니다. 최신 버전은 이전 버전보다 빠르고 부드러운 빌드를 보장합니다.

#더 나은 로깅 및 보고

최신 Angular 버전은 빌더 단계 보고에 다양한 변경 사항을 가져오므로 개발 중에 더 유용합니다. CLI 출력에는 보다 사용자 친화적이고 읽기 쉬운 정보가 포함됩니다.

#기타 변경 사항

위에서 언급한 것 외에도 최신 Angular 버전은 다음과 같은 몇 가지 다른 변경 사항을 제공합니다.

서비스 작업자 개선 사항
새로운 자동화된 회로도 및 마이그레이션
다양한 명명된 콘센트에 대한 지연 로딩 지원
Internet Explorer 9,10 및 IE 모바일 지원이 완전히 제거되었습니다.
PreserveQueryParams 는 라우터에서 제거됩니다. 대신 개발자는 queryParamsHandling=”preserve” 를 사용할 수 있습니다.
더 엄격한 유형은 이제 파이프에 내장됩니다.
Angular CLI는 리졸브 가드를 생성할 수 있습니다.
formatDate 함수는 ISO 8601 주 번호 매기기 연도 형식을 지원합니다.
ICU 내의 표현식이 이제 다시 유형 검사됩니다.
비동기 파이프는 정의되지 않은 것으로 입력된 입력에 대해 더 이상 정의되지 않은 것을 반환하지 않습니다.

Angular 11로 업데이트하는 방법

Angular 개발자를 고용하여 애플리케이션을 Angular 11로 업데이트할 수 있습니다. 개발자는 다음 명령을 실행해야 합니다.

ng 업데이트 @angular/cli @angular/core

기사가 도움이 되었나요? 지인들과 공유하고 Angular 11에 대한 모든 것을 알려주세요.