Angular
初始化 Angular 懒加载模块：使用MODULE_INITIALIZER的高级技巧
Angular是一个强大的前端开发框架，它提供了各种机制来优化应用程序的性能和可维护性。在本文中，我们将深入探讨Angular中的MODULE_INITIALIZER，这是一个用于初始化懒加载模块的强大工具。我们将详细介绍MODULE_INITIALIZER的用法以及它在Angular中的作用。 什 ......
如何对 Angular Lazy Loaded Module 进行 Customization
要自定义延迟加载模块，首先需要在应用代码中创建一个自定义功能模块。 在这个自定义功能模块的实现中，您需要静态导入原始的可组合商店功能模块（曾经是延迟加载的），然后导入或提供所有自定义内容（例如，在这里提供自定义服务）。以下是一个示例： // custom-rulebased-configurator ......
Angular Routing Primary
Why Routing 1. 通过 Url 表示应用的状态 2. 让应用变得可以link,即 直接通过 url 来链接到某个指定的页面 3. 可用通过用户角色来确定是否可以访问该页面 4. *可通过路由来模块化加载应用* Configuring Routes Auto create ：可以通过ang ......
浅谈 Angular 引入 Transfer State 机制的动机
在 Angular 之中，Transfer State 是一个用于在服务器端渲染 (SSR) 中传递状态的机制。它可以解决应用程序的一些重要问题，比如性能问题和用户体验问题。在这篇文章中，我将详细解释 Transfer State 的概念，工作原理以及如何在 Angular 应用程序中使用它。 首先 ......
【Dotnet 工具箱】基于 .NET 6 和 Angular 构建项目任务管理平台
1.Reha 时间管理大师 Rhea 是一个基于 C# 和 .NET 6 开发的在线任务管理平台，类似于 禅道、Jira、Redmine, 滴答清单等。 支持多视图多维度统一管理任务。多级结构，工作区，空间，文件夹，列表，可以更灵活的进行任务管理。 应用支持多主题和主题色切换，灵活搭配，随心所欲。 ......
基于 Angular和Material autocomplete组件再封装的可双向绑定key-value的可输入下拉框
GitHub: https://github.com/Xinzheng-Li/AngularCustomerComponent 效果图：为了方便使用，把许多比如ADD的功能去了，可以在使用后自行实现。 调用： 1 <app-autocomplete-input [menuItems]="autoco ......
【Angular】视图封装
参考：What is View Encapsulation in Angular | View Encapsulation 作用：控制样式作用域 类型： ViewEncapsulation.Emulated（默认值），本组件的样式只会应用到自身，不会应用到自己的子组件中，也不会流出到父组件。 Vie ......
angular使用from动态设置验证器（clearValidators、setValidators）
原文链接：https://www.longkui.site/program/frontend/angularfrom/4787/ 0.背景 调试一个angular的form表单，根据条件动态赋予表单的权限验证。 主要介绍clearValidators和setValidators的用法。 1.代码 初 ......
An unhandled exception occurred: Could not find the implementation for builder @angular-devkit/build-ng-packagr:build See ……
原文链接：https://www.longkui.site/error/angular-cli/4795/ 调试一个新的angula项目时，报上面的错误。断定基本是版本不匹配导致的。 看了看网上的一些信息说是升级一下 angular-cli的版本就行了。 但是升级后也不好用，后来发现， 不是要升级， ......
Angular 里的 Module 增强
Angular 模块增强：扩展你的数据模型 Angular 是一个强大的前端框架，但在某些情况下，我们可能需要对其内置模型进行一些自定义。这时，Angular 的模块增强（Module Augmentation）就派上了用场。在本文中，我们将深入研究 Angular 模块增强的细节，以及如何利用它来 ......
如何使用 Angular augmentation 技术增强一个 enum 类型
增强 TypeScript 和 Angular 中的 Enum 类型 在 TypeScript 和 Angular 应用中，枚举类型（Enum）是一种非常有用的工具，用于定义一组命名的常量值。然而，有时我们需要在现有的枚举类型上进行扩展或增强。这正是 Augmentation（增强）技术的用武之地。 ......
Commands and Queries 在 Angular 应用开发中的使用场合
Commands and Queries 模式：优化前端状态管理的新范式 在现代前端开发中，管理应用程序的状态是一项至关重要的任务。在大多数应用程序中，前端状态来自于后端系统的数据，同时还需要执行各种与后端相关的操作。传统的状态管理方法如Redux虽然强大，但对于处理来自API的状态数据需要大量的样 ......
什么是 Angular 应用服务器端的预渲染技术 - prerendering
Angular 服务器端预渲染（Server Prerendering）：构建更快速、更友好的Web应用 Angular是一种强大的前端框架，用于构建现代Web应用程序。然而，随着应用规模的增长，性能问题也可能随之而来。为了提高Angular应用的性能和用户体验，开发人员可以采用各种技术和方法。其中 ......
Angular 应用里环境变量 SERVER_REQUEST_ORIGIN 的含义
SERVER_REQUEST_ORIGIN 是一个在 Angular 应用中用于管理服务器请求来源的环境变量。在本文中，我将详细介绍这个环境变量的含义、作用以及如何在 Angular 应用中使用它。首先，让我们理解一下这个环境变量的背景和重要性。 1. Angular 应用和环境变量 Angular ......
什么是 Angular 的 Active Support 版本和 Long Term Support 版本
Angular Active Support 版本和 Long Term Support 版本是Angular框架的两个关键概念，它们在Angular的版本管理和维护策略中起着重要的作用。本文将详细介绍这两种版本，并提供示例以更好地理解它们。 1. Angular版本概览 在深入讨论Active S ......
什么是 Angular 14 的 strict typing of Angular Reactive Forms
Angular 14 引入的 "strict typing of Angular Reactive Forms" 是一项强大的功能，它进一步提高了 Angular 应用程序的类型安全性和可维护性，特别是在处理表单时。这个功能使开发人员能够更精确地定义表单控件和表单模型的类型，从而减少了潜在的运行时错 ......
Angular inlineCriticalCss 和内部函数 walkStyleRules 介绍
有一个客户启用了 Angular Server Side Rendering，并且启用了 inlineCriticalCss，后来发现在 Dynatrace 的 hotspot 里的 vendor.js 文件有个名叫 walkStyleRules 的函数，耗时比较多。如下图所示： Angular 服 ......
什么是 Angular 企业级应用开发中的 Breaking Change
Angular 是一种流行的前端开发框架，它经常会发布新版本，以改进性能、增加新功能和修复错误。然而，随着新版本的发布，可能会引入一些不兼容的更改，这被称为 "Breaking Change"。Breaking Change 是指在应用程序升级到新版本时，可能导致现有代码无法正常工作的变更。本文将深 ......
Angular 应用构建完成后 vendor.js 文件的使用场合
vendor.js文件的来源、作用和使用场合 vendor.js文件是Angular应用中的一个重要文件，它承担了许多关键任务，包括管理应用的依赖关系、提供框架核心功能以及优化构建。本文将详细介绍vendor.js的来源、作用和使用场合，并通过示例来阐述。 来源 vendor.js文件的来源可以追溯 ......
什么是 Angular 的 outlet
Outlet是Angular框架中的一个关键概念，用于在视图层次结构中动态加载和渲染组件。在本文中，我将详细介绍什么是Outlet，并提供详细的示例来说明其用法和作用。 什么是Outlet？ Outlet是Angular中的一个指令，它用于动态加载和渲染组件。它通常与路由器（Router）一起使用， ......
什么是 Angular Tree Shaking 优化机制
Tree Shaking（树摇）是一种在现代 JavaScript 开发中广泛使用的优化技术，它的目标是消除未使用的代码，以减小应用程序的文件体积。Tree Shaking 的概念和实现是在 JavaScript 生态系统中非常重要的一部分，尤其是在构建工具如Webpack和Rollup中。 Tre ......
什么是 Angular Ahead-of-time (AOT) compilation
Ahead-of-time (AOT) 编译是 Angular 框架的一个重要特性，它在构建和优化应用程序时发挥着关键作用。AOT 编译是一种将 Angular TypeScript 代码和模板转换为高效的 JavaScript 和 HTML 的过程，通常在构建过程中执行，而不是在运行时。本文将深入 ......
Angular LOCATION_INITIALIZED Injection token 的作用介绍
import { LOCATION_INITIALIZED } from '@angular/common' 这行代码的作用是从 Angular 框架的 @angular/common 模块中导入名为 LOCATION_INITIALIZED 的符号（也可以称为常量、变量或标识符）。这个符号通常用于 ......
Angular APP_INITIALIZER Injection Token 的使用方法介绍
import { APP_INITIALIZER } from '@angular/core' 这行代码在 Angular 中的作用是导入名为 APP_INITIALIZER 的常量，它来自 Angular 核心模块 @angular/core。APP_INITIALIZER 是一个重要的 Angu ......
Angular ModuleWithProviders 类型的使用场景介绍
import { ModuleWithProviders } from '@angular/core' 这行代码在Angular中有着重要的作用，它引入了 ModuleWithProviders 类型从 @angular/core 模块中。为了更好地理解这行代码的作用，我们需要深入探讨Angular ......
Angular 应用开发中 Injection Token 的使用方法介绍
Angular是一个流行的前端JavaScript框架，它提供了一种强大的方式来构建单页应用程序（SPA）。在Angular中，依赖注入（Dependency Injection，DI）是一项关键的功能，它允许我们有效地管理应用程序中的依赖关系。Angular的依赖注入系统使用InjectionTo ......
Angular 应用程序的 Hydration 概念详解
Angular 应用程序的Hydration概念 Hydration概念是Angular应用程序中的一个关键概念，它涉及到Angular框架在客户端渲染（Client-side rendering，CSR）中的运作方式。要深入理解Hydration，首先需要了解CSR和SSR（Server-side ......
Angular 16+ 基础教程 – 开篇和目录
前言 前阵子我开始写 Angular 复习与进阶系列，写着写着，发现写不下去。 思来想去，感觉原因是主题定的不好。复习与进阶，意味着看的人就要有基础， 但是这个基础到底要多少又说不清楚，更糟糕的是这两年 Angular 团队重组后尽然开始做新功能了， 而且有越做越多的迹象，所以这个说这个基础更加混乱 ......
【项目心得】关于Angular中使用Cookie
今天写一个Angular前端项目时遇到需要使用Cookie的场景，bing寻找解决办法 根据bing搜索第一条的方法，使用了一个名为”ngx-cookie-service“的库，结果方才一导入，就提示报错，报错信息如下： Error: Uncaught (in promise): Error: NG ......