首頁 > web前端 > js教程 > 一文帶你深入解析Angular 10

一文帶你深入解析Angular 10

青灯夜游
發布: 2021-05-26 11:17:45
轉載
3122 人瀏覽過

本篇文章帶你深入探索Angular 10。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

一文帶你深入解析Angular 10

Angular的最新版本Angular 10剛發布了,我們看看有什麼新特性!本文會詳細講新版本裡所有值得一提的新特性,如果你想快速預覽有哪些內容,可以前往Angular官方博客查看。

Angular 10 在Angular 9 發布之後4個月就發了,相隔時間這麼短,當然沒有太多的變化,但這個版本還是有一些值得一提的新特性,以及修復了很多缺陷。順便一提,Angular團隊想要每年發布2個大版本,所以Angular 11應該會在今年秋天發布。 【相關教學推薦:《angular教學》】

支援TypeScript 3.9.x

身為一個熱愛TypeScript的人,我認為這個版本最喜聞樂見的特性就是支援TypeScript 3.9.x!另一方面Angular 10放棄了對TS 3.6、3.7和 3.8的支持,希望不會成為你的障礙。基於編譯CLI的升級和對TS3.9的支持,Angular 10 的類型檢查比以往的版本都要快,這對大多數專案來說是個好消息,尤其是大型專案。

除此之外,Angular 10也升級到了 TSLib 2.0。 TSLib簡單地說就是一個提供TypeScript運行時支援方法的官方函式庫,它要結合「tsconfig.json」裡的importHelpers標記生效,當importHelpers開啟的時候,編譯器可以產生更緊湊、更具可讀性的程式碼。總之不用擔心,TSLib沒有太大變化。

可選的嚴格設定

嚴格模式為贏!

Angular 10 的嚴格模式使得我們可以在創建時就得到一個嚴格的項目,這是很好的做法,值得用在所有新項目上。執行下面的命名可以建立一個嚴格設定的項目:

ng new --strict
登入後複製

它可以让你更快地检测到问题的存在(在构建时发现问题总比运行时发现问题好,对吧)。这个新的option:

  • 开启TypeScript的严格模式(建议总是开启!),以及严格的Angular模板类型检测;

  • 大大降低了“angular.json”的空间预算,鼓励新用户关注应用打包的大小;

  • 强制使用更严格的TSLint配置,禁止使用“any”类型(“no-any”为true),还开启了codelyzer提供的几个有趣的规则。虽然这样做很严格,但TSLint可以让你走得更远。

我认为这个新的“strict”选项很棒,有点小可惜它只是个可选项而不是个默认选项。个人认为严格意味着更安全。如果你要创建新项目,建议使用严格模式哦。

新的TypeScript配置结构

新版本提供的默认TS配置有点变化,现在是同时提供了 “tsconfig.base.json” 、 “tsconfig.json”、“tsconfig.app.json” 和“tsconfig.spec.json”。

为什么要有这些配置文件?这是为了更好地支持IDE和构建工具查找类型和编译配置。新版里面,“tsconfig.json” 只包含TypeScript项目引用,这样可以提升编译时性能,而且更严格地隔离项目的不同部分: “tsconfig.app.json”管应用代码;“tsconfig.spec.json”管测试;“tsconfig.base.json” 里面的TypeScript配置只配置TypeScript编译器和Angular编译器选项,没有配置指定/排除编译哪些文件。那指定/排除编译哪些文件在哪里配置呢?答案是在“tsconfig.app.json”文件里面。

如果你现有的项目里没有用这个配置结构,最好检查下你的TypeScript配置以便保持一致。

NGCC

首先确保你的package.son文件里有postinstall脚本,在安装后执行NGCC。

在新版本里面,NGCC的可恢复性更强。放在以前,如果NGCC的某个工作进程崩了它不一定能恢复,现在应该没有这个问题了。此外NGCC还做了一些优化,包括性能相关的。

新的默认浏览器配置

Web浏览器发展迅速,Angular顺应潮流也更新了browserslist文件(.browserslistrc)。但正如官方博客里解释的那样,新配置带来了一个副作用,就是新项目默认禁用ES5构建。当然,现在生产ES5的代码已经没多少意义了,现代Web浏览器都至少支持ES2015了。如果你还在用IE浏览器,那就是时候告别过去了。

如果要获取具体支持的Web浏览器,可以在你的项目里执行下面的命令:

npx browserslist
登入後複製

它会基于根目录下的 “.browserslistrc” 文件输出结果。

Bazel

一个令人惋惜的消息:Angular Bazel已经离开Angular实验室了,所以Angular项目基本上不会再支持Bazel,Bazel再也不是Angular CLI的默认构建工具了。

@angular-devkit/build-angular 0.1000.0)

虽然这个包的命名很粗暴,但它包含了Angular应用构建的重要部分。最新版本的带来了几个很酷的特性:

  • 如果你用SASS,build-angular会重新定义资源的相对路径。之前的版本里,在样式文件里引用或导入 url(./foo.png) 这样的路径,都会保留准确的URL,当引入的样式文件不在同一个目录下的时候就会崩掉。现在所有使用相对资源的路径都能找到了。

  • build-angular可以去掉Webpack无法处理的重复模块,这是通过自定义Webpack解析插件实现的。

