Angular 11의 새로운 점은 무엇입니까?

Angular 11의 새로운 점은 무엇입니까?

Angular는 그것의 주목할만한 프레임워크의 버전 11을 막 출시했으므로 Angular의 최신 기능에 대해 알아보자.

구성 요소 테스트 하니스

구성요소 테스트 하니스를 사용하면 지원되는 API를 사용하여 구성요소와 상호 작용할 수 있습니다. 이것은 Angular 9에 처음 소개되었다. 이러한 API는 최종 사용자와 유사한 방식으로 구성 요소와 상호 작용할 수 있는 기능을 가지고 있으며, 테스트에서는 DOM의 변화에 대해 자체적으로 절연할 수 있습니다.

당시 이 메커니즘은 Angular 재료만 지원했습니다. 하지만 최신 릴리즈에서는 모든 구성 요소에 대해 구성 요소 하니스를 사용할 수 있습니다.

다음 예제는 Angular 재료에서 MatButtonHarness 의 사용을 보여줍니다.

업데이트된 HMR(핫 모듈 교체) 지원

핫 모듈 교체는 전체 브라우저를 새로 고치지 않고도 모듈을 교체할 수 있는 메커니즘입니다. HMR은 Angular에 완전히 새로운 것이 아니며 개발자들은 이전 버전에서도 사용할 수 있었다. 그러나 Angular 11을 사용하면 HMR을 구성하는 데 필요한 작업량이 대폭 줄어들었고 이를 위한 CLI 명령을 제공했습니다.

이제 ng serve 명령을 hmr 태그와 함께 사용하여 HMR을 활성화할 수 있습니다.

ng serve --hmr

TypeScript 4.0 지원

이 최신 업데이트로 Angular 팀은 TypeScript 3.9에 대한 지원을 중단했습니다. 이제 Angular 11은 TypeScript 4.0만 지원합니다.

이러한 업그레이드의 주요 이유 중 하나는 빌드 속도를 높이기 위한 것입니다. Angular 11은 이전 버전보다 훨씬 빠른 빌드를 보장합니다.

웹 팩 5 지원

아시다시피 웹 팩은 많은 수의 파일을 단일 번들 또는 단일 파일로 컴파일하는 데 사용됩니다. 웹팩 5는 최신 버전으로 지난 달에 출시되었다. 그것은 아직 완전히 안정되지 않았다.

그러나 Angular 11은 웹팩 5에 대한 실험적인 지원을 제공하며 Angular 11과 함께 사용하면 새로운 것을 시도할 수 있습니다. 릴리스 정보에 따르면 Angular 팀은 일단 안정된 상태가 되면 더 빠른 빌드 및 작은 번들을 달성할 수 있도록 이 실험 지원을 확장할 수 있다고 믿고 있습니다.

웹 팩 5를 사용 중인 경우 다음 줄을 패키지 에 추가하는 것으로 시작할 수 있습니다.json 파일:

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

ESLINT로 이동

TSLint는 오랫동안 개발자들 사이에서 가장 인기 있는 보풀 도구 중 하나였다. 그러나 그것은 최근에 더 이상 사용되지 않았고 의무는 ESLINT에 넘겨졌다.

Angular도 버전 11 업데이트로 TSLint에서 ESLint로 이동하고 있으며 Angular에서는 다시 보풀 용도로 TSLint를 사용할 수 없습니다. Angular는 TSLint에서 ESLint로 마이그레이션하는 3단계 방법을 도입했다.

1. 관련 종속성 추가

ng add @각선-에슬린트/도식

2. 프로젝트에 대한 convert-t slint-to-eslint 도식 실행

ng @각선-에스슬린트/도형:slint-to-eslint {YOUR_PROJECT_NAME_GOES_HERE}

3. 루트 TSLint 구성을 제거하고 ESLint만 사용합니다.

루트 수준 tslint.json 을 제거합니다.

마이그레이션에 대한 자세한 내용은 다음을 참조하십시오.

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

이전에 이 언어 서비스는 View Engine을 기반으로 했습니다. Angular 11은 더 강력하고 정확한 아이비 기반의 새로운 언어 서비스를 제공한다.

이 기능은 아직 개발 중이지만, TypeScript 컴파일러와 유사하게 동작하는 기능을 가지고 있다.

기타 변경 사항

이와 별도로 Angular 11은 다음과 같은 많은 작은 변화를 가져옵니다.

일부 중단되는 변경 사항

결론

이제 Angular 11의 몇 가지 중요한 특징을 이해하셨다고 생각합니다. 그러나 이러한 기능은 Angular 11에서 제공하는 기능 중 일부일 뿐이며 자세한 내용은 블로그에서도 확인할 수 있습니다.

그 동안 프로젝트를 Angular 11로 업데이트하려는 경우 다음 명령만 실행하면 됩니다.

ng 업데이트 @각선/cli @각선/core

읽어주셔서 감사합니다!

자원.

from http://devcloset.tistory.com/47 by ccl(A) rewrite - 2021-02-24 01:00:48