Angular 18+ 高级教程 – Angular 的局限和 Github Issues

前言

Angular 绝对有很多缺陷，Issue 非常多，workaround 非常多。

我以前至少有 subscribe 超过 20 个 Issues，几年都没有 right way 处理的。

Angular 不支持 Custom @Decorator

Angular 自己是有在用 Decorator (旧版，不是 TypeScript 5.0 后的版本) 的，但是我们可用不了。

Angular 不支持 PostCSS Configuration

Angular CLI 自己是有在用 PostCSS 来支持 Tailwind CSS 的。但是！它不允许我们设置。

连 postcss-preset-env 我们都设置不了。

像下图这样，办不到

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，总之就是没有工程化了。

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 都会被打包进项目里。