Angular 10.1의 새로운 기능

Angular 10의 후속 포인트 릴리스 인 Angular 10.1.0이 9 월 2 일에 릴리스되어 새로운 메시지 추출 도구와 함께 컴파일러 및 라우터의 성능이 향상되었습니다. 

Angular 10은 6 월 24 일에 프로덕션 릴리스로 정식 출시되었습니다. Google에서 개발 한 TypeScript 기반 프레임 워크의 주요 업그레이드는 새로운 기능보다 품질, 도구 및 에코 시스템 개선에 더 중점을 두었습니다.

Angular 10은 이전 버전의 Angular보다 작습니다. 새로운 기능에는 Angular Material UI 구성 요소 라이브러리의 새로운 날짜 범위 선택기와 CommonJS 가져 오기에 대한 경고가 포함됩니다. CommonJS 가져 오기 경고는 CommonJS로 패키징 된 종속성으로 인해 더 크고 느린 애플리케이션이 생성되어 개발자가 ECMAScript 모듈 번들을 대체 할 수있는 경우 개발자에게 경고합니다.

또한 선택 사항 인 더 엄격한 설정은를 ng new통해 새 작업 공간을 만들 때 더 엄격한 프로젝트 설정을 제공합니다 ng new --strict. 이 플래그를 활성화하면 새로운 설정으로 새 프로젝트를 초기화하여 유지 보수성을 개선하고 버그를 포착하며 CLI가 앱에서 고급 최적화를 수행 할 수 있도록합니다.

Angular 10 다운로드 위치

GitHub에서 Angular 10의 일반 릴리스를 찾을 수 있습니다. 현재 Angular 설치를 업데이트하려면 다음 명령을 실행할 수 있습니다.

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

Angular 10.1.0의 새로운 기능

GitHub에서 사용할 수있는 Angular 10.1.0 릴리스에는 다음과 같은 새로운 기능과 개선 사항이 포함되어 있습니다. 

  • 컴파일러 CLI에서 성능을 향상시키기 위해 Angular 10.1에는 증분 프로그램 재사용에 영향을 미치는 성능 회귀에 대한 수정 사항이 있습니다.
  • 라우터 성능을 위해 prioritizedGuardValue운영자는 CanLoad가드 를 최적화하기 위해 적용됩니다 .
  • ProgramBasedEntryPointFinderEntryPointManifest가능한 경우 진입 점 종속성을로드하는 데 재사용 하므로 ngcc를 호출 할 때마다 다시 구문 분석 할 필요가 없습니다.
  • 새로운 메시지 추출 도구가 지원되며 결국 CLI에 통합됩니다.
  • Bazel 빌드 도구의 경우 링커가 Node.js 런타임 작업에서 대상 을 올바르게 연결할 수 있도록 규칙 LinkabablePackageInfo에 추가됩니다 .ng-moduleng_module
  • 정적 평가 오류에 대해 생성 된 진단에 더 많은 통찰력이 추가됩니다.
  • 절대 URL HTTP 지원을위한 옵션이 추가되었습니다.
  • TypeScript 4.0 지원이 컴파일러에 추가되었습니다.
  • canparse() 진단이 노출됩니다.
  • 라우터, 양식, 컴파일러 CLI 및 ngcc 컴파일러 호환성 도구의 성능이 향상되었습니다.
  • 수명주기 후크 수정은 부트 스트랩 전에 언제든지 수행 할 수 있습니다.
  • 코어, 라우터 및 Angular의 다른 부분에 대해 여러 가지 큰 수정 사항이 제공됩니다.

Angular 10의 새로운 기능

