升级angular 10的坑

为了用上responsive flex-layout, 因为它的依赖关系,我的相册app还是基于angular 7的,具体哪个库过时已经记不得了。反正既然angular要升级,就干脆都升了吧。结果踏入了一个坑,记录一下:

  1. 升级前ng update会提示你本地如果有未commit的文件,必须先commit或stash,算是和git结合紧密了。
  2. ng update 是个好帮手,但是未必能一步到位,它只是给出了一个列表,有哪些库是需要upgdate的,但并不执行。需要你自己选择执行。而运行ng update时如果分开update有冲突,可以一条命令执行ng update rxjs angular/core ….
  3. 系统级别(-g)的angular cli最好先升级到10(不指定@~xx.x.x就会升到最新版),否则可能有问题。
  4. npm最为包安装工具也要升级以及clear cache:npm cache clean –force

    npm install npm@latest -g

  5. 除了package.json的变动, angular.json里也删除了一行 “es5BrowserSupport”: true
  6. angular material的一个大变动,就是引入的时候不再用 import {…} from ‘@angular/material’; 而是不同的模块属于不同的路径, 比如import {MatGridListModule} from ‘@angular/material/grid-list’;
    import {MatButtonModule} from ‘@angular/material/button’;
  7. 有某个库碰到提示zone.js版本不兼容,于是只能单独安装npm install zone.js@~0.10.3,angular升级自动升级到0.11.x会太高。
  8. typescript要降级,我使用的一个mat-video的库目前只支持angular 8和9,typescript如果用4.0.2会提示错误,之类重写了父类定义的属性,可以使用的版本”typescript”: “^3.9.7”
  9. 有些库比如codelyzer还是要自己手动升级,提示有不兼容又不自动升级。

 

 

dumb view and smart view model

https://blog.bitsrc.io/building-reusable-angular-components-best-practices-744fff49e0d

这是一篇从SOLID principal中的SRP(单一职责原则)出发,描述把Component细分的过程的文章。

抛开它的主题,里面有些附带的思想也值得一记:

Presentational Component, 也就是View的唯一的Concern就是当输入的数据进来的时候展示出来,从这个conern来看,数据甚至应该是比较静态的,至少类型是不变,应对唯一的这种类型,View该如何展示,这就是它唯一的Concern。框架提供的tag很好地帮助了展示,底层基础仍是html。在wpf中,xaml就是这种Component,应该尽可能地dump.

而Container Component(这个名字不是很好)其实就是ViewModel,其实也包括了MVC里的Controller,或者MVP里的Presenter。现在则是Angular里的Component.ts.这是个Smart的Component

不过现代程序里的Component往往要和别的Component交互,所以Angular才定义了Output(事件EventEmitter),而这也影响到了View(Presentational Component)里,以attribute的形式。其实我觉得影响展示的attribute应该和用于事件交互的Attribute分开才对。一个简单的html template不是一个很好的载体。仍然有点违反SRP,还可以进一步细分。如果把事件描述从tag中抽出来放到一个专门的文件(类似designer.cs)并可以给一个html template apply多个事件描述集,就好比apply css style一样就好了。

另外,直接在Angular中设计一个Component应该也是有可能的,就是直接放到App.Component里,IDE如果有一个专门用于Desinger的Component,在双击某一个Component的时候打开Designer就好了。