NG-ALAIN v17 升级指南 / v17 upgrade guide

[cipchk]

English Version

This guide applies to the current version ng-alain >= 16; If you encounter problems during the upgrade process, feel free to comment here. If you find any errors in this guide, please point out Or you have encountered a new problem and solved it, welcome to comment here.

Before upgrade

1. Make sure Node.js >= 18.13.0.
2. Create a new branch, or use other methods to back up the current project.
3. Delete the package-lock.json or yarn.lock file.

1.Upgrade dependencies

• Upgrade Angular to 16.x version, Run ng update @angular/core@17 @angular/cli@17 @angular-eslint/schematics@17 ng-zorro-antd@17 ng-alain@17.
• Run ng update @angular/cdk@17, if you have used @angular/cdk.
• If any warning messages appear in the console, follow the prompts to modify the corresponding code.

NG-ALAIN scaffolding upgrade all change files, please refer to: #2394.

Optional

The optional part of the work is centered around Standalone. Currently, NG-ALAIN will reserve some DEMO pages using the NgModule writing method. #2442 contains all changes in this PR.

Upgrade to Standalone

• Use bootstrapApplication instead of platformBrowserDynamic
• Use app.config.ts instead of global-config.module.ts, app.module.ts

The layout, dashboard, passport have been rewritten using standalone and can be modified according to #2442 changes.

DI configuration

• NG-ALAIN removes all DI configuration modes such as Module. forRoot. Of course, for compatibility, the NgModule writing method is still retained.
• All DI configurations are maintained by provide*, see app.config.ts for more details
• If you use a third party but does not provide a similar provide writing method, you need to transition through importProvidersFrom

HTTP interceptor

• Angular 17 has strict requirements for the order of interceptors to be visible. This upgrade has all been modified to the HttpInterceptorFn writing method (see provideHttpClient for details)
• If you upgrade from NG-ALAIN 16, withInterceptorsFromDi() will be imported by default to be compatible with the HTTP_INTERCEPTORS writing method, but it is recommended to upgrade to the new writing method as much as possible, please refer to #2442

About @delon/form

• Convert all widgets with low frequency into optional imports. All widgets will be automatically imported during this upgrade to ensure compatibility.

---

中文版

本指南适用于当前版本 ng-alain >= 16 ; 如果在升级过程中遇到问题，欢迎提出。提问前请阅读 如何向开源社区提问题 如果发现本指南存在遗漏/错误，请指出! 或者你遇到了新的问题并解决了，欢迎补充!

开始之前

1. 首先确保你 Node.js >= 18.13.0
2. 创建新的分支，或者使用其他方式备份当前项目
3. 删除项目下 package-lock.json 或 yarn.lock 文件

升级步骤

升级相关依赖

• 将项目升级到 Angular 16 运行 ng update @angular/core@17 @angular/cli@17 @angular-eslint/schematics@17 ng-zorro-antd@17 ng-alain@17。
• 如果你有单独使用 @angular/cdk 请执行 ng update @angular/cdk@17
• 如果控制台出现警告消息请按提示修改对应代码

NG-ALAIN脚手架升级全部变更文件，请参考：#2394。

可选部分

可选部分的主要工作都是围绕 Standalone 展开，目前 NG-ALAIN 会保留部分DEMO页使用 NgModule 写法。#2442 包含着这部分变动的所有内容。

升级为 Standalone

• 使用 bootstrapApplication 替代 platformBrowserDynamic
• 使用 app.config.ts 替代 global-config.module.ts, app.module.ts

其中 layout, dashboard, passport 目录采用 standalone 写法，可根据 #2442 变动自行修改。

DI配置

• NG-ALAIN 移除掉所有 Module. forRoot 之类的 DI 配置模式，当然为了兼容，依然保留 NgModule 写法
• 所有DI配置都是 provide* 来维护，更多细节见 app.config.ts
• 如果您使用第三方但不提供类似 provide 写法时，只需要借助 importProvidersFrom 过渡

HTTP拦截器

• Angular 17 对拦截器顺序可见有严格的要求，本次升级已经全部修改为 HttpInterceptorFn 写法（细节见 provideHttpClient）
• 若从 NG-ALAIN 16 升级默认为会导入 withInterceptorsFromDi() 用于兼容 HTTP_INTERCEPTORS 写法，但建议尽可能升级新的写法，可参考 #2442

关于 @delon/form

• 将小部件频率较低的全部转化为可选导入，本次升级时会自动导入所有小部件来保证兼容

[marbleqi]

运行环境： Node：v20.10.0 npm：10.2.4 yarn：1.22.21

使用如下命令进行angular项目初始化后，报错：

ng new my-project --style less --routing --package-manager yarn
cd my-project
# 以上命令执行正常
ng add ng-alain
# 以上命令执行报错，报错信息如下
i Using package manager: yarn
√ Found compatible package version: ng-alain@17.0.0.
√ Package information loaded.