更多

增量式模板类型检查

新版的编译器CLI可以实现增量式模板类型检查。

CanLoad

以前,CanLoad guard 只能返回boolean值,现在可以返回 UrlTree 类型的值,匹配CanActivate 守卫的行为。注意,这不会影响预加载。

I18N/L10N

以前本地只能支持一个翻译文件。现在本地可以指定多个文件了,然后通过message id来合并。

Service Workers

默认的SwRegistrationStrategy有所优化。避免了之前可能会出现的 Service Worker从未注册的情况(比如有interval或递归timeout这样的长时间运行任务存在时)。

Angular Material

Angular Material 10 也跟着发布了,变化挺多的

大量的缺陷修复

Angular团队投入了大量的时间和精力去修复了积压的bug,解决了超过700个issue。

废弃特性

Angular打包格式不再支持ESM5/FESM5,因为构建过程的最后都会降级为ES5。如果你不用Angular CLI打包,你要自己想办法把Angular代码降级到es5。

IE 9、IE 10和移动端IE浏览器都不支持了。

以及一些废弃的元素,具体看官网博客。

不带Angular装饰器的class不再支持Angular的特性

直到Angular 9,你都可以在没有使用装饰器(比如 @Component,@Derective等)的类里面使用Angular的特性。Angular 10里面不行了,你必须加装饰器。如果你有用到组件继承,父子组件类里的其中一个没有加装饰器,就会有问题。

为什么要强制变更?简单来讲,Ivy编译器需要装饰器。

如果没有装饰器,Angular的编译器就不会添加依赖注入的额外代码。

如果父组件缺少了装饰器,那子类就会继承父类的constructor,但编译器不会生成对应的constructor信息(因为没装饰)。当Angular试图创建这个子类时,就没有正确的信息去创建了。在View引擎里面,编译器可以在全局范围里查找缺失的数据,但Ivy编译器会单独处理每个指令,这意味着更快的编译速度,但就没法像以前那样自动找到缺失的constructor信息了,只有显式添加装饰器才能提供这个信息。

如果子类缺少了装饰器,那它就会继承父类但是没有自己的装饰器,编译器也没法知道这个类是个@Derective还是个@Component,所以没法生成对应的指令信息。

这个变更带来的好处就是增强了Angular世界的一致性。如果你想用Angular特性,那就加上Angular装饰器。

ModuleWithProviders强制使用泛型

以前ModuleWithProviders也接受泛型,但不是强制的。NG 10里面,泛型参数是必需的,这样有利于类型安全。如果你遇到第三方库的报错:

error TS2314: Generic type &#39;ModuleWithProviders<T>&#39; requires 1 type argument(s).
登入後複製

建議聯絡作者修復,因為NGCC也沒辦法處理。也可以先把skipLibChecks設為 false來跳過。

其他重大變更

  • Resolver:返回EMPTY的會取消導航,如果你想讓導航順利完成,你必須保證resolver有回傳值。
  • Service worker:依賴不同header的資源的Service worker實作跟之前不一樣了,不同的header會被忽略。建建議避免快取這樣的資源,可能會造成user agent不可預測的行為。由此,即使資源的header不用也可以檢。快取匹配選項可以在VGSW的設定檔裡面配置。
  • 屬性綁定:例如[foo]=(bar$ | async).fubar這樣,如果fubar的值跟之前一樣,就不會觸發變化偵測。如果你想要觸發變化偵測,變通的方法就是讓整個引用改變。
  • 時間日期格式化:formatDate()DatePipe 的格式化程式碼改變了,先前的實作對於跨午夜的日期範圍有問題
  • UrlMatcher背後的方法utility type現在的回傳類似可以是null
  • ExpressionChangedAfterItHasBeenChecked 的報錯新增了之前沒偵測到的場景
  • Angular日誌:範本裡的未知元素/屬性綁定從先前的warning輸出等級提升到error輸出等級
  • 響應式表單:valueChanges 綁定到number類型的input時有個表單控制的bug,現在number的輸入框不再監聽change事件,而是監聽input事件。記得修改你的測試範例。這也打破了IE9的兼容性,不過也不影響了。
  • minLengthmaxLength驗證器:它的值保證包含數值類型的length屬性,以前沒有length屬性的falsy值會造成驗證錯誤。

遷移

參考遷移指南:https://update.angular.io/#9.0:10.0l3

#總結

此文探討了Angular 10的新特性、廢棄特性,以及重大變更。儘管這個版本不是地震級的轟動發布,但也修復了許多缺陷,也帶來許多寶藏。感謝Angular團隊和社群!

原文網址:https://medium.com/javascript-in-plain-english/angular-10-in-depth-a48a3a7dd1a7

#作者:Flavio Copes

譯者:曉編

更多程式相關知識,請造訪:程式設計影片! !

以上是一文帶你深入解析Angular 10的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板