>웹 프론트엔드 >JS 튜토리얼 >Angular10의 새로운 기능에 대한 간략한 설명

Angular10의 새로운 기능에 대한 간략한 설명

青灯夜游
青灯夜游앞으로
2021-04-06 11:14:452492검색

이 글에서는 Angular10의 새로운 기능을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular10의 새로운 기능에 대한 간략한 설명

Angular 10은 널리 사용되는 웹 개발 프레임워크의 주요 업그레이드이며 일반적으로 6월 24일에 공식 버전으로 제공됩니다. 정식 버전 업그레이드는 Google이 개발한 TypeScript 기반 프레임워크를 기반으로 하며 새 버전보다 품질, 도구, 생태계 개선 기능에 더 중점을 둡니다.

Angular 10은 이전 Angular 버전보다 작습니다. 새로운 기능에는 Angular Material UI 구성 요소 라이브러리의 새로운 날짜 범위 선택기와 CommonJS 가져오기 경고가 포함됩니다. CommonJS 가져오기 경고는 CommonJS와 함께 패키지된 종속성을 사용할 때 개발자에게 경고하여 애플리케이션이 더 커지고 느려질 수 있으므로 개발자가 ECMAScript 모듈 패키지를 교체할 수 있습니다.

관련 튜토리얼 권장 사항: "angular Tutorial"

또한 선택적 엄격한 설정은 새 작업 공간ng new ,通过ng new -- strict을 만들 때 더 엄격한 프로젝트 설정을 제공합니다. 이 플래그를 활성화하면 새로운 설정으로 새 프로젝트가 초기화되어 유지 관리가 향상되고 오류를 포착하는 데 도움이 되며 CLI가 애플리케이션에서 고급 최적화를 수행할 수 있습니다.

Angular 10 다운로드 위치


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

ng update @angular/cli @angular/core

