Angular 18+ 高级教程 – 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
Template
<div class="bg-img"></div>
Styles
.bg-img { background-image: url('../../public/nana.jpg'); background-size: cover; width: 360px; aspect-ratio: 16 / 9; }
ng build
两个知识点
-
path 换了
原本是 '../../public/nana.jpg' (我们写的时候是依据开发时的文件路径)
变成了 './media/nana-LHLWYWZO.jpg' (这是依据项目发布后的文件路径)
-
file 换了
原本是 nana.jpg 换成了 nana-LHLWYWZO.jpg
有了这个 hash 就可以做缓存了
结论：Angular 在 build 的时候会对 CSS background-image 做 hash 处理。
好，我们接着来看 <img> element。
Template
<img src="../../public/nana.jpg" alt="yangmi">
ng build
两个知识点：
-
path 没有换
Angular 没有把开发路径换成发布后的路径，如果我们不做处理会导致最终图片访问失败。
-
没有 hash 版本的 img
Angular 也没有创建出 hash 版本的 img。
结论：<img> element 需要我们自己处理路径和 hash，Angular 完全没有处理，CSS background-image 才有。
解决方案：通常路径可以直接写发布后的路径，hash 可以使用 hash-file.online，总之就是没有工程化了。
相关 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 都会被打包进项目里。
