Angular 17+ 高级教程 – Angular 的局限和 Github Issues
前言
Angular 绝对有很多缺陷，Issue 非常多，workaround 非常多。
我以前至少有 subscribe 超过 20 个 Issues，几年都没有 right way 处理的。
Angular 不支持 Custom @Decorator
Angular 自己是有在用 Decorator (旧版，不是 TypeScript 5.0 后的版本) 的，但是我们可用不了。
相关 Github Issues：
Class decorator stopped working on angular@15
Custom decorators not working using AoT
Angular 不支持 PostCSS Configuration
Angular CLI 自己是有在用 PostCSS 来支持 Tailwind CSS 的。但是！它不允许我们设置。
连 postcss-preset-env 我们都设置不了。
像下图这样，办不到😡
相关 Github Issues：
Add postcss-preset-env to Angular build process / allow for configuring custom PostCSS plugins
而且短期没有任何计划要支持😡
Angular 不支持 Static Image Hash
<img src="../assets/logo_1x1_300w.jpg">
这张图经过 ng build 以后是这样的
没有任何的 hash，如果用 CSS 的 background-image 就会有。
相关 Github Issue – Images in templates are not fingerprinted
Angular Team 没有打算去支持它，目前也没有任何 workaround。
@Directive 指令不支持 CSS
这个 Github Issue – @Directive should support styles and styleUrls properties 排在第 5 名。
组件可以封装 CSS Styles，独立一个 .css 或者 .scss 文件，这个非常方便。
指令虽然没有 Template，但它的职责是 decorate 组件或 Element。你可以用指令去 add class，但这个 class 的样式谁负责呢？
为什么不可以是指令负责？
这就是大家正在争取的 feature，虽然已经争取了 7 年 (from 2017)，而且还是第 5 名，但 Angular Team 任然无动于衷...😔
Workaround follow Angular Material
也谈不上 workaround 吧，就是一些粗糙的手法。
作为 UI 组件库，Angular Material 自然会遇到这个问题，那它怎么弄呢？
简单 -- 全局 CSS Styles 😂
MatRipple 是一个指令
使用方式
<button matRipple>Submit</button>
在任意一个 Element 上添加 attribute matRipple。
效果
点击后出现波纹。
MatRipple 的 CSS Styles 写在 _ripple.scss 里
咦...它们怎么连上的呢？
指令添加了 class
然后在项目的 styles.scss 里 @use @angular/material + @include mat.core
styles.scss 是全局 CSS Styles，每一个组件都会被 effect 到。
mat.core() 会把 _ripple.scss 放到全局，所以它们就连上了。
这个方案最大的问题就是无法按需打包，无论你有没有用到 MapRipple 指令，_ripple.scss 的 CSS Styles 都会被打包进项目里。