Angular 10의 새로운 기능


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

  • 도우미 기능이 포함된 TypeScript 런타임 라이브러리인 TSlib가 TSlib 2.0으로 업데이트되었습니다. TypeScript용 TSLint 정적 분석 도구가 TSLint 6으로 업데이트되었습니다.
  • 실제 ngtsc 컴파일러를 래핑하는 컴파일러 인터페이스를 추가했습니다. 언어 서비스별 컴파일러는 프로젝트 인터페이스를 사용하여 여러 유형 검사 파일을 관리하고 필요에 따라 Scriptinfo를 생성합니다.
  • 새 프로젝트의 브라우저 구성이 오래되고 덜 사용되는 브라우저를 제외하도록 업데이트되었습니다. Internet Explorer 9, Internet Explorer 10 및 Internet Explorer Mobile은 지원되지 않습니다.
  • Angular 패키지 형식에는 더 이상 ESM5 또는 FESM5 패키지가 포함되지 않으므로 Angular 패키지 및 라이브러리에 대해 yarn 또는 npm install을 실행할 때 다운로드 및 설치 시간이 절약됩니다. yarnnpm install时,节省了下载和安装时间。
  • 对于编译器,已为属性读取和方法调用添加了名称范围。
  • EntryPointFinder ,这是一个基于程序的入口点查找器,可以从tsjconfig.json文件指定的程序中的导入中获得种子。 当活动程序仅导入一小部分已安装的入口点时,这预计会比DirectoryWalkerEntryPointFinder更快。
  • 由于具有可疑的价值和性能问题,自动完成功能已从HTML实体(如&amp )中删除。
  • 显式映射从闭包公开到devmode文件。 此功能针对必须将生产构建输入转换为等效devmode的开发工具。
  • 一项重大更改是,将ModuleWithProviders强制ModuleWithProviders 。 为了使ModuleWithProviders模式与Ivy编译和渲染管道一起使用,需要使用通用类型参数,但是在此提交之前,View Engine允许省略通用类型。 如果开发人员使用不带泛型类型的ModuleWithProviders ,则版本10迁移将更新代码。 但是,如果开发人员使用View Engine并依赖于忽略泛型类型的库,则会发出构建错误。 在这种情况下,ngcc将无济于事,迁移将仅涵盖应用程序代码。 应该与图书馆作者联系以修复他们的图书馆。 解决方法是,可以在tsconfig中将skipLibChecks设置为false或将应用程序更新为仅使用Ivy。
  • 现在具有TypeScript 3.9的功能,并且删除了对TypeScript 3.8的支持。 这是一个重大变化。 也不再支持TypeScript 3.6和TypeScript 3.7。
  • 类型检查的性能已改进到编译器cli。
  • 为了提高性能,已对basePaths的计算进行了延迟,因此仅在TargetedEntryPointFinder需要时才进行工作。 以前,每当实例化查找程序时都会计算basePaths ,这在已经处理了目标入口点的情况下浪费了精力。
  • 支持合并多个翻译文件。 以前,每个语言环境仅允许一个翻译文件。 现在,用户可以在每个语言环境中指定多个文件,并且每个文件的事务都将通过消息传递ID合并。
  • 可以配置异步锁定超时。 这增加了对ngcc.config.js文件的支持,用于设置retryAttemptsretryDelay选项。 集成测试添加了新的超时检查,并使用ngcc.config.js减少了超时时间,以防止测试花费太长时间。
  • 在一项重大更改中,有关未知元素的警告现在记录为错误。 虽然这不会破坏应用程序,但它可能会触发一些期望通过console.error不记录任何内容的工具。
  • 在另一个重大更改中,任何返回EMPTY解析器都将取消导航。 为了使导航继续进行,开发人员必须更新解析器以更新某些值,例如default!Empty
  • 在元数据中添加了依赖项信息和ng-content选择器。 提议的编译器功能将提供对诸如Angular Language Service之类的工具有用的附加元数据,并具有为库中定义的指令/组件提供建议的能力。
  • 通过减小入口点清单的大小和清单中的缓存技术来实现性能改进。 另外,依赖项的缓存是在入口点清单中完成的,并从那里读取,而不是每次都进行计算。 以前,即使不需要处理入口点,ngcc(Angular Ivy兼容性编译器)也将解析入口点的文件以计算依赖关系,这对于large_node模块将花费大量时间。
  • 为了提高ngcc性能,现在允许立即报告陈旧的锁定文件。 此外,还将存储已解析的tsconfig文件的缓存副本,如果tsconfig路径相同,则可以重复使用该副本。
  • 在一项重大更改中,逻辑已更新,涉及格式化午夜的白天。 当使用bB格式代码格式化时间时,呈现的字符串不能正确处理跨越几天的白天。 相反,逻辑回落到AM的默认情况。 此逻辑已更新,因此它可以匹配在午夜之后的一天中的时间,因此它现在将呈现正确的输出,例如at night英语的at night🎜컴파일러의 경우 속성 읽기 및 메서드 호출을 위해 이름 범위가 추가되었습니다. 🎜🎜EntryPointFinder는 tsjconfig.json 파일에 지정된 프로그램의 가져오기에서 시드할 수 있는 프로그램 기반 진입점 찾기입니다. 이는 활성 프로그램이 설치된 진입점의 작은 하위 집합만 가져오는 경우 DirectoryWalkerEntryPointFinder보다 더 빠를 것으로 예상됩니다. 🎜🎜의심스러운 가치 및 성능 문제로 인해 &amp와 같은 HTML 엔터티에서 자동 완성 기능이 제거되었습니다. 🎜🎜 클로저 노출에서 devmode 파일로의 명시적 매핑. 이 기능은 프로덕션 빌드 입력을 동등한 개발 모드로 변환해야 하는 개발 도구를 대상으로 합니다. 🎜🎜한 가지 주요 변경 사항은 ModuleWithProviders를 필수로 만드는 것입니다. ModuleWithProviders 패턴이 Ivy 컴파일 및 렌더링 파이프라인과 함께 작동하려면 일반 유형 매개변수가 필요하지만 이 제출 전까지 View Engine에서는 일반 유형 생략을 허용합니다. 개발자가 일반 유형 없이 ModuleWithProviders를 사용하는 경우 버전 10 마이그레이션에서 코드가 업데이트됩니다. 그러나 개발자가 View Engine을 사용하고 일반 유형을 무시하는 라이브러리에 의존하는 경우 빌드 오류가 발생합니다. 이 경우 ngcc는 도움이 되지 않으며 마이그레이션은 애플리케이션 코드에만 적용됩니다. 라이브러리를 수정하려면 라이브러리 작성자에게 연락해야 합니다. 해결 방법으로 tsconfig에서 SkipLibChecks를 false로 설정하거나 Ivy만 사용하도록 애플리케이션을 업데이트할 수 있습니다. 🎜🎜이제 TypeScript 3.9가 제공되며 TypeScript 3.8에 대한 지원이 제거되었습니다. 이것은 큰 변화입니다. TypeScript 3.6 및 TypeScript 3.7도 더 이상 지원되지 않습니다. 🎜🎜컴파일러 cli의 유형 검사 성능이 향상되었습니다. 🎜🎜성능 향상을 위해 basePaths 계산이 연기되었으므로 TargetedEntryPointFinder가 필요할 때만 작업이 수행됩니다. 이전에는 파인더가 인스턴스화될 때마다 basePaths가 계산되어 대상 진입점이 이미 처리되었을 때 노력이 낭비되었습니다. 🎜🎜여러 번역 파일 병합을 지원합니다. 이전에는 로케일당 하나의 번역 파일만 허용되었습니다. 이제 사용자는 로캘별로 여러 파일을 지정할 수 있으며 각 파일의 트랜잭션은 메시징 ID를 기준으로 병합됩니다. 🎜🎜비동기 잠금 시간 초과를 구성할 수 있습니다. 이는 retryAttemptsretryDelay 옵션 설정을 위한 ngcc.config.js 파일에 대한 지원을 추가합니다. 통합 테스트에는 테스트가 너무 오래 걸리는 것을 방지하기 위해 새로운 시간 초과 검사가 추가되고 ngcc.config.js를 사용하여 시간 초과가 감소되었습니다. 🎜🎜 획기적인 변경으로 인해 알 수 없는 요소에 대한 경고가 이제 오류로 기록됩니다. 이로 인해 애플리케이션이 중단되지는 않지만 console.error를 통해 아무것도 기록되지 않을 것으로 예상하는 일부 도구가 트리거될 수 있습니다. 🎜🎜또 다른 주요 변경 사항에서는 EMPTY를 반환하는 파서가 탐색을 취소합니다. 탐색을 계속하려면 개발자가 파서를 업데이트하여 default!Empty와 같은 특정 값을 업데이트해야 합니다. 🎜🎜메타데이터에 종속성 정보 및 ng-content 선택기가 추가되었습니다. 제안된 컴파일러 기능은 라이브러리에 정의된 지시문/구성 요소에 대한 제안을 제공하는 기능과 함께 Angular Language Service와 같은 도구에 유용한 추가 메타데이터를 제공합니다. 🎜🎜적은 진입점 매니페스트 크기와 매니페스트의 캐싱 기술을 통해 성능이 향상되었습니다. 또한 종속성 캐싱은 진입점 매니페스트에서 수행되며 매번 계산하는 대신 거기에서 읽습니다. 이전에는 진입점을 처리할 필요가 없더라도 ngcc(Angular Ivy Compatibility Compiler)가 진입점의 파일을 구문 분석하여 종속성을 계산했는데, 이는 Large_node 모듈의 경우 많은 시간이 걸렸습니다. 🎜🎜ngcc 성능을 향상시키기 위해 이제 오래된 잠금 파일에 대한 즉각적인 보고가 허용됩니다. 또한 구문 분석된 tsconfig 파일의 캐시된 복사본이 저장되어 tsconfig 경로가 동일한 경우 재사용할 수 있습니다. 🎜🎜한 가지 주요 변경 사항으로 낮 시간의 자정 형식 지정과 관련된 논리가 업데이트되었습니다. b 또는 B 형식 코드를 사용하여 시간 형식을 지정할 때 렌더링된 문자열은 여러 날에 걸쳐 있는 날짜를 올바르게 처리하지 않습니다. 대신 논리는 AM의 기본 사례로 대체됩니다. 이 로직은 자정 이후의 시간과 일치하도록 업데이트되었으므로 이제 영어로 at night와 같은 올바른 출력을 렌더링합니다.formatDate()DatePipebB格式代码的应用程序将受到此更改的影响。
  • 对于路由器, CanLoad保护器现在可以返回Urltree 。 返回UrltreeCanLoad防护Urltree取消当前导航并重定向。 这与CanActivate守卫可用的当前行为匹配,该行为也已添加。 这不会影响预加载。 CanLoad保护程序会阻止任何预加载; 带有CanLoad防护的任何路由都不会被预加载,并且防护也不会作为预加载的一部分执行。
  • 微语法表达式的ExpressionBinding与ParsedProperty的ExpressionBinding中正确值范围的传播,这又会将范围传播到模板AST(VE和Ivy)。 该建议也适用于编译器。
  • 在对内核的修复中,会将逻辑添加到未修饰的类迁移中,以修饰使用Angular功能的未修饰类的派生类。
  • 在重大更改中,Urlmatcher的类型将反映出它始终可以返回null。
  • 对于服务人员,已修复了一种情况,即当任务长期运行或超时时,服务人员可能永远不会注册。
  • 已经进行了许多错误修复,包括编译器避免了有Kong数组中未定义的表达式,以及内核避免了导入不存在的符号时的迁移错误 。 在Terser内联bug的核心中也有一种解决方法。 另一个错误修复程序正确地标识了受TestBed中的替代影响的模块 。
  • Angular NPM不再包含某些jsdoc注释来支持Closure Compiler的高级优化。 这是一个重大变化。 软件包中对Closure Compiler的支持已经试验并中断了一段时间。 使用Closure Compiler的任何人最好直接使用从源代码构建的Angular软件包,而不是使用NPM上发布的版本。 作为临时的解决方法,用户可以考虑将其当前的构建管道与Closure标志--compilation_level=SIMPLE를 사용하세요. 이 플래그는 빌드 파이프라인이 빌드 가능하고 실행 가능한 아티팩트를 생성하지만 고급 최적화가 비활성화되어 페이로드 크기가 증가하도록 보장합니다.

번역 출처: https://www.infoworld.com/article/3537449/whats-new-in-angular-10.html

위 내용은 Angular10의 새로운 기능에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제