From 67aceb3549e118905b47a773de31ffecd508a2f7 Mon Sep 17 00:00:00 2001 From: cipchk Date: Sat, 25 Nov 2023 16:49:18 +0800 Subject: [PATCH] docs: upgrade angualr 17 --- docs/architecture.en-US.md | 29 ++++----- docs/architecture.zh-CN.md | 25 ++++---- docs/changelog.en-US.md | 121 ------------------------------------ docs/changelog.zh-CN.md | 121 ------------------------------------ docs/faq.en-US.md | 4 -- docs/faq.zh-CN.md | 4 -- docs/global-config.en-US.md | 23 ++++--- docs/global-config.zh-CN.md | 23 ++++--- docs/how-to-start.en-US.md | 54 ++++++++-------- docs/how-to-start.zh-CN.md | 75 +++++----------------- docs/i18n.en-US.md | 69 +++++++++----------- docs/i18n.zh-CN.md | 69 +++++++++----------- docs/upgrade-v16.en-US.md | 25 -------- docs/upgrade-v16.zh-CN.md | 27 -------- docs/upgrade-v17.en-US.md | 52 ++++++++++++++++ docs/upgrade-v17.zh-CN.md | 53 ++++++++++++++++ 16 files changed, 263 insertions(+), 511 deletions(-) delete mode 100644 docs/upgrade-v16.en-US.md delete mode 100644 docs/upgrade-v16.zh-CN.md create mode 100644 docs/upgrade-v17.en-US.md create mode 100644 docs/upgrade-v17.zh-CN.md diff --git a/docs/architecture.en-US.md b/docs/architecture.en-US.md index f0962ab4c..44afa1629 100644 --- a/docs/architecture.en-US.md +++ b/docs/architecture.en-US.md @@ -65,25 +65,22 @@ Schematic diagram of directory structure： ├── _mock # Mock Data rule ├── src │   ├── app -│   │   ├── core # Core module +│   │   ├── core # Core │   │   │   ├── i18n │   │   │   ├── net │   │   │   │   └── default.interceptor.ts # Default HTTP interceptor │   │   │   ├── services │   │   │   │   └── startup.service.ts # Initialize project configuration -│   │   │   └── core.module.ts # Core module file +│   │   │   └── index.ts # Core index.ts │   │   ├── layout # Core layout │   │   ├── routes │   │   │   ├── ** # Business directory -│   │   │   ├── routes.module.ts # Service routing module -│   │   │   └── routes-routing.module.ts # Service routes registration +│   │   │   └── routes.ts # Service routes registration │   │   ├── shared # Shared module -│   │   │   ├── shared-delon.module.ts # @Delon/* import of secondary shared modules -│   │   │   ├── shared-zorro.module.ts # NG-ZORRO import of secondary shared modules -│   │   │   └── shared.module.ts # Shared module file +│   │   │   ├── shared-imports.ts # A collection of frequently shared components +│   │   │   └── index.ts # Shared index.ts │   │   ├── app.component.ts # Root component -│   │   └── app.module.ts # Root module -│   │   └── global-config.module.ts # @delon & ng-zorro global config +│   │   └── app.config.ts # Global config │   ├── assets # Local static resource │   ├── environments # Environment variable configuration │   ├── styles # Style directory @@ -96,9 +93,9 @@ The following is a description and use of each directory and file. The Mock data rules directory, if you create a project via [Command Line Tools](/cli), you can specify the `--mock` parameter to determine if the Mock function is required. -**src/app/core/core.module.ts** +**src/app/core/index.ts** -The core module will only be imported once. Therefore, core service classes (eg, messages, data access, etc.) that are required for the entire ** business module should exist here. +Some core business services (for example: messaging, data access, etc.) **src/app/core/i18n** @@ -108,7 +105,7 @@ The core module will only be imported once. Therefore, core service classes (eg, The default interceptor, where you can handle request parameters, request exceptions, business exceptions, and so on. -**src/app/core/services/startup.service.ts** +**src/app/core/startup/startup.service.ts** Useful when you need to execute some remote data (eg application information, user information, etc.) before Angular launches. @@ -122,13 +119,13 @@ Layout file code, refer to the page structure section. Business module, all your business code will be here. -**src/app/shared/shared.module.ts** +**src/app/shared/index.ts** -The shared module means that some third-party modules, custom components, and custom instructions that you need to use for the entire business module should exist here. In addition, for @delon & NG-ZORRO, two shared secondary module imports, `shared-delon.module.ts` and` shared-zorro.module.ts`. +A collection of some frequently shared components, The means that some third-party modules, custom components, and custom instructions that you need to use for the entire business module should exist here. In addition, for @delon & NG-ZORRO, two shared secondary module imports, `shared-delon.module.ts` and` shared-zorro.module.ts`. -**src/app/global-config.module.ts** +**src/app/app.config.ts** -Global configuration for @delon & NG-ZORRO. +Global configuration for project. **src/environments** diff --git a/docs/architecture.zh-CN.md b/docs/architecture.zh-CN.md index 82dff4379..bba6f58e3 100644 --- a/docs/architecture.zh-CN.md +++ b/docs/architecture.zh-CN.md @@ -34,25 +34,22 @@ NG-ALAIN 目标是提供更多通用性业务模块，让开发者更加专注 ├── angular.json # Angular 项目配置文件 ├── src │   ├── app -│   │   ├── core # 核心模块 +│   │   ├── core # 核心 │   │   │   ├── i18n │   │   │   ├── net │   │   │   │   └── default.interceptor.ts # 默认HTTP拦截器 │   │   │   ├── services │   │   │   │   └── startup.service.ts # 初始化项目配置 -│   │   │   └── core.module.ts # 核心模块文件 +│   │   │   └── index.ts # 核心导出 │   │   ├── layout # 通用布局 │   │   ├── routes │   │   │   ├── ** # 业务目录 -│   │   │   ├── routes.module.ts # 业务路由模块 -│   │   │   └── routes-routing.module.ts # 业务路由注册口 -│   │   ├── shared # 共享模块 -│   │   │   ├── shared-delon.module.ts # @Delon/* 次级共享模块导入 -│   │   │   ├── shared-zorro.module.ts # NG-ZORRO 次级共享模块导入 -│   │   │   └── shared.module.ts # 共享模块文件 +│   │   │   └── routes.ts # 业务路由 +│   │   ├── shared # 共享 +│   │   │   ├── shared-imports.ts # 一些高频率共享组件的集合 +│   │   │   └── index.ts # 共享导出 │   │   ├── app.component.ts # 根组件 -│   │   └── app.module.ts # 根模块 -│   │   └── global-config.module.ts # @delon & ng-zorro 全局配置项 +│   │   └── app.config.ts # 全局配置项 │   ├── assets # 本地静态资源 │   ├── environments # 环境变量配置 │   ├── styles # 样式目录 @@ -65,12 +62,12 @@ NG-ALAIN 目标是提供更多通用性业务模块，让开发者更加专注 |----|----| | **angular.json** | Angular 工作区及项目的配置文件，参考[Angular文档](https://angular.cn/guide/workspace-config) | | **_mock** | Mock 数据规则目录，若你通过 [命令行工具](/cli) 创建项目时可以指定 `--mock` 参数决定是否需要 Mock 功能 | -| **src/app/core/core.module.ts** | 核心模块，只会导入一次。因此，针对整个**业务模块都需要**使用的纯服务类（例如：消息、数据访问等） | +| **src/app/core/index.ts** | 一些核心业务服务（例如：消息、数据访问等） | | **src/app/core/i18n** | [国际化](/docs/i18n)数据加载及处理相关类，若你通过 [命令行工具](/cli) 创建项目时可以指定 `-di` 参数决定是否需要国际化支持 | | **src/app/core/net** | 默认拦截器，你可以在这里统一处理请求参数、请求异常、业务异常等动作 | -| **src/app/core/services/startup.service.ts** | 当你需要在 Angular 启动前执行一些远程数据（例如：应用信息、用户信息等）时非常有用 | +| **src/app/core/startup/startup.service.ts** | 当你需要在 Angular 启动前执行一些远程数据（例如：应用信息、用户信息等）时非常有用 | | **src/app/layout** | 布局目录，包含基础布局、空白布局、用户登录布局 | | **src/app/routes** | 业务模块，你的所有业务代码都将在这里 | -| **src/app/shared/shared.module.ts** | 共享模块，指当你需要针对整个**业务模块都需要**使用的一些第三方模块、自定义组件、自定义指令，都应该存在这里。除此之外，针对 @delon & NG-ZORRO 分别构建了 `shared-delon.module.ts`、`shared-zorro.module.ts` 两种次级共享模块的导入。 | -| **src/app/global-config.module.ts** | 针对 @delon & NG-ZORRO 的全局配置项 | +| **src/app/shared/index.ts** | 一些高频率共享组件的集合，指当你需要针对整个**业务模块都需要**使用的一些第三方模块、自定义组件、自定义指令，都应该存在这里。除此之外，针对 @delon & NG-ZORRO 分别构建了 `shared-delon.module.ts`、`shared-zorro.module.ts` 两种次级共享模块的导入。 | +| **src/app/app.config.ts** | 项目全局配置项 | | **src/environments** | 应用环境变量，包含以下值：`SERVER_URL` 所有HTTP请求的前缀；`production` 是否生产环境；`useHash` 路由是否useHash模式 | diff --git a/docs/changelog.en-US.md b/docs/changelog.en-US.md index 1e1502077..74a26b8b9 100644 --- a/docs/changelog.en-US.md +++ b/docs/changelog.en-US.md @@ -14,127 +14,6 @@ NG-ALAIN strictly follows [Semantic Versioning 2.0.0](http://semver.org/lang/zh- --- -## [16.4.2](https://github.com/ng-alain/delon/compare/16.4.1...16.4.2) (2023-10-26) - -### Performance Improvements - -* **theme:modal:** perf code ([#1671](https://github.com/ng-alain/delon/issues/1671)) ([341ff56](https://github.com/ng-alain/delon/commit/341ff56dc67d65d5a545f124a51938366c7722dc)) -* **abc:qr:** will be removed in 18.0.0 ([#1667](https://github.com/ng-alain/delon/issues/1667)) ([5a7bdd4](https://github.com/ng-alain/delon/commit/5a7bdd42226960c8140397b1a1a377fb87ca725e)) - - -## [16.4.1](https://github.com/ng-alain/delon/compare/16.4.0...16.4.1) (2023-10-20) - -### Bug Fixes - -* temp downgrade `ng-zorro-antd` to `16.2.0` ([#1663](https://github.com/ng-alain/delon/issues/1663)) ([d3da2b7](https://github.com/ng-alain/delon/commit/d3da2b753c1ebed589ba51e9f184270508eb0ff9)) - - -# [16.4.0](https://github.com/ng-alain/delon/compare/16.3.0...16.4.0) (2023-10-19) - -### Bug Fixes - -* **abc:onboarding:** correct dark style ([#1650](https://github.com/ng-alain/delon/issues/1650)) ([7a21933](https://github.com/ng-alain/delon/commit/7a219338660bfbbe18f5ee35ccd1caaabf6e40a4)) -* **abc:st:** correct width misalignment in export excel ([#1655](https://github.com/ng-alain/delon/issues/1655)) ([76db16c](https://github.com/ng-alain/delon/commit/76db16c526057138e470244ccef1cd67e853ccc9)) -* **cli:** missing `fileReplacements` in Angular16 ([#1658](https://github.com/ng-alain/delon/issues/1658)) ([c5b46ee](https://github.com/ng-alain/delon/commit/c5b46ee50a3741dba0f0731f2f2326e9fd47b6cd)) -* **form:array:** fix invalid ui in `ui` schema ([#1657](https://github.com/ng-alain/delon/issues/1657)) ([6b3c711](https://github.com/ng-alain/delon/commit/6b3c711f2f56cbf93f2078b6d83a751b9bdd8bde)) -* **form:select:** correct trigger onSearch in reset when set value ([#1660](https://github.com/ng-alain/delon/issues/1660)) ([fa234cd](https://github.com/ng-alain/delon/commit/fa234cd2e7a127e4df79a82b6965a03220497143)) -* **form:** fix `visibleIf` to correctly trigger `reset` ([#1653](https://github.com/ng-alain/delon/issues/1653)) ([d80f8fb](https://github.com/ng-alain/delon/commit/d80f8fba87659be8099962817cbd17422a5ae249)) -* **form:** fix render UI can't be inherit ([#1661](https://github.com/ng-alain/delon/issues/1661)) ([ee96aaa](https://github.com/ng-alain/delon/commit/ee96aaac047dfa990aa0ffc2d94808939c3311c5)) -* **fix(form:widget:object):** fix missing optional of card type ([#1661](https://github.com/ng-alain/delon/issues/1661)) ([ee96aaa](https://github.com/ng-alain/delon/commit/ee96aaac047dfa990aa0ffc2d94808939c3311c5)) - -### Features - -* **abc:onboarding:** add `key` ([#1652](https://github.com/ng-alain/delon/issues/1652)) ([5edaa97](https://github.com/ng-alain/delon/commit/5edaa970f508c402d94843bb8260a5d72bdb5870)) -* **abc:theme:** add `.tag-wrap-list-spacing` class ([#1647](https://github.com/ng-alain/delon/issues/1647)) ([5da4ecb](https://github.com/ng-alain/delon/commit/5da4ecb766c9195609899dbaa543b5eefad82f01)) -* **cli:** add provide function ([#1654](https://github.com/ng-alain/delon/issues/1654)) ([c8779f4](https://github.com/ng-alain/delon/commit/c8779f41234364bf8690dcf9c9aa5d90c48eadcd)) - - -# [16.3.0](https://github.com/ng-alain/delon/compare/16.2.1...16.3.0) (2023-09-01) - -### SCAFFOLDING - -* enabled `bindToComponentInputs` [#2409](https://github.com/ng-alain/ng-alain/pull/2409/files). - -### Bug Fixes - -* **abc:pdf:** fix ignore dependency `pdfjs-dist` (If you [use local path](https://ng-alain.com/components/pdf) to load the libary, you need to install the dependency yourself. `pdfjs-dist` depends on `canvas`, which may be slow to install dependencies due to environmental factors) ([#1641](https://github.com/ng-alain/delon/issues/1641)) ([#1641](https://github.com/ng-alain/delon/issues/1641)) ([b987bab](https://github.com/ng-alain/delon/commit/b987baba6035eb60872c4ee48198568df140869c)) -* **form:select:** fix ignore reset option data when set `onSearch` ([#1644](https://github.com/ng-alain/delon/issues/1644)) ([1f8def7](https://github.com/ng-alain/delon/commit/1f8def70856c091ed677cbd47aed7ca230a2aa79)) -* **theme:http:** fix missing `content` of `HttpOptions` ([#1640](https://github.com/ng-alain/delon/issues/1640)) ([28eeceb](https://github.com/ng-alain/delon/commit/28eecebd7ab71a1b9a8345c0af1ebe22fd3bc1a6)) - -### Features - -* **abc:cell:** add `cell` component ([#1530](https://github.com/ng-alain/delon/issues/1530)) ([26023ca](https://github.com/ng-alain/delon/commit/26023cac7a91cae5383cfffd26d44fba6a95fb9f)) -* **abc:page-header:** add `titleSub` property ([#1643](https://github.com/ng-alain/delon/issues/1643)) ([79e229f](https://github.com/ng-alain/delon/commit/79e229f5c1b509dd463c48e4a82b361e5d923920)) -* **abc:st:** add `tooltip` in tag or badge ([#1634](https://github.com/ng-alain/delon/issues/1634)) ([0e9006e](https://github.com/ng-alain/delon/commit/0e9006e5b9fd30092b5a808f9b3d8012fd3a060c)) -* **abc:sv:** add `bordered` property ([#1628](https://github.com/ng-alain/delon/issues/1628)) ([ccfa5e1](https://github.com/ng-alain/delon/commit/ccfa5e1d6f5cf1d3f9bc5360bc2e373604ae22a2)) -* **cli:** add `bindToComponentInputs` of `ng add` ([#1630](https://github.com/ng-alain/delon/issues/1630)) ([9717d9d](https://github.com/ng-alain/delon/commit/9717d9dd4ee1d5ab1526616a99da7b70e8664bd2)) -* **theme:drawer:** add `closeAll`, `openDrawers` method ([#1627](https://github.com/ng-alain/delon/issues/1627)) ([bab3d0c](https://github.com/ng-alain/delon/commit/bab3d0c3c648d933784c4623b2714ac227219c5c)) -* **theme:modal:** add size support percentage ([#1626](https://github.com/ng-alain/delon/issues/1626)) ([8b52a08](https://github.com/ng-alain/delon/commit/8b52a08d82378a42e06c316757e19e5434e109dc)) - - -## [16.2.1](https://github.com/ng-alain/delon/compare/16.2.0...16.2.1) (2023-08-06) - -### Bug Fixes - -* **abc:reuse-tab:** fix missing export cache ([#1633](https://github.com/ng-alain/delon/issues/1633)) ([2c7def7](https://github.com/ng-alain/delon/commit/2c7def75a5b219a58319ab129407f4058010fc44)) -* **auth:cookie:** fix cookie expires ([#1636](https://github.com/ng-alain/delon/issues/1636)) ([eca7bcb](https://github.com/ng-alain/delon/commit/eca7bcb2e7ba43b3a4b3bb4ab3cd17a7d762a967)) -* **theme:table:** fix table image spacing ([#1629](https://github.com/ng-alain/delon/issues/1629)) ([994e2be](https://github.com/ng-alain/delon/commit/994e2be90354a55a538ed1b55c413b8ce8cde872)) -* **theme:title:** fix ignore empty title ([#1638](https://github.com/ng-alain/delon/issues/1638)) ([c7bf339](https://github.com/ng-alain/delon/commit/c7bf339ee417a3b238cdb7dc18cccd1fe99a6c88)) - - -# [16.2.0](https://github.com/ng-alain/delon/compare/16.1.1...16.2.0) (2023-07-21) - -### SCAFFOLDING - -* Breaking changes router guard [#2407](https://github.com/ng-alain/ng-alain/pull/2407/files). -* Code style [#2405](https://github.com/ng-alain/ng-alain/pull/2405/files#diff-a3f38f2cae79a3819f93ff1a9d4cd281cbe8f95696e14a29864f08796d3dc568). - -### Bug Fixes - -* **abc:onboarding:** fix `ComponentFactoryResolver` ([#1624](https://github.com/ng-alain/delon/issues/1624)) ([ae065c2](https://github.com/ng-alain/delon/commit/ae065c21e9ba1ea0d56bae9ceb1e44b7bbb9b0fb)) -* **chat:timeline:** fix `y2` to be optional ([#1622](https://github.com/ng-alain/delon/issues/1622)) ([b565ddf](https://github.com/ng-alain/delon/commit/b565ddfdd7872a43f9fd3b3a1fd33d739f08074c)) -* **cli:** remove `skipTests` from generating module ([#1616](https://github.com/ng-alain/delon/issues/1616)) ([0da83f8](https://github.com/ng-alain/delon/commit/0da83f83b90ea5a367d35c6761554d7ebc07bfd0)) -* fix misalignment of `col` placeholders in `se`, `sv`, `sg` ([#1617](https://github.com/ng-alain/delon/issues/1617)) ([83b08c9](https://github.com/ng-alain/delon/commit/83b08c95ba803cf29e0f10bb354ae4f9170b2295)) -* **theme:modal:** removed `nzComponentParams` ([#1615](https://github.com/ng-alain/delon/issues/1615)) ([45863a1](https://github.com/ng-alain/delon/commit/45863a1d62e5751416321cb1d591faf820bb82d3)) - -### Features - -* **abc:st:** add `onCell`, support colSpan and rowSpan merging ([#1613](https://github.com/ng-alain/delon/issues/1613)) ([9ab109e](https://github.com/ng-alain/delon/commit/9ab109e8f99fb1bd4e5b4e99b0b814bf34f0b4ac)) -* **abc:st:** button support function method of `icon`, `className` ([#1618](https://github.com/ng-alain/delon/issues/1618)) ([6bf27da](https://github.com/ng-alain/delon/commit/6bf27dac696818ff78b0ee955333e308597c968b)) -* **theme:layout-default:** add `fetching` property ([#1614](https://github.com/ng-alain/delon/issues/1614)) ([8446da6](https://github.com/ng-alain/delon/commit/8446da6fdd10d07f2e917d91830d95e1c81d2622)) - -### BREAKING CHANGE - -* **acl:** refactor `ACLGuard` to `aclCanMatch`, `aclCanActivate`, `aclCanActivateChild` -* **auth:simple** refactor `SimpleGuard` to `authSimpleCanMatch`, `authSimpleCanActivate`, `authSimpleCanActivateChild` -* **auth:jtw** refactor `JWTGuard` to `authJWTCanMatch`, `authJWTCanActivate`, `authJWTCanActivateChild` -* **i18n** refactor `AlainI18NGuard` to `alainI18nCanMatch`, `alainI18nCanActivate`, `alainI18nCanActivateChild` - - -# [16.1.1](https://github.com/ng-alain/delon/compare/16.0.1...16.1.0) (2023-07-16) - -### Bug Fixes - -* **cli:** remove `stylelint-config-prettier` ([#1606](https://github.com/ng-alain/delon/issues/1606)) ([2ecc28b](https://github.com/ng-alain/delon/commit/2ecc28b53773d9b5215ebd720be4ead55d78c705)) -* **theme:** fix ant-btn preserve white spaces when is link type ([#1605](https://github.com/ng-alain/delon/issues/1605)) ([0fdd15d](https://github.com/ng-alain/delon/commit/0fdd15dd0922bf6570d38fabd1afc1ca755b87a2)) - -### Features - -* **abc:reuse-tab:** support custom cache data ([#1609](https://github.com/ng-alain/delon/issues/1609)) ([11599d9](https://github.com/ng-alain/delon/commit/11599d9566712c707146e4ac299ec6efc2d82b01)) -* **theme:modal:** support drag ([#1607](https://github.com/ng-alain/delon/issues/1607)) ([3cd73f7](https://github.com/ng-alain/delon/commit/3cd73f7f86a76a7ea450f839e9ad359f6afd0da4)) - - -## [16.0.1](https://github.com/ng-alain/delon/compare/16.0.0...16.0.1) (2023-06-08) - -* fix `ng-zorro-antd` dependency - -# [16.0.0](https://github.com/ng-alain/delon/compare/15.2.1...16.0.0) (2023-06-07) - -### Bug Fixes - -* **abc:st:** fix error row class in fixed column title cell ([#1598](https://github.com/ng-alain/delon/issues/1598)) ([d2bf211](https://github.com/ng-alain/delon/commit/d2bf211a35df8bcbee165b54bcda4b2dcf69c6f0)) -* **form:** fix inheriting references to other of ui ([#1600](https://github.com/ng-alain/delon/issues/1600)) ([a0150e7](https://github.com/ng-alain/delon/commit/a0150e7520376064469cfa5ae0e3394635620022)) - ## Old Versions diff --git a/docs/changelog.zh-CN.md b/docs/changelog.zh-CN.md index e8acd3753..0a002802b 100644 --- a/docs/changelog.zh-CN.md +++ b/docs/changelog.zh-CN.md @@ -14,127 +14,6 @@ NG-ALAIN 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) --- -## [16.4.2](https://github.com/ng-alain/delon/compare/16.4.1...16.4.2) (2023-10-26) - -### Performance Improvements - -* **theme:modal:** perf code ([#1671](https://github.com/ng-alain/delon/issues/1671)) ([341ff56](https://github.com/ng-alain/delon/commit/341ff56dc67d65d5a545f124a51938366c7722dc)) -* **abc:qr:** will be removed in 18.0.0 ([#1667](https://github.com/ng-alain/delon/issues/1667)) ([5a7bdd4](https://github.com/ng-alain/delon/commit/5a7bdd42226960c8140397b1a1a377fb87ca725e)) - - -## [16.4.1](https://github.com/ng-alain/delon/compare/16.4.0...16.4.1) (2023-10-20) - -### Bug Fixes - -* temp downgrade `ng-zorro-antd` to `16.2.0` ([#1663](https://github.com/ng-alain/delon/issues/1663)) ([d3da2b7](https://github.com/ng-alain/delon/commit/d3da2b753c1ebed589ba51e9f184270508eb0ff9)) - - -# [16.4.0](https://github.com/ng-alain/delon/compare/16.3.0...16.4.0) (2023-10-19) - -### Bug Fixes - -* **abc:onboarding:** 纠正暗黑风格 ([#1650](https://github.com/ng-alain/delon/issues/1650)) ([7a21933](https://github.com/ng-alain/delon/commit/7a219338660bfbbe18f5ee35ccd1caaabf6e40a4)) -* **abc:st:** 纠正导出 Excel 中的宽度未对齐问题 ([#1655](https://github.com/ng-alain/delon/issues/1655)) ([76db16c](https://github.com/ng-alain/delon/commit/76db16c526057138e470244ccef1cd67e853ccc9)) -* **cli:** 修复 Angular 16 下 `ng new ng-alain` 缺失 `fileReplacements` ([#1658](https://github.com/ng-alain/delon/issues/1658)) ([c5b46ee](https://github.com/ng-alain/delon/commit/c5b46ee50a3741dba0f0731f2f2326e9fd47b6cd)) -* **form:array:** 修复 `ui` 属性无法合并 ui ([#1657](https://github.com/ng-alain/delon/issues/1657)) ([6b3c711](https://github.com/ng-alain/delon/commit/6b3c711f2f56cbf93f2078b6d83a751b9bdd8bde)) -* **form:select:** 纠正有默认值时初始化时无法触发 `onSearch` ([#1660](https://github.com/ng-alain/delon/issues/1660)) ([fa234cd](https://github.com/ng-alain/delon/commit/fa234cd2e7a127e4df79a82b6965a03220497143)) -* **form:** 修复设置 `visibleIf` 触发时也会触发 `reset` 方法 ([#1653](https://github.com/ng-alain/delon/issues/1653)) ([d80f8fb](https://github.com/ng-alain/delon/commit/d80f8fba87659be8099962817cbd17422a5ae249)) -* **form:** 修复渲染UI不应被继承([#1661](https://github.com/ng-alain/delon/issues/1661)) ([ee96aaa](https://github.com/ng-alain/delon/commit/ee96aaac047dfa990aa0ffc2d94808939c3311c5)) -* **fix(form:widget:object):** 修复 `card` 样式缺失 `optional` ([#1661](https://github.com/ng-alain/delon/issues/1661)) ([ee96aaa](https://github.com/ng-alain/delon/commit/ee96aaac047dfa990aa0ffc2d94808939c3311c5)) - -### Features - -* **abc:onboarding:** 新增 `key` 用于自动判断是否发生版本变化 ([#1652](https://github.com/ng-alain/delon/issues/1652)) ([5edaa97](https://github.com/ng-alain/delon/commit/5edaa970f508c402d94843bb8260a5d72bdb5870)) -* **abc:theme:** 纠正 `ng-tag` 列表换行间距问题 ([#1647](https://github.com/ng-alain/delon/issues/1647)) ([5da4ecb](https://github.com/ng-alain/delon/commit/5da4ecb766c9195609899dbaa543b5eefad82f01)) -* **cli:** add provide function ([#1654](https://github.com/ng-alain/delon/issues/1654)) ([c8779f4](https://github.com/ng-alain/delon/commit/c8779f41234364bf8690dcf9c9aa5d90c48eadcd)) - - -# [16.3.0](https://github.com/ng-alain/delon/compare/16.2.1...16.3.0) (2023-09-01) - -### SCAFFOLDING - -* 启用 `bindToComponentInputs` [#2409](https://github.com/ng-alain/ng-alain/pull/2409/files). - -### Bug Fixes - -* **abc:pdf:** 忽略依赖 `pdfjs-dist`（若使用[本地](https://ng-alain.com/components/pdf)加载模式，需要自行安装该依赖，`pdfjs-dist` 依赖了 `canvas` 可能会因为环境因素安装依赖很慢） ([#1641](https://github.com/ng-alain/delon/issues/1641)) ([b987bab](https://github.com/ng-alain/delon/commit/b987baba6035eb60872c4ee48198568df140869c)) -* **form:select:** 当设置 `onSearch` 时重置数据时会忽略更新预选数据 ([#1644](https://github.com/ng-alain/delon/issues/1644)) ([1f8def7](https://github.com/ng-alain/delon/commit/1f8def70856c091ed677cbd47aed7ca230a2aa79)) -* **theme:http:** 纠正 `HttpOptions` 缺少 `content` ([#1640](https://github.com/ng-alain/delon/issues/1640)) ([28eeceb](https://github.com/ng-alain/delon/commit/28eecebd7ab71a1b9a8345c0af1ebe22fd3bc1a6)) - -### Features - -* **abc:cell:** 新增 `cell` 单元格数据组件 ([#1530](https://github.com/ng-alain/delon/issues/1530)) ([26023ca](https://github.com/ng-alain/delon/commit/26023cac7a91cae5383cfffd26d44fba6a95fb9f)) -* **abc:page-header:** 新增 `titleSub` 子标题属性 ([#1643](https://github.com/ng-alain/delon/issues/1643)) ([79e229f](https://github.com/ng-alain/delon/commit/79e229f5c1b509dd463c48e4a82b361e5d923920)) -* **abc:st:** 标签或徽标支持 `tooltip` ([#1634](https://github.com/ng-alain/delon/issues/1634)) ([0e9006e](https://github.com/ng-alain/delon/commit/0e9006e5b9fd30092b5a808f9b3d8012fd3a060c)) -* **abc:sv:** 新增 `bordered` 是否显示边框 ([#1628](https://github.com/ng-alain/delon/issues/1628)) ([ccfa5e1](https://github.com/ng-alain/delon/commit/ccfa5e1d6f5cf1d3f9bc5360bc2e373604ae22a2)) -* **cli:** `ng add` 开启 `bindToComponentInputs` ([#1630](https://github.com/ng-alain/delon/issues/1630)) ([9717d9d](https://github.com/ng-alain/delon/commit/9717d9dd4ee1d5ab1526616a99da7b70e8664bd2)) -* **theme:drawer:** 新增 `closeAll`, `openDrawers` 方法 ([#1627](https://github.com/ng-alain/delon/issues/1627)) ([bab3d0c](https://github.com/ng-alain/delon/commit/bab3d0c3c648d933784c4623b2714ac227219c5c)) -* **theme:modal:** 支持百分比大小 ([#1626](https://github.com/ng-alain/delon/issues/1626)) ([8b52a08](https://github.com/ng-alain/delon/commit/8b52a08d82378a42e06c316757e19e5434e109dc)) - - -## [16.2.1](https://github.com/ng-alain/delon/compare/16.2.0...16.2.1) (2023-08-06) - -### Bug Fixes - -* **abc:reuse-tab:** 修复缺少导出缓存相关 ([#1633](https://github.com/ng-alain/delon/issues/1633)) ([2c7def7](https://github.com/ng-alain/delon/commit/2c7def75a5b219a58319ab129407f4058010fc44)) -* **auth:cookie:** 修复过期值应与 expires 同步 ([#1636](https://github.com/ng-alain/delon/issues/1636)) ([eca7bcb](https://github.com/ng-alain/delon/commit/eca7bcb2e7ba43b3a4b3bb4ab3cd17a7d762a967)) -* **theme:table:** 修复单图像的间距问题 ([#1629](https://github.com/ng-alain/delon/issues/1629)) ([994e2be](https://github.com/ng-alain/delon/commit/994e2be90354a55a538ed1b55c413b8ce8cde872)) -* **theme:title:** 修复应忽略空标题 ([#1638](https://github.com/ng-alain/delon/issues/1638)) ([c7bf339](https://github.com/ng-alain/delon/commit/c7bf339ee417a3b238cdb7dc18cccd1fe99a6c88)) - - -# [16.2.0](https://github.com/ng-alain/delon/compare/16.1.1...16.2.0) (2023-07-21) - -### SCAFFOLDING - -* 路由守卫的破坏性变更 [#2407](https://github.com/ng-alain/ng-alain/pull/2407/files). -* 代码风格变更 [#2405](https://github.com/ng-alain/ng-alain/pull/2405/files#diff-a3f38f2cae79a3819f93ff1a9d4cd281cbe8f95696e14a29864f08796d3dc568). - -### Bug Fixes - -* **abc:onboarding:** 修复使用过期方法 `ComponentFactoryResolver` ([#1624](https://github.com/ng-alain/delon/issues/1624)) ([ae065c2](https://github.com/ng-alain/delon/commit/ae065c21e9ba1ea0d56bae9ceb1e44b7bbb9b0fb)) -* **chat:timeline:** 修复 `y2` 指标数据为可选 ([#1622](https://github.com/ng-alain/delon/issues/1622)) ([b565ddf](https://github.com/ng-alain/delon/commit/b565ddfdd7872a43f9fd3b3a1fd33d739f08074c)) -* **cli:** 移除生成模块时包含无效参数 `skipTests` ([#1616](https://github.com/ng-alain/delon/issues/1616)) ([0da83f8](https://github.com/ng-alain/delon/commit/0da83f83b90ea5a367d35c6761554d7ebc07bfd0)) -* 修复 `col` 占位符不对齐问题，涉及 `se`, `sv`, `sg` 组件 ([#1617](https://github.com/ng-alain/delon/issues/1617)) ([83b08c9](https://github.com/ng-alain/delon/commit/83b08c95ba803cf29e0f10bb354ae4f9170b2295)) -* **theme:modal:** 修复过期参数 `nzComponentParams` ([#1615](https://github.com/ng-alain/delon/issues/1615)) ([45863a1](https://github.com/ng-alain/delon/commit/45863a1d62e5751416321cb1d591faf820bb82d3)) - -### Features - -* **abc:st:** 新增 `onCell` 方法支持合并列或行 ([#1613](https://github.com/ng-alain/delon/issues/1613)) ([9ab109e](https://github.com/ng-alain/delon/commit/9ab109e8f99fb1bd4e5b4e99b0b814bf34f0b4ac)) -* **abc:st:** 新增 `icon`, `className` 方法支持动态调整 ([#1618](https://github.com/ng-alain/delon/issues/1618)) ([6bf27da](https://github.com/ng-alain/delon/commit/6bf27dac696818ff78b0ee955333e308597c968b)) -* **theme:layout-default:** 新增 `fetchingStrictly`, `fetching` 属性用于自主受控顶部加载动画状态 ([#1614](https://github.com/ng-alain/delon/issues/1614)) ([8446da6](https://github.com/ng-alain/delon/commit/8446da6fdd10d07f2e917d91830d95e1c81d2622)) - -### BREAKING CHANGE - -* **acl:** 重构 `ACLGuard` 为 `aclCanMatch`, `aclCanActivate`, `aclCanActivateChild` -* **auth:simple** 重构 `SimpleGuard` 为 `authSimpleCanMatch`, `authSimpleCanActivate`, `authSimpleCanActivateChild` -* **auth:jtw** 重构 `JWTGuard` 为 `authJWTCanMatch`, `authJWTCanActivate`, `authJWTCanActivateChild` -* **i18n** 重构 `AlainI18NGuard` 为 `alainI18nCanMatch`, `alainI18nCanActivate`, `alainI18nCanActivateChild` - - -# [16.1.1](https://github.com/ng-alain/delon/compare/16.0.1...16.1.0) (2023-07-16) - -### Bug Fixes - -* **cli:** 移除过期库 `stylelint-config-prettier` ([#1606](https://github.com/ng-alain/delon/issues/1606)) ([2ecc28b](https://github.com/ng-alain/delon/commit/2ecc28b53773d9b5215ebd720be4ead55d78c705)) -* **theme:** 修复忽略两个 `nzType="link"` 按错时间距 ([#1605](https://github.com/ng-alain/delon/issues/1605)) ([0fdd15d](https://github.com/ng-alain/delon/commit/0fdd15dd0922bf6570d38fabd1afc1ca755b87a2)) - -### Features - -* **abc:reuse-tab:** 新增可自定义缓存存储 ([#1609](https://github.com/ng-alain/delon/issues/1609)) ([11599d9](https://github.com/ng-alain/delon/commit/11599d9566712c707146e4ac299ec6efc2d82b01)) -* **theme:modal:** 新增支持拖拽参数 `drag` ([#1607](https://github.com/ng-alain/delon/issues/1607)) ([3cd73f7](https://github.com/ng-alain/delon/commit/3cd73f7f86a76a7ea450f839e9ad359f6afd0da4)) - - -## [16.0.1](https://github.com/ng-alain/delon/compare/16.0.0...16.0.1) (2023-06-08) - -* 修复 `ng-zorro-antd` 错位版本依赖 - -# [16.0.0](https://github.com/ng-alain/delon/compare/15.2.1...16.0.0) (2023-06-07) - -### Bug Fixes - -* **abc:st:** 修复固定列样式错误 ([#1598](https://github.com/ng-alain/delon/issues/1598)) ([d2bf211](https://github.com/ng-alain/delon/commit/d2bf211a35df8bcbee165b54bcda4b2dcf69c6f0)) -* **form:** 修复ui由于继承关系导致重复引用 ([#1600](https://github.com/ng-alain/delon/issues/1600)) ([a0150e7](https://github.com/ng-alain/delon/commit/a0150e7520376064469cfa5ae0e3394635620022)) - ## 历史版本 diff --git a/docs/faq.en-US.md b/docs/faq.en-US.md index 78d418aad..005899ed1 100644 --- a/docs/faq.en-US.md +++ b/docs/faq.en-US.md @@ -10,10 +10,6 @@ Please check the FAQ below before asking questions. ## Basic -### Can't Bind to since it isn't a known property of - -When you have multiple lazy modules, you want each submodule to use the component library (for example: `NgZorroAntdModule`, `NgxTinymceModule`) should be exported in `ShareModule`, please refer to [module registration guidelines](/docs/Module). - ### Expression Changed After It Has Been Checked Error Common mistakes under Angular, [this article](https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4) will help you understand why. diff --git a/docs/faq.zh-CN.md b/docs/faq.zh-CN.md index bb59cc8b3..b141560c4 100644 --- a/docs/faq.zh-CN.md +++ b/docs/faq.zh-CN.md @@ -10,10 +10,6 @@ type: Other ## 基础 -### Can't Bind to since it isn't a known property of - -当你有多个懒模块时，希望每个子模块都需要使用组件库时（例如：`NgZorroAntdModule`、`NgxTinymceModule`）应在 `ShareModule` 中 export，请参考[模块注册指导原则](/docs/module)。 - ### Expression Changed After It Has Been Checked Error 错误 Angular 下常见错误，[这篇文章](https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4) 会帮助你理解原因。 diff --git a/docs/global-config.en-US.md b/docs/global-config.en-US.md index f712aa77b..c0b30d6fc 100644 --- a/docs/global-config.en-US.md +++ b/docs/global-config.en-US.md @@ -10,22 +10,31 @@ We add support of **global configuration** to many components. You can define th ## How to Use? -If you want to provide default configurations to some components, please use `provideAlainConfig` function. object providing implements interface `AlainConfig` For example: +If you want to provide default configurations to some components, please use `provideAlain` function. object providing implements interface `AlainProvideOptions` For example: ```typescript // global-config.module.ts -import { AlainConfig } from '@delon/util/config'; +import { AlainConfig, AlainProvideLang } from '@delon/util/config'; +import { ICONS } from '../style-icons'; +import { ICONS_AUTO } from '../style-icons-auto'; + +const defaultLang: AlainProvideLang = { + abbr: 'zh-CN', + ng: ngLang, + zorro: zorroLang, + date: dateLang, + delon: delonLang +}; const alainConfig: AlainConfig = { st: { ps: 3 }, }; -@NgModule({ +export const appConfig: ApplicationConfig = { providers: [ - provideAlainConfig(alainConfig) - ], -}) -export class GlobalConfigModule {} + provideAlain({ config: alainConfig, defaultLang, icons: [...ICONS_AUTO, ...ICONS] }) + ] +}; ``` These global configuration would be injected into a service named `AlainConfigService` and gets stored. diff --git a/docs/global-config.zh-CN.md b/docs/global-config.zh-CN.md index d2e728e05..1cd350ee3 100644 --- a/docs/global-config.zh-CN.md +++ b/docs/global-config.zh-CN.md @@ -10,22 +10,31 @@ type: Dev ## 如何使用 -想要为某些组件提供默认配置项，可以使用 `provideAlainConfig` 函数，转入一个符合 `AlainConfig` 接口的对象，例如： +想要为某些组件提供默认配置项，可以使用 `provideAlain` 函数，转入一个符合 `AlainProvideOptions` 接口的对象，例如： ```typescript // global-config.module.ts -import { AlainConfig } from '@delon/util/config'; +import { AlainConfig, AlainProvideLang } from '@delon/util/config'; +import { ICONS } from '../style-icons'; +import { ICONS_AUTO } from '../style-icons-auto'; + +const defaultLang: AlainProvideLang = { + abbr: 'zh-CN', + ng: ngLang, + zorro: zorroLang, + date: dateLang, + delon: delonLang +}; const alainConfig: AlainConfig = { st: { ps: 3 }, }; -@NgModule({ +export const appConfig: ApplicationConfig = { providers: [ - provideAlainConfig(alainConfig) - ], -}) -export class GlobalConfigModule {} + provideAlain({ config: alainConfig, defaultLang, icons: [...ICONS_AUTO, ...ICONS] }) + ] +}; ``` 这些全局配置项将会被注入 `AlainConfigService` 当中并保存。 diff --git a/docs/how-to-start.en-US.md b/docs/how-to-start.en-US.md index a84bd382e..bfdbe75d2 100644 --- a/docs/how-to-start.en-US.md +++ b/docs/how-to-start.en-US.md @@ -31,13 +31,14 @@ When running an app via `ng serve`, a complete Angular startup process would loo ### 1) APP_INITIALIZER -From a mid and back-office perspective, NG-ALAIN always believes that a network request is required to get some application information (eg menu data, user data, etc.) before Angular starts.[startup.service.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts)；It returns a `Promise` object, which always needs to be called: `resolve()` to ensure that Angular starts normally. +Angular provides a DI (dependency injection) token `APP_INITIALIZER` that allows the application to perform some data that will affect the rendering results when it starts, such as: language data, menu data, user information data, dictionary data, etc., and must return an `Observable` Asynchronous, asynchronous means that you can do a lot of interesting things, such as data coming from a remote location. `APP_INITIALIZER` will only be executed once, you only need to register it in the `ApplicationConfig` module. -> Network requests may encounter a 403 error because the scaffolding uses the user authentication module by default and always assumes that all requests must be a valid user authorization. For more documentation see: -> - [Interact with server](/docs/server) -> - [Auth User Authentication](/auth) +The NG-ALAIN scaffolding provides a sample code on how to load basic data before starting rendering after starting Angular [startup.service.ts](https://github.com/ng-alain/ng-alain/blob/ master/src/app/core/startup/startup.service.ts). -After obtaining the application information, you need to assign some values ​​to the built-in services of the scaffolding, including: +1. Provide unified registration `provideStartup` function, which only needs to be registered in `app.config.ts` +2. Provide the `load()` function and ensure that **regardless of whether the request is successful or not** must return an `Observable` for Angular to render normally, otherwise Angular will not be able to start. + +> Note: NG-ALAIN provides authorization services. If the requested data interface cannot be authorized, you can add `ALLOW_ANONYMOUS` to mark it. **Application Information** @@ -99,18 +100,21 @@ It is recommended to load the internationalization package first before starting ### 2) Business routing -Scaffolding top-level routing begins with [routes-routing.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/routes/routes-routing.module.ts) Its structure is as follows: +Scaffolding top-level routing begins with [routes.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/routes/routes.ts) Its structure is as follows: ```ts const routes: Routes = [ { path: '', - component: LayoutDefaultComponent, + component: LayoutBasicComponent, children: [ { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, - { path: 'dashboard', component: DashboardComponent, data: { title: 'Dashboard' } }, + { + path: 'dashboard', + loadChildren: () => import('./dashboard/routes').then(m => m.routes) + }, // business submodule - // { path: 'trade', loadChildren: './trade/trade.module#TradeModule' } + // { path: 'trade', loadChildren: () => import('./trade/routes').then(m => m.routes) }, ] }, // Blank layout @@ -120,37 +124,29 @@ const routes: Routes = [ children: [ ] }, - // passport - { - path: 'passport', - component: LayoutPassportComponent, - children: [ - { path: 'login', component: UserLoginComponent }, - { path: 'register', component: UserRegisterComponent }, - { path: 'register-result', component: UserRegisterResultComponent } - ] - }, - // Single page does not wrap Layout - { path: 'callback/:type', component: CallbackComponent }, - { path: '403', component: Exception403Component }, - { path: '404', component: Exception404Component }, - { path: '500', component: Exception500Component }, + { path: '', loadChildren: () => import('./passport/routes').then(m => m.routes) }, + { path: 'exception', loadChildren: () => import('./exception/routes').then(m => m.routes) }, + // All missed routes will jump to the `exception/404` page { path: '**', redirectTo: 'dashboard' } ]; ``` -Above we used the `LayoutDefaultComponent` base layout in the business module. User authorization uses `LayoutPassportComponent` user authorization layout and the full screen layout. +> The above mentioned `LayoutBasicComponent` basic layout is used in the business module, user authorization uses `LayoutPassportComponent` user authorization layout and `LayoutBlankComponent` blank layout. The above three layouts can be used in [layout](https://github.com/ ng-alain/ng-alain/tree/master/src/app/layout) directory. -It is recommended that all submodules be loaded using a lazy module, such as the `TradeModule` order module, which organizes the code structure more efficiently. +> NG-ALAIN also provides some [commercial themes](https://e.ng-alain.com/) to chooses. -### Under what circumstances do you not use lazy loading? - -Angular startup from the top-level component. When a lazy module is encountered, it will initiate a script request. At this time, the dashboard or login page will be blank due to network requests, which is not good for the experience. +For example, when a user accesses the `/dashboard` route, they will first go through `LayoutBasicComponent` -> `DashboardComponent`, and eventually form a huge component tree to represent a specific page. NG-ALAIN scaffolding helps you complete most of the work, and a newbie only needs to care about how to implement the `DashboardComponent` business component. ### Routing permission control The routing URL may be affected by the browser's own historical memory, so that users may access the unprivileged route. If you want a better experience, you need to configure the `canActivate` option on the route. When the user has no permission, it will utomatically jump to the relevant page. see the [ACL Routing Guard](/acl/guard) section for details. +### Intercept network requests + +Network requests are a very frequent task. If you want to use network request actions elegantly within business components, it is essential to centrally handle server-side URL prefixes, exception handling, token refresh and other operations. NG-ALAIN scaffolding Provide a [net](https://github.com/ng-alain/ng-alain/tree/master/src/app/core/net) file. It uses the token `HttpInterceptorFn` to act as an interceptor. + +For details of the above centralized processing actions, please refer to [default.interceptor.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/core/net/default.interceptor. ts) file. + ## IDE A developer must first sharpen his tools if he is to do his work well, NG-ALAIN recommended to use the [Visual Studio Code](https://code.visualstudio.com/) IDE, because ng-alain adds some extra features to VSCode to better help you. Development. diff --git a/docs/how-to-start.zh-CN.md b/docs/how-to-start.zh-CN.md index 4b78a8279..aa82b84ce 100644 --- a/docs/how-to-start.zh-CN.md +++ b/docs/how-to-start.zh-CN.md @@ -31,48 +31,16 @@ NG-ALAIN 技术栈基于 Typescript、Angular、图表G2 和 NG-ZORRO，在开 ### 初始化项目数据 -Angular 提供一个DI（依赖注入）令牌 `APP_INITIALIZER` 让应用启动时可以做一些会影响渲染结果的数据，比如：语言数据、菜单数据、用户信息数据、字典数据等，并且必须返回一个 `Promise` 异步函数，异步意味者可以做很多有趣的事，比如数据来自远程。`APP_INITIALIZER` 只会执行一次，只需要在 `AppModule` 模块注册它就行了。 +Angular 提供一个DI（依赖注入）令牌 `APP_INITIALIZER` 让应用启动时可以做一些会影响渲染结果的数据，比如：语言数据、菜单数据、用户信息数据、字典数据等，并且必须返回一个 `Observable` 异步，异步意味者可以做很多有趣的事，比如数据来自远程。`APP_INITIALIZER` 只会执行一次，只需要在 `ApplicationConfig` 模块注册它就行了。 -```ts -export function StartupServiceFactory(startupService: StartupService): () => Promise { - return () => startupService.load(); -} - -@NgModule({ - declarations: [AppComponent], - imports: [BrowserModule] - providers: [{ - StartupService, - { - provide: APP_INITIALIZER, - useFactory: StartupServiceFactory, - deps: [StartupService], - multi: true, - }, - }], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` +NG-ALAIN 脚手架提供了一个如何在启动 Angular 后先加载基础数据以后才会开始渲染的样板代码 [startup.service.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts)。 -而 `StartupService` 如下： +1. 提供统一注册 `provideStartup` 函数，只需要在 `app.config.ts` 注册就能生效 +2. 提供 `load()` 函数，并确保**无论请求是否成功**都必须返回一个 `Observable` 以供Angular正常渲染，否则会导致Angular无法启动 -```ts -@Injectable() -export class StartupService { - constructor(private httpClient: HttpClient) {} - - load(): Promise { - return new Promise((resolve) => { - this.httpClient.get(``).subscribe(() => { - resolve(); - }); - }); - } -} -``` +> 注：NG-ALAIN 提供授权服务，若在请求数据接口无法授权时，可加 `ALLOW_ANONYMOUS` 来标记 -哪怕 Http 请求失败，这里也必须执行 `resolve()`，否则应用就无法启动。而 NG-ALAIN 提供的 [startup.service.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts) 内容更加丰富一点，对于完整的中后台而言，大多数项目中以下这些信息都可以必备的： + NG-ALAIN 提供的 [startup.service.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts) 内容更加丰富一点，对于完整的中后台而言，大多数项目中以下这些信息都可以必备的： | 数据类型 | 描述 | |------|----| @@ -86,7 +54,7 @@ export class StartupService { ### 业务路由 -当 Angular 项目正式启动后会进入渲染动作，根据当前的路由地址来决定一个页面如何渲染，从最顶层路由 [routes-routing.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/routes/routes-routing.module.ts) 开始一层层寻找，其结构如下： +当 Angular 项目正式启动后会进入渲染动作，根据当前的路由地址来决定一个页面如何渲染，从最顶层路由 [routes.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/routes/routes.ts) 开始一层层寻找，其结构如下： ```ts const routes: Routes = [ @@ -95,9 +63,12 @@ const routes: Routes = [ component: LayoutBasicComponent, children: [ { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, - { path: 'dashboard', component: DashboardComponent, data: { title: '仪表盘' } }, + { + path: 'dashboard', + loadChildren: () => import('./dashboard/routes').then(m => m.routes) + }, // 业务子模块 - // { path: 'trade', loadChildren: './trade/trade.module#TradeModule' } + // { path: 'trade', loadChildren: () => import('./trade/routes').then(m => m.routes) }, ] }, // 空白布局 @@ -107,17 +78,8 @@ const routes: Routes = [ children: [ ] }, - // passport - { - path: 'passport', - component: LayoutPassportComponent, - children: [ - { path: 'login', component: UserLoginComponent }, - ] - }, - // 单页不包裹Layout - { path: 'passport/callback/:type', component: CallbackComponent }, - { path: 'exception', loadChildren: () => import('./exception/exception.module').then((m) => m.ExceptionModule) }, + { path: '', loadChildren: () => import('./passport/routes').then(m => m.routes) }, + { path: 'exception', loadChildren: () => import('./exception/routes').then(m => m.routes) }, // 未命中路由全部跳转至 `exception/404` 页面上 { path: '**', redirectTo: 'exception/404' }, ]; @@ -125,11 +87,9 @@ const routes: Routes = [ > 上述在业务模块中使用了 `LayoutBasicComponent` 基础布局、用户授权使用了 `LayoutPassportComponent` 用户授权布局以及 `LayoutBlankComponent` 空白布局，以上三种布局都可以在 [layout](https://github.com/ng-alain/ng-alain/tree/master/src/app/layout) 目录下找得到。 -例如当用户访问 `/dashboard` 路由时，会先经过 `LayoutBasicComponent` -> `DashboardComponent`，最终换形成一个庞大的组件树来表示一个具体的页面。NG-ALAIN 脚手架帮助你完成大多数工作，而一个新入门的人更多只需要关心 `DashboardComponent` 业务组件该如何实现。 - -**什么情况下不使用懒加载？** +> NG-ALAIN 也提供一些[商用主题](https://e.ng-alain.com/)可供选择。 -Angular 启动是从顶层组件开始向下渲染，当遇到懒模块时会先发起脚本请求，此时会因为网络请求导致仪表盘或登录页短暂的空白，这对体验并不好。 +例如当用户访问 `/dashboard` 路由时，会先经过 `LayoutBasicComponent` -> `DashboardComponent`，最终换形成一个庞大的组件树来表示一个具体的页面。NG-ALAIN 脚手架帮助你完成大多数工作，而一个新入门的人更多只需要关心 `DashboardComponent` 业务组件该如何实现。 ### 用户认证与授权 @@ -180,11 +140,10 @@ const routes: Routes = [ ### 拦截网络请求 -网络请求是一项非常频繁的工作，如果想优雅的在业务组件内使用网络请求动作的话，那么将服务端URL前缀、异常处理、Token 刷新等操作集中处理是必不可少的，NG-ALAIN 脚手架提供一个 [default.interceptor.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/core/net/default.interceptor.ts) 文件。它会利用令牌 `HTTP_INTERCEPTORS` 起到一种拦截器的效果。 +网络请求是一项非常频繁的工作，如果想优雅的在业务组件内使用网络请求动作的话，那么将服务端URL前缀、异常处理、Token 刷新等操作集中处理是必不可少的，NG-ALAIN 脚手架提供一个 [net](https://github.com/ng-alain/ng-alain/tree/master/src/app/core/net) 文件。它会利用令牌 `HttpInterceptorFn` 起到一种拦截器的效果。 有关以上集中处理的动作细节，请参考 [default.interceptor.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/core/net/default.interceptor.ts) 文件。 - ## IDE “工欲善其事，必先利其器是”，NG-ALAIN 脚手架推荐使用 [Visual Studio Code](https://code.visualstudio.com/) IDE，因为 NG-ALAIN 针对 VSCode 增加一些额外的特性，可以更好的帮助你开发。 diff --git a/docs/i18n.en-US.md b/docs/i18n.en-US.md index e6f0220fb..649fc86e4 100644 --- a/docs/i18n.en-US.md +++ b/docs/i18n.en-US.md @@ -28,10 +28,9 @@ registerLocaleData(zh); ```ts import { en_US, provideNzI18n } from 'ng-zorro-antd/i18n'; -@NgModule({ +export const appConfig: ApplicationConfig = { providers: [provideNzI18n(en_US)] -}) -export class App1Module {} +}; ``` Of course, you can also use runtime changes: @@ -75,19 +74,16 @@ switchLanguage() { ## ALAIN_I18N_TOKEN -`@delon/*` class library has many data interface properties with the _i18n_ typeface (for example: `page-header`, `st` column description, `Menu` menu data, etc.) when you want the data for these components. When the interface can dynamically switch automatically according to the Key value in the current language, you also need to define a self-implementation service interface for `ALAIN_I18N_TOKEN` (for example: [I18NService](https://github.com/ng-alain/ng-alain/blob) /master/src/app/core/i18n/i18n.service.ts)) and register under the root module. +`@delon/*` class library has many data interface properties with the _i18n_ typeface (for example: `page-header`, `st` column description, `Menu` menu data, etc.) when you want the data for these components. When the interface can dynamically switch automatically according to the Key value in the current language, you also need to define a self-implementation service interface for `ALAIN_I18N_TOKEN` (for example: [I18NService](https://github.com/ng-alain/ng-alain/blob) /master/src/app/core/i18n/i18n.service.ts)) and register under the `app.config.ts` file. ```ts -import { ALAIN_I18N_TOKEN } from '@delon/theme'; import { I18NService } from '@core'; -@NgModule({ - ... +export const appConfig: ApplicationConfig = { providers: [ - { provide: ALAIN_I18N_TOKEN, useClass: I18NService, multi: false } + provideAlain({ config: alainConfig, defaultLang, i18nClass: I18NService }), ] -}) -export class AppModule {} +}; ``` ### i18n pipe @@ -140,59 +136,54 @@ In order to make language uniformity, NG-ALAIN provides a simple unified configu #### Chinese Version ```ts -// #region i18n import { default as ngLang } from '@angular/common/locales/zh'; import { provideNzI18n, zh_CN as zorroLang } from 'ng-zorro-antd/i18n'; import { DELON_LOCALE, zh_CN as delonLang } from '@delon/theme'; -const LANG = { +import { zhCN as dateLang } from 'date-fns/locale'; +import { I18NService } from '@core'; + +const defaultLang: AlainProvideLang = { abbr: 'zh', ng: ngLang, zorro: zorroLang, + date: dateLang, delon: delonLang, }; -// register angular -import { registerLocaleData } from '@angular/common'; -registerLocaleData(LANG.ng, LANG.abbr); -const LANG_PROVIDES = [ - { provide: LOCALE_ID, useValue: LANG.abbr }, - provideNzI18n(LANG.zorro), - { provide: DELON_LOCALE, useValue: LANG.delon }, -]; -// #endregion -@NgModule({ - providers: [...LANG_PROVIDES], -}) -export class AppModule {} +export const appConfig: ApplicationConfig = { + providers: [ + provideAlain({ config: alainConfig, defaultLang, i18nClass: I18NService }), + ] +}; ``` #### English version ```ts -// #region i18n import { default as ngLang } from '@angular/common/locales/en'; import { provideNzI18n, en_US as zorroLang } from 'ng-zorro-antd/i18n'; import { DELON_LOCALE, en_US as delonLang } from '@delon/theme'; +import { en_US as dateLang } from 'date-fns/locale'; const LANG = { abbr: 'en', ng: ngLang, zorro: zorroLang, delon: delonLang, }; -// register angular -import { registerLocaleData } from '@angular/common'; -registerLocaleData(LANG.ng, LANG.abbr); -const LANG_PROVIDES = [ - { provide: LOCALE_ID, useValue: LANG.abbr }, - provideNzI18n(LANG.zorro), - { provide: DELON_LOCALE, useValue: LANG.delon }, -]; -// #endregion -@NgModule({ - providers: [...LANG_PROVIDES], -}) -export class AppModule {} +const defaultLang: AlainProvideLang = { + abbr: 'en', + ng: ngLang, + zorro: zorroLang, + date: dateLang, + delon: delonLang, +}; + +export const appConfig: ApplicationConfig = { + providers: [ + provideAlain({ config: alainConfig, defaultLang, i18nClass: I18NService }), + ] +}; ``` ### Command Line diff --git a/docs/i18n.zh-CN.md b/docs/i18n.zh-CN.md index 561e3259f..d5abe45a4 100644 --- a/docs/i18n.zh-CN.md +++ b/docs/i18n.zh-CN.md @@ -28,10 +28,9 @@ NG-ZORRO 国际化默认是中文版，例如默认为英文版本： ```ts import { en_US, provideNzI18n } from 'ng-zorro-antd/i18n'; -@NgModule({ +export const appConfig: ApplicationConfig = { providers: [provideNzI18n(en_US)] -}) -export class App1Module {} +}; ``` 当然，也可以使用运行时更改： @@ -75,19 +74,16 @@ switchLanguage() { ## ALAIN_I18N_TOKEN -`@delon/*` 类库有许多带有 _i18n_ 字样的数据接口属性（例如：`page-header`、`st` 列描述、`Menu` 菜单数据等等），当你希望这些组件的数据接口能动态根据 Key 值按当前语言自动切换时，你还需要对 `ALAIN_I18N_TOKEN` 定义一个自实现服务接口（例如：[I18NService](https://github.com/ng-alain/ng-alain/blob/master/src/app/core/i18n/i18n.service.ts)），并在根模块下注册。 +`@delon/*` 类库有许多带有 _i18n_ 字样的数据接口属性（例如：`page-header`、`st` 列描述、`Menu` 菜单数据等等），当你希望这些组件的数据接口能动态根据 Key 值按当前语言自动切换时，你还需要对 `ALAIN_I18N_TOKEN` 定义一个自实现服务接口（例如：[I18NService](https://github.com/ng-alain/ng-alain/blob/master/src/app/core/i18n/i18n.service.ts)），并在 `app.config.ts` 下注册。 ```ts -import { ALAIN_I18N_TOKEN } from '@delon/theme'; import { I18NService } from '@core'; -@NgModule({ - ... +export const appConfig: ApplicationConfig = { providers: [ - { provide: ALAIN_I18N_TOKEN, useClass: I18NService, multi: false } + provideAlain({ config: alainConfig, defaultLang, i18nClass: I18NService }), ] -}) -export class AppModule {} +}; ``` ### i18n管道 @@ -140,59 +136,54 @@ export class I18nTestComponent { #### 中文版 ```ts -// #region i18n import { default as ngLang } from '@angular/common/locales/zh'; import { provideNzI18n, zh_CN as zorroLang } from 'ng-zorro-antd/i18n'; import { DELON_LOCALE, zh_CN as delonLang } from '@delon/theme'; -const LANG = { +import { zhCN as dateLang } from 'date-fns/locale'; +import { I18NService } from '@core'; + +const defaultLang: AlainProvideLang = { abbr: 'zh', ng: ngLang, zorro: zorroLang, + date: dateLang, delon: delonLang, }; -// register angular -import { registerLocaleData } from '@angular/common'; -registerLocaleData(LANG.ng, LANG.abbr); -const LANG_PROVIDES = [ - { provide: LOCALE_ID, useValue: LANG.abbr }, - provideNzI18n(LANG.zorro), - { provide: DELON_LOCALE, useValue: LANG.delon }, -]; -// #endregion -@NgModule({ - providers: [...LANG_PROVIDES], -}) -export class AppModule {} +export const appConfig: ApplicationConfig = { + providers: [ + provideAlain({ config: alainConfig, defaultLang, i18nClass: I18NService }), + ] +}; ``` #### 英文版 ```ts -// #region i18n import { default as ngLang } from '@angular/common/locales/en'; import { provideNzI18n, en_US as zorroLang } from 'ng-zorro-antd/i18n'; import { DELON_LOCALE, en_US as delonLang } from '@delon/theme'; +import { en_US as dateLang } from 'date-fns/locale'; const LANG = { abbr: 'en', ng: ngLang, zorro: zorroLang, delon: delonLang, }; -// register angular -import { registerLocaleData } from '@angular/common'; -registerLocaleData(LANG.ng, LANG.abbr); -const LANG_PROVIDES = [ - { provide: LOCALE_ID, useValue: LANG.abbr }, - provideNzI18n(LANG.zorro), - { provide: DELON_LOCALE, useValue: LANG.delon }, -]; -// #endregion -@NgModule({ - providers: [...LANG_PROVIDES], -}) -export class AppModule {} +const defaultLang: AlainProvideLang = { + abbr: 'en', + ng: ngLang, + zorro: zorroLang, + date: dateLang, + delon: delonLang, +}; + +export const appConfig: ApplicationConfig = { + providers: [ + provideAlain({ config: alainConfig, defaultLang, i18nClass: I18NService }), + ] +}; ``` ### 命令行 diff --git a/docs/upgrade-v16.en-US.md b/docs/upgrade-v16.en-US.md deleted file mode 100644 index 4037d2b3d..000000000 --- a/docs/upgrade-v16.en-US.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -order: 1000 -type: Basic -title: Upgrade to version 16.0 -hot: true ---- - -> This guide applies to the current version ng-alain >= `15`; -> 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` >= `16.10.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 15.x version, Run `ng update @angular/core@16 @angular/cli@16 @angular-eslint/schematics@16 ng-zorro-antd@16 ng-alain@16`. -- _Run `ng update @angular/cdk@16`, 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](https://github.com/ng-alain/ng-alain/pull/2394/files). diff --git a/docs/upgrade-v16.zh-CN.md b/docs/upgrade-v16.zh-CN.md deleted file mode 100644 index 9103fed25..000000000 --- a/docs/upgrade-v16.zh-CN.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -order: 1000 -type: Basic -title: 升级到 16.0 版本 -hot: true ---- - -> 本指南适用于当前版本 ng-alain >= `15` ; -> 如果在升级过程中遇到问题，欢迎提出。提问前请阅读 [如何向开源社区提问题](https://github.com/seajs/seajs/issues/545) -> 如果发现本指南存在遗漏/错误，请指出! -> 或者你遇到了新的问题并解决了，欢迎补充! - -## 开始之前 - -1. 首先确保你 `Node.js` >= `16.10.0` -2. 创建新的分支，或者使用其他方式备份当前项目 -3. 删除项目下 `package-lock.json` 或 `yarn.lock` 文件 - -## 升级步骤 - -### 升级相关依赖 - -- 将项目升级到 Angular 15 运行 `ng update @angular/core@16 @angular/cli@16 @angular-eslint/schematics@16 ng-zorro-antd@16 ng-alain@16`。 -- _如果你有单独使用 `@angular/cdk` 请执行 `ng update @angular/cdk@16`_ -- **如果控制台出现警告消息请按提示修改对应代码** - -> NG-ALAIN脚手架升级全部变更文件，请参考：[#2394](https://github.com/ng-alain/ng-alain/pull/2394/files)。 diff --git a/docs/upgrade-v17.en-US.md b/docs/upgrade-v17.en-US.md new file mode 100644 index 000000000..5b2c28a9c --- /dev/null +++ b/docs/upgrade-v17.en-US.md @@ -0,0 +1,52 @@ +--- +order: 1000 +type: Basic +title: Upgrade to version 17.0 +hot: true +--- + +> 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](https://github.com/ng-alain/ng-alain/pull/2394/files). + +## 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](https://github.com/ng-alain/ng-alain/pull/2442/files) 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](https://github.com/ng-alain/ng-alain/pull/2442/files) 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](https://github.com/ng-alain/ng-alain/pull/2442/files) + +### About `@delon/form` + +- Convert all widgets with low frequency into optional imports. All widgets will be automatically imported during this upgrade to ensure compatibility. diff --git a/docs/upgrade-v17.zh-CN.md b/docs/upgrade-v17.zh-CN.md new file mode 100644 index 000000000..3a049cca0 --- /dev/null +++ b/docs/upgrade-v17.zh-CN.md @@ -0,0 +1,53 @@ +--- +order: 1000 +type: Basic +title: 升级到 17.0 版本 +hot: true +--- + +> 本指南适用于当前版本 ng-alain >= `16` ; +> 如果在升级过程中遇到问题，欢迎提出。提问前请阅读 [如何向开源社区提问题](https://github.com/seajs/seajs/issues/545) +> 如果发现本指南存在遗漏/错误，请指出! +> 或者你遇到了新的问题并解决了，欢迎补充! + +## 开始之前 + +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](https://github.com/ng-alain/ng-alain/pull/2394/files)。 + +## 可选部分 + +可选部分的主要工作都是围绕 Standalone 展开，目前 NG-ALAIN 会保留部分DEMO页使用 NgModule 写法。[#2442](https://github.com/ng-alain/ng-alain/pull/2442/files) 包含着这部分变动的所有内容。 + +### 升级为 Standalone + +- 使用 `bootstrapApplication` 替代 `platformBrowserDynamic` +- 使用 `app.config.ts` 替代 `global-config.module.ts`, `app.module.ts` + +其中 `layout`, `dashboard`, `passport` 目录采用 standalone 写法，可根据 [#2442](https://github.com/ng-alain/ng-alain/pull/2442/files) 变动自行修改。 + +### 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](https://github.com/ng-alain/ng-alain/pull/2442/files) + +### 关于 `@delon/form` + +- 将小部件频率较低的全部转化为可选导入，本次升级时会自动导入所有小部件来保证兼容