KenkoTech的博客

这个可能是因为nodejs版本虽然不一样，但你的nodejs版本能兼容它所要求的版本，功能都能正常使用。这个原因有很多，可能是这个包依赖某个nodejs版本特有的API，因为不同的nodejs版本可能有不同的api，升级了之后这个api可能就被删除或者修改了， 不符合包的要求了。第二种就是升级你的包，有些包升级了之后对nodejs的要求也不一样了，可能升级之后就符合你的nodejs版本了，这要看具体的包。又或者说是这个包所使用的包对nodejs版本有要求，所以连带着这个包也得对nodejs版本有要求。

当从 S3 下载文件时，Content-Disposition 响应头默认使用 ISO-8859-1 编码，这在处理非西欧语言的文件名时产生了问题。此头中包含的文件名默认使用 ISO-8859-1 编码，这在处理中文、日文、韩文等语言的文件名时就会出现问题，因为这些字符在 ISO-8859-1 编码中是无法表示的。通过在 JavaScript 应用程序中采用正确的编码策略和设置请求头，您可以确保在使用 AWS S3 服务时，即使文件名包含 Unicode 字符，也能正确显示和下载。

之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。

但是由于项目大且复杂，所以我采取的方案是为每一个material组件创建一个less文件，用新的路径覆盖已经失效的class路径。把page1, page2, page3, page4样式文件中对dialog样式的设置提取到一个文件中，以减少文件修改的数量。与旧实现中的元素大致对应的元素已被赋予相同的class名（前缀除外）。但是运行之后，发现组件的样式被破坏了，这是由于material组件重构之后style, API,定义的默认排版级别已更新，以反映 Material Design 规范的变化。