Angular 10의 주요 기능은 다음과 같습니다.

  • 도우미 함수가 포함 된 TypeScript 용 런타임 라이브러리 인 TSlib가 TSlib 2.0으로 업데이트되었습니다. TypeScript 용 TSLint 정적 분석 도구가 TSLint 6으로 업데이트되었습니다.
  • 실제 ngtsc 컴파일러를 래핑하는 컴파일러 인터페이스가 추가되었습니다. 언어 서비스 별 컴파일러는 프로젝트 인터페이스를 사용하여 여러 유형 검사 파일을 관리하고 필요에 따라 Scriptinfos를 만듭니다.
  • 새 프로젝트의 브라우저 구성이 업데이트되어 오래되고 덜 사용되는 브라우저를 제외합니다. Internet Explorer 9, Internet Explorer 10 및 Internet Explorer Mobile에 대한 지원은 더 이상 사용되지 않습니다.
  • Angular 패키지 형식에는 더 이상 ESM5 또는 FESM5 번들이 포함되지 않으므로 실행 중이 yarn거나 npm installAngular 패키지 및 라이브러리의 다운로드 및 설치 시간이 절약됩니다 .
  • 컴파일러의 경우 속성 읽기 및 메서드 호출을위한 이름 범위가 추가되었습니다.
  • EntryPointFinder프로그램 기반 진입 점 찾기 인, tsjconfig.json 파일에 지정된 프로그램의 가져 오기에서 시드 할 수있는 추가되었습니다. 이는 DirectoryWalkerEntryPointFinder활성 프로그램이 설치된 진입 점의 일부만 가져올 때보 다 빠를 것으로 예상됩니다 . 
  • &의심스러운 값과 성능 문제 로 인해과 같은 HTML 항목에서 자동 완성이 제거되고 있습니다 .
  • 명시 적 매핑이 클로저에서 devmode 파일로 노출됩니다. 이 기능은 프로덕션 빌드 입력을 해당 devmode에 해당하는 것으로 변환해야하는 개발 도구를 대상으로합니다.
  • 주요 변경 사항에서는 ModuleWithProviders. ModuleWithProviders패턴이 Ivy 컴파일 및 렌더링 파이프 라인에서 작동 하려면 제네릭 유형 매개 변수가 필요 했지만이 커밋 전에 View Engine에서는 제네릭 유형을 생략 할 수있었습니다. 개발자가 ModuleWithProviders일반 유형없이 사용 하는 경우 버전 10 마이그레이션으로 코드가 업데이트됩니다. 그러나 개발자가 View Engine을 사용 중이고 제네릭 유형이 생략 된 라이브러리에 따라 빌드 오류가 발생합니다. 이 경우 ngcc는 도움이되지 않으며 마이그레이션은 애플리케이션 코드 만 다루게됩니다. 라이브러리를 수정하려면 라이브러리 작성자에게 문의해야합니다. 해결 방법으로 tsconfig에서 skipLibChecks를 false로 설정하거나 Ivy 만 사용하도록 앱을 업데이트 할 수 있습니다.
  • TypeScript 3.9에 대한 지원이 제거 된 TypeScript 3.9가 추가되었습니다. 이것은 브레이킹 체인지입니다. TypeScript 3.6 및 TypeScript 3.7도 더 이상 지원되지 않습니다.
  • 컴파일러 CLI에 대한 유형 검사 성능이 향상되었습니다.
  • 성능을 향상시키기 위해 계산이 basePaths지연되었으므로에서 필요한 경우에만 작업이 수행됩니다 TargetedEntryPointFinder. 이전 basePaths 에는 파인더가 인스턴스화 될 때마다 계산되었는데, 이는 대상 진입 점이 이미 처리 된 경우 노력 낭비였습니다.
  • 여러 번역 파일의 병합이 지원됩니다. 이전에는 로케일 당 하나의 번역 파일 만 허용되었습니다. 이제 사용자는 로케일 당 여러 파일을 지정할 수 있으며 각 파일의 트랜잭션은 메시징 ID로 병합됩니다.
  • 비동기 잠금 시간 제한을 구성 할 수 있습니다. 이렇게하면 AsyncLocker에 대한 retryAttemptsretryDelay 옵션을 설정하기위한 ngcc.config.js 파일에 대한 지원이 추가 됩니다. 통합 테스트는 시간 초과에 대한 새로운 검사를 추가하고 ngcc.config.js를 사용하여 시간 초과 시간을 줄여 테스트가 너무 오래 걸리는 것을 방지합니다.
  • 브레이킹 체인지에서 알 수없는 요소에 대한 경고는 이제 오류로 기록됩니다. 이로 인해 앱이 중단되지는 않지만 console.error를 통해 기록되지 않을 것으로 예상하는 도구가 발생할 수 있습니다. 
  • 또 다른 주요 변경 사항에서는 반환되는 모든 해결 프로그램이 EMPTY탐색을 취소합니다. 탐색을 계속하려면 개발자는 해결 프로그램을 업데이트하여 default!Empty.
  • 메타 데이터에 종속성 정보 및 ng-content 선택기 추가. 이 제안 된 컴파일러 기능은 Angular Language Service와 같은 도구에 유용한 추가 메타 데이터를 제공하여 라이브러리에 정의 된 지시문 / 구성 요소에 대한 제안을 제공하는 기능을 제공합니다.
  • 진입 점 매니페스트의 크기와 매니페스트의 캐싱 기술을 줄여서 성능이 향상되었습니다. 또한 종속성 캐싱은 진입 점 매니페스트에서 수행되며 매번 계산되지 않고 거기에서 읽습니다. 이전에는 진입 점이 처리 할 필요가 없더라도 ngcc (Angular Ivy 호환성 컴파일러)는 진입 점의 파일을 구문 분석하여 종속성을 계산했습니다. 이는 large_node 모듈의 경우 많은 시간이 소요되었습니다.
  • ngcc 성능을 향상시키기 위해 이제 부실 잠금 파일을 즉시보고 할 수 있습니다. 또한 tsconfig 경로가 동일하면 재사용 할 수있는 구문 분석 된 tsconfig 파일의 캐시 된 사본이 저장됩니다.
  • 브레이킹 체인지에서 자정을 넘어가는 요일의 형식 지정과 관련된 로직이 업데이트되었습니다. b또는 B형식 코드를 사용하여 시간을 형식화 할 때 렌더링 된 문자열이 일에 걸친 일 기간을 제대로 처리하지 못했습니다. 대신 논리는 기본 케이스 인 AM. 이 로직은 업데이트되어 자정을지나 연장되는 하루의 시간과 일치하므로 이제 at night영어의 경우 와 같이 올바른 출력을 렌더링합니다 . formatDate()또는 DatePipe또는 b및  B형식 코드를 사용하는 응용 프로그램 은이 변경 사항의 영향을받습니다.
  • 라우터의 경우 CanLoad가드는 이제 Urltree. CanLoad반환 가드는 Urltree현재 탐색 및 리디렉션을 취소합니다. 이것은 CanActivate또한 추가 된 가드가 사용할 수있는 현재 동작과 일치 합니다. 이것은 사전로드에 영향을주지 않습니다. CanLoad가드 차단합니다 미리로드; CanLoad가드가 있는 경로는 사전로드되지 않으며 가드는 사전로드의 일부로 실행되지 않습니다.
  • Microsyntax 식의 ExpressionBinding에서 올바른 값 범위를 ParsedProperty로 전파하면 범위가 템플릿 AST (VE 및 Ivy 모두)에 전파됩니다. 이 제안은 또한 컴파일러를위한 것입니다.
  • 코어에 대한 수정에서는 Angular 기능을 사용하는 데코 레이팅되지 않은 클래스의 파생 클래스를 데코 레이팅하기 위해 데코 레이팅되지 않은 클래스 마이그레이션에 논리가 추가됩니다.
  • 브레이킹 체인지에서 Urlmatcher의 유형은 항상 null을 반환 할 수 있음을 반영합니다.
  • 서비스 워커의 경우 장기 실행 작업이나 반복되는 시간 초과가있을 때 서비스 워커가 등록하지 않을 가능성이있는 상황에 대한 수정이 적용되었습니다.
  • 홀리 배열에서 정의되지 않은 표현식을 피하는 컴파일러와 존재하지 않는 심볼을 가져올 때 마이그레이션 오류를 피하는 코어를 포함하여 많은 버그가 수정되었습니다. Terser 인라이닝 버그에 대한 해결 방법도 코어에 있습니다. 또 다른 버그 수정은 TestBed에서 재정의의 영향을받는 모듈을 올바르게 식별합니다.
  • Angular NPM에는 Closure Compiler의 고급 최적화를 지원하는 특정 jsdoc 주석이 더 이상 포함되지 않습니다. 이것은 브레이킹 체인지입니다. 패키지의 Closure Compiler에 대한 지원은 실험적이며 한동안 중단되었습니다. Closure Compiler를 사용하는 사람은 NPM에 게시 된 버전을 사용하는 것보다 소스에서 직접 빌드 된 Angular 패키지를 사용하는 것이 더 낫습니다. 임시 해결 방법으로 사용자는 Closure 플래그와 함께 현재 빌드 파이프 라인을 사용하는 것을 고려할 수 있습니다 --compilation_level=SIMPLE. 이 플래그는 빌드 파이프 라인이 빌드 가능한 실행 가능한 아티팩트를 생성하도록 보장하며 고급 최적화가 비활성화되어 페이로드 크기가 증가합니다.