The package ng-alain@17.0.0 will be installed and executed.
Would you like to proceed? Yes
√ Packages successfully installed.
Cannot find module '@angular/cdk/schematics'
Require stack:
- D:\my-project\node_modules\ng-alain\utils\standalone.js
- D:\my-project\node_modules\ng-alain\utils\alain.js
- D:\my-project\node_modules\ng-alain\utils\ast.js
- D:\my-project\node_modules\ng-alain\utils\index.js
- D:\my-project\node_modules\ng-alain\ng-add\index.js
- D:\my-project\node_modules\@angular-devkit\schematics\tools\export-ref.js
- D:\my-project\node_modules\@angular-devkit\schematics\tools\index.js
- D:\my-project\node_modules\@angular\cli\src\commands\add\cli.js
- D:\my-project\node_modules\@angular\cli\src\commands\command-config.js
- D:\my-project\node_modules\@angular\cli\src\command-builder\command-runner.js
- D:\my-project\node_modules\@angular\cli\lib\cli\index.js
- C:\Users\marbl\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js

# 需要手动执行以下命令
yarn add @angular/cdk

# 再次执行以下命令，报新的错误
ng add ng-alain

Sorry, currently only supports 16, 18 major version number of node (Got v20.10.0), pls refer to https://angular.io/guide/versions

什么时候能执行NodeJS的20版本？

[cipchk]

@marbleqi 我会修复 ，暂时先用 nvm 切换到 18.13 的版本

[marbleqi]

Cannot find module '@angular/cdk/schematics'

这个错误也一起修复了吧。

ng add ng-alain
# 以上命令执行报错，报错信息如下
i Using package manager: yarn
√ Found compatible package version: ng-alain@17.0.0.
√ Package information loaded.

The package ng-alain@17.0.0 will be installed and executed.
Would you like to proceed? Yes
√ Packages successfully installed.
Cannot find module '@angular/cdk/schematics'
Require stack:
- D:\my-project\node_modules\ng-alain\utils\standalone.js
- D:\my-project\node_modules\ng-alain\utils\alain.js
- D:\my-project\node_modules\ng-alain\utils\ast.js
- D:\my-project\node_modules\ng-alain\utils\index.js
- D:\my-project\node_modules\ng-alain\ng-add\index.js
- D:\my-project\node_modules\@angular-devkit\schematics\tools\export-ref.js
- D:\my-project\node_modules\@angular-devkit\schematics\tools\index.js
- D:\my-project\node_modules\@angular\cli\src\commands\add\cli.js
- D:\my-project\node_modules\@angular\cli\src\commands\command-config.js
- D:\my-project\node_modules\@angular\cli\src\command-builder\command-runner.js
- D:\my-project\node_modules\@angular\cli\lib\cli\index.js
- C:\Users\marbl\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js

[YongChingShieh]

Cannot find module '@angular/cdk/schematics'

这个错误也一起修复了吧。

ng add ng-alain
# 以上命令执行报错，报错信息如下
i Using package manager: yarn
√ Found compatible package version: ng-alain@17.0.0.
√ Package information loaded.

The package ng-alain@17.0.0 will be installed and executed.
Would you like to proceed? Yes
√ Packages successfully installed.
Cannot find module '@angular/cdk/schematics'
Require stack:
- D:\my-project\node_modules\ng-alain\utils\standalone.js
- D:\my-project\node_modules\ng-alain\utils\alain.js
- D:\my-project\node_modules\ng-alain\utils\ast.js
- D:\my-project\node_modules\ng-alain\utils\index.js
- D:\my-project\node_modules\ng-alain\ng-add\index.js
- D:\my-project\node_modules\@angular-devkit\schematics\tools\export-ref.js
- D:\my-project\node_modules\@angular-devkit\schematics\tools\index.js
- D:\my-project\node_modules\@angular\cli\src\commands\add\cli.js
- D:\my-project\node_modules\@angular\cli\src\commands\command-config.js
- D:\my-project\node_modules\@angular\cli\src\command-builder\command-runner.js
- D:\my-project\node_modules\@angular\cli\lib\cli\index.js
- C:\Users\marbl\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js

需要追加这个命令 ng new my-project --style less --routing --standalone

[amoycode]

升级17后出现1个现象: 开发模式下，修改代码并保存，控制台输出： 然而浏览器没有刷新，即便手动刷新也无效，修改的变更没有生效

[jonelvnoah]

升级到17后，ST表格通过url获取数据的方式出了问题，控制台里看有调用url并且有返回值，但是页面上数据没有渲染出来，依然是暂无数据

[cipchk]

升级到17后，ST表格通过url获取数据的方式出了问题，控制台里看有调用url并且有返回值，但是页面上数据没有渲染出来，依然是暂无数据

能否提供一下复现 ？

[skmbw]

升级到17后，ST表格通过url获取数据的方式出了问题，控制台里看有调用url并且有返回值，但是页面上数据没有渲染出来，依然是暂无数据

能否提供一下复现 ？

在ModalHelper中使用st组件，会出现 NullInjectorError: No provider for _NzContextMenuService，导致弹出框页面无法加载

[snowchenlei]

update error