浏览器在加载一个页面时，会解析网页中的html和css，并开始加载字体文件。字体文件可以通过css中的@font-face规则指定，并使用url()函数指定字体文件的路径。比如下面这样:css@font-face { font-family: 'MyFont'; src: url('path/to/font.woff2') format('woff2'), url('path/to/font.woff') format('woff');}body {

在过去，使用position: absolute定位元素是一种常见的技术，但是随着前端开发的发展，现代CSS系统倾向于减少或避免使用absolute定位。在实际项目中，我们应该优先考虑使用基于文档流的布局方法，只有在必要时才使用absolute定位。在大型项目中，随着页面结构的变化，维护absolute定位的元素可能需要更多的时间和精力。absolute定位的元素可能会遮挡屏幕阅读器的内容，降低网站的可访问性。使用基于文档流的布局可以确保内容在阅读器中正确呈现，提高了网站的可访问性。

所以如果绑定动画的组件中存在不同的定位，最好是都统一成一个方向的绝对定位。我在实际的项目中体会到，相比 css 动画，Angular Animation 最大的优点是能够提供一系列很准确的关键帧回调函数(callback)。这是官方文档的说法，但实际上它监听的是 animation state 的改变。特别要注意的是删除节点的操作需要在第二步完成，所以我们需要监听第一个步骤完成时的回调。在渲染时会解析组件中所有的子组件，这在性能上会造成极大的损耗，所以应当尽量减少动画所影响到的组件。

是字符串，或者相应的捕获组在正则表达式中不存在，则该模式将被替换为一个字面量。如果该组存在但未匹配（因为它是一个分支的一部分），则将用空字符串替换它。替换字符串可以包括以下特殊替换模。，但是实际结果是被替换为。

因为在OnPush 策略下，变更检测会在第一次检查后被禁用，当输入属性（@Input）没有发生改变时，Angualr会跳过OnPush 控件以及其子控件。在上边的示例中，我们可以在person被更改时计算全名，因此我们可以添加一个fullName属性，当ngOnChanges 中改变person输入的值时，重新计算fullName的值。但是，这并没有解决潜在的性能问题。此时， Angular Template 里没有任何函数的踪迹，但是 get fullName() 每次在变更检测时都会被调用。

通过自定义指令将数据加载设计为异步操作，我们成功地实现了 Progressive Rendering，使得页面在数据加载的同时逐步呈现，提高了用户体验。在本文中，我们将探讨如何在 Angular 中通过自定义指令实现 Progressive Rendering，特别是处理从服务器获取大量数据的场景。通过自定义指令将数据加载设计为异步操作，并在数据加载的同时允许页面逐步渲染，以提高用户对应用的感知。运行你的 Angular 应用，你将看到页面在加载过程中逐步呈现列表项，提高了用户对应用的感知。

尤其是针对大型单页应用，打包后文件体积比较大，普通客户端渲染加载所有所需文件时间较长，首页就会有一个很长的白屏等待时间。等生命周期钩子，因此项目引用的第三方的库也不可用其它生命周期钩子，这对引用库的选择产生了很大的限制；构建的页面可以爬到页面上的所有内容，包括其中一些在后端渲染好的数据，其中读取到的数据都可以用作。将页面渲染移动到服务器端，页面的每一次点击、修改都需要调用因此会增加服务器的压力，以其相比还是。内容丰富，复杂交互的动态网页，对首屏加载有要求的项目，对。，网络爬中就可以抓取到完整页面的信息。

虽然视图的内容也是由我们来控制，看似是不会出现滚动条的情况，但是我们的页面是可以互动的。通过分析并明确视窗与内容的关系，我们不仅能有效避免上述情况的发生，还能降低其它问题出现的概率。而当元素里的内容（包括文本内容、图片、视频等内容）的大小超出窗口的大小区域时，内容会有一部分显示在盒子所在区域的外部，这就是。制定并遵循代码规范。规范的代码也是考察程序员能力的一个方面，清晰整洁的代码能够规避很多错误，并且也易于维护。视图窗口简单来说就是呈现内容的视口，浏览器就是一个窗口，其中所显示的内容就是视图内容。

接下来我改变一下数据，调用一下changeData，把张三变成未婚，王五变成已婚。数据正常更新了，这是没有加trackBy的时候，现在添加一下trackBy。组件没有重新生成，数据也没有更新，这是因为test组件的更新机制有问题。我在这里循环一个数组，显示人物的资料，姓名，年龄，婚否。接下来我用一个例子来演示一下。点击changeData。

3：使用trackBy，trackBy是angular提供的函数，来告诉angular怎么跟踪数组里的项目。这会减少不必要的DOM的删除和重建。4：但是对于更复杂的表的使用，比如分组管理数据。打开或者关闭某个组的时候，还要操作DOM，那么在以上几种方法的基础上可能还会卡顿。在angular中，MatTable构建简单，使用范围广。使用过多的ngStyle或者ngClass。第一次渲染会卡顿，且ngStyle的值未被覆盖。一次性渲染太多数据，这会花费CPU很多时间。以上就是几种常用的优化方法。

由于URL 可能会被第三方拦截和查看（比如互联网服务商、代理或者其他监视网络流量的攻击者），所以URL中的敏感数据会带来安全风险，攻击者可能会捕获并使用它进行攻击。：攻击者可以创建模仿合法网站的虚假网页，并在 URL 中包含敏感数据，以诱骗用户泄露其登录凭据或其他敏感信息。: URL 中的敏感数据泄露会被攻击者拦截，并导致个人身份信息或者系统机密信息泄露。： 攻击者可以使用URL中的敏感数据对用户账户进行未授权的访问，并执行各种恶意活动。这样就可以防止auth token 在URL里出现了。

如防止爬虫过度爬取、防止暴力破解密码、避免频繁调用支付接口等。提供可定制的响应如429 Too Many Requests。地址或其他标准轻松地对请求进行速率限制。包括基础限制、路由限制、动态限制、自定义。应用程序中实现速率限制。方便地集成到Express应用中。是一个轻量实用的速率限制中间件。基于IP地址实现速率限制。设置最大请求数和时间窗口。请求频率进行限制的场景。框架的一个流行中间件。应用的流量进行管控。

管理员用户的邮箱地址受到保护，不能更改为攻击者的邮箱地址，攻击者也就不能通过忘记密码功能获取到管理员权限了。而且由于攻击者此时拥有管理员权限，所以造成的损失将是非常巨大的。，不同的用户拥有不同的权限。相对来说管理员账户所对应的权限是极高的，它可以修改当前用户或者比它权限低的账户信息。注意：管理员用户可以没有任何限制的修改邮箱地址，所以即便是邮箱的域名被修改(@example.com -> @xxx.com)也是合法的。角色的经过身份验证的用户可以结合更新用户信息的方法和。比如我的项目所遇到的问题，具有。

不包含‘unsafe-eval’的理由是eval 实际上是不安全的。它在每种语言中的意思是“获取这个字符串并执行它的代码”。这个错误的意思是，拒绝将字符串评估为 JavaScript，因为‘unsafe-eval’不是以下内容安全策略中允许的脚本源。尽量避免使用eval方法，大多数情况下，eval方法是可以被避免的。而不是把‘unsafe-eval’加入到CSP白名单中。因为我的安全策略（CSP）白名单中并不包含‘unsafe-eval’这个选项。上述的代码可以这样更改，代码正常工作。

在白名单策略中，可以使用他来指定浏览器仅渲染或执行来自白名单中的资源。即便是被恶意注入了脚本，因为脚本并不在白名单中，因此不会执行。它通过允许网站管理员定义哪些资源可以加载到网页中，从而限制了恶意脚本的执行。以下是一个简单的示例将所有的脚本限制为只能从同一域加载，但是允许从。禁止外域提交，网站被攻击后，用户的数据不会泄露到外域。禁止加载外域代码，防止复杂的攻击逻辑。控制加载样式表的来源。控制加载音视频的来源。控制加载脚本的来源。控制加载图片的来源。控制加载字体的来源。控制加载框架的来源。

NG serve proxy

PDF的实现选择

代码复用， PDF

Server端渲染PDF

Angular 打印预览

在客户端生成PDF

弹出菜单和滚动冲突的解决方案

缓存

打包优化

Less import reference

Angular Trackby

Angular 冷知识

Angular Less SCSS

UI库对比

ngx-bootstrap vs angular material

Angular 对于Node / TS的版本依赖

Angular进阶之—— ViewContainerRef

Ngx-Resource

interceptor

路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。要实现前端路由，需要解决两个核心问题：下面分别使用 hash 和 history 两种实现方式回答上面的两个核心问题。...

Angular 基础之懒加载