ng-alain: 配置开发环境
配置 ng-alain 开发环境
安装 1. Yarn
官方文档实际上是基于 Yarn 1 的，请从 Yarn 1 开始。在创建项目之后，可以升级到 Yarn 3.
注意：直接通过 npm 安装 yarn 版本是 1.x，去 yarn 官网下载安装程序进行安装。直接安装的版本是 3.x.
yarn 的升级相对于 pnpm 是更具破坏性的改变，比起 pnpm 使用链接的方式曲线救国，虽然符合原来的 node_modules 的模式，同时支持更多新特性；yarn 直接把 node_modules 干掉了，改成能让你 push 上去的压缩包形式，非常有意思。不过对于 yarn v3 的应用我认为多数团队可能会保持观望态度，毕竟如此破坏性的改革对于 npm 上千变万化的包带来的风险是未知的，让我们继续看下去 yarn 的成长。
实际上，有人已经回归了 npm，见附录中 译:将项目迁移到 Yarn 然后又迁回 npm
通过 npm 安装 yarn，当前版本是 1.22.19
> npm install -g yarn
> yarn --version
1.22.19
查询 yarn 镜像仓库配置
> yarn config get registry
> https://registry.npmjs.org/
配置仓库
> yarn config set registry https://registry.npm.taobao.org -g
> yarn config get registry
https://registry.npm.taobao.org
> yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
2. 安装 Angular CLI
在 yarn 1.x 下支持 yarn global add，现在 yarn 从 2.x 已经不支持了。
> yarn global add @angular/cli
yarn global v1.22.19
[1/4] Resolving packages...
warning @angular/cli > pacote > @npmcli/run-script > node-gyp > make-fetch-happen > cacache > @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "@angular/cli@15.1.1" with binaries:
- ng
Done in 13.18s.
3. 创建 Angular 项目
% ng new my-project --style less --routing --package-manager yarn
✔ Packages installed successfully.
Successfully initialized git.
Nothing to be done.
% cd my-project
my-project %
4. 增加 ng-alain 包
使用来自 Angular 的 ng 命令将外部的包添加到当前项目中，注意需要将当前目录切换到项目目录中。
% ng add ng-alain
ℹ Using package manager: yarn
✔ Found compatible package version: ng-alain@15.0.0.
✔ Package information loaded.
The package ng-alain@15.0.0 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
? Which default language would you like to use? 简体中文 (zh)
? Would you like to add code style plugin? (default: Y) Yes
? Would you like to add dynamic form (sf component) plugin? (default: Y) Yes
? Would you like to add mock plugin? (default: Y) Yes
? Would you like to add i18n plugin? (default: N) No
Generating NG-ALAIN scaffold...
Translating template into zh language, please wait...
✓ Congratulations, NG-ALAIN scaffold generation complete 🎉.
NG-ALAIN documentation site: https://ng-alain.com
DELETE src/app/app.component.spec.ts
DELETE src/app/app.component.html
DELETE src/app/app.component.less
DELETE src/app/app-routing.module.ts
CREATE src/style-icons-auto.ts (1934 bytes)
CREATE src/style-icons.ts (253 bytes)
CREATE src/typings.d.ts (144 bytes)
CREATE src/app/global-config.module.ts (2382 bytes)
CREATE src/app/core/README.md (137 bytes)
CREATE src/app/core/core.module.ts (313 bytes)
CREATE src/app/core/index.ts (162 bytes)
CREATE src/app/core/module-import-guard.ts (269 bytes)
CREATE src/app/core/start-page.guard.ts (720 bytes)
CREATE src/app/core/net/default.interceptor.ts (9410 bytes)
CREATE src/app/core/startup/startup.service.ts (3832 bytes)
CREATE src/app/layout/layout.module.ts (2323 bytes)
CREATE src/app/layout/basic/README.md (54 bytes)
CREATE src/app/layout/basic/basic.component.ts (3384 bytes)
CREATE src/app/layout/basic/widgets/clear-storage.component.ts (801 bytes)
CREATE src/app/layout/basic/widgets/fullscreen.component.ts (676 bytes)
CREATE src/app/layout/basic/widgets/search.component.ts (2785 bytes)
CREATE src/app/layout/basic/widgets/user.component.ts (1717 bytes)
CREATE src/app/layout/blank/README.md (45 bytes)
CREATE src/app/layout/blank/blank.component.ts (221 bytes)
CREATE src/app/layout/passport/passport.component.html (570 bytes)
CREATE src/app/layout/passport/passport.component.less (1835 bytes)
CREATE src/app/layout/passport/passport.component.ts (623 bytes)
CREATE src/app/routes/routes-routing.module.ts (2740 bytes)
CREATE src/app/routes/routes.module.ts (1003 bytes)
CREATE src/app/routes/dashboard/dashboard.component.html (28 bytes)
CREATE src/app/routes/dashboard/dashboard.component.ts (244 bytes)
CREATE src/app/routes/exception/exception-routing.module.ts (651 bytes)
CREATE src/app/routes/exception/exception.component.ts (528 bytes)
CREATE src/app/routes/exception/exception.module.ts (686 bytes)
CREATE src/app/routes/exception/trigger.component.ts (1085 bytes)
CREATE src/app/routes/passport/callback.component.ts (895 bytes)
CREATE src/app/routes/passport/lock/lock.component.html (830 bytes)
CREATE src/app/routes/passport/lock/lock.component.less (185 bytes)
CREATE src/app/routes/passport/lock/lock.component.ts (1075 bytes)
CREATE src/app/routes/passport/login/login.component.html (3348 bytes)
CREATE src/app/routes/passport/login/login.component.less (981 bytes)
CREATE src/app/routes/passport/login/login.component.ts (5860 bytes)
CREATE src/app/routes/passport/register/register.component.html (4352 bytes)
CREATE src/app/routes/passport/register/register.component.less (678 bytes)
CREATE src/app/routes/passport/register/register.component.ts (3673 bytes)
CREATE src/app/routes/passport/register-result/register-result.component.html (539 bytes)
CREATE src/app/routes/passport/register-result/register-result.component.ts (516 bytes)
CREATE src/app/shared/index.ts (148 bytes)
CREATE src/app/shared/shared-delon.module.ts (336 bytes)
CREATE src/app/shared/shared-zorro.module.ts (1579 bytes)
CREATE src/app/shared/shared.module.ts (1410 bytes)
CREATE src/app/shared/json-schema/README.md (326 bytes)
CREATE src/app/shared/json-schema/json-schema.module.ts (550 bytes)
CREATE src/app/shared/json-schema/test/test.widget.ts (583 bytes)
CREATE src/app/shared/st-widget/README.md (68 bytes)
CREATE src/app/shared/st-widget/st-widget.module.ts (455 bytes)
CREATE src/app/shared/utils/yuan.ts (313 bytes)
CREATE src/assets/color.less (105728 bytes)
CREATE src/assets/logo-color.svg (2037 bytes)
CREATE src/assets/logo-full.svg (4374 bytes)
CREATE src/assets/logo.svg (2037 bytes)
CREATE src/assets/style.compact.css (620681 bytes)
CREATE src/assets/style.dark.css (632558 bytes)
CREATE src/assets/zorro.svg (2232 bytes)
CREATE src/assets/tmp/app-data.json (9355 bytes)
CREATE src/assets/tmp/img/avatar.jpg (43173 bytes)
CREATE src/environments/environment.prod.ts (229 bytes)
CREATE src/environments/environment.ts (959 bytes)
CREATE src/styles/index.less (80 bytes)
CREATE src/styles/theme.less (403 bytes)
CREATE .eslintignore (358 bytes)
CREATE .eslintrc.js (3992 bytes)
CREATE .nvmrc (8 bytes)
CREATE .prettierignore (198 bytes)
CREATE .prettierrc.js (264 bytes)
CREATE .stylelintrc (795 bytes)
CREATE LICENSE (1086 bytes)
CREATE README-zh_CN.md (4552 bytes)
CREATE ng-alain.json (177 bytes)
CREATE proxy.conf.js (631 bytes)
CREATE .husky/pre-commit (169 bytes)
CREATE .vscode/settings.json (877 bytes)
CREATE _mock/README.md (38 bytes)
CREATE _mock/_user.ts (3171 bytes)
CREATE _mock/index.ts (25 bytes)
UPDATE package.json (3310 bytes)
UPDATE angular.json (4451 bytes)
UPDATE tsconfig.json (1056 bytes)
UPDATE src/favicon.ico (15678 bytes)
UPDATE src/main.ts (754 bytes)
UPDATE src/styles.less (248 bytes)
UPDATE src/app/app.component.ts (1617 bytes)
UPDATE src/app/app.module.ts (3244 bytes)
UPDATE README.md (4585 bytes)
UPDATE .vscode/extensions.json (67 bytes)
UPDATE .vscode/launch.json (459 bytes)
UPDATE src/index.html (1673 bytes)
✔ Packages installed successfully.
✔ Packages installed successfully.
(base) whao@bjmacbook11 my-project %
5. 启动项目，进行开发调试。
% yarn start
yarn run v1.22.19
warning package.json: "dependencies" has dependency "ng-alain" with range "15.0.0" that collides with a dependency in "devDependencies" of the same name with version "^15.0.0"
$ ng s -o
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 8.99 MB |
styles.css, styles.js | styles | 1.03 MB |
polyfills.js | polyfills | 314.32 kB |
main.js | main | 210.75 kB |
runtime.js | runtime | 12.62 kB |
| Initial Total | 10.55 MB
Lazy Chunk Files | Names | Raw Size
src_app_routes_exception_exception_module_ts.js | exception-exception-module | 25.94 kB |
Build at: 2023-01-14T22:51:34.135Z - Hash: 501f2d546e593d05 - Time: 62883ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.
6. 构建项目
构建项目，准备发布，构建结果在项目的 ./dist/{项目名称} 目录下
% yarn build
yarn run v1.22.19
warning package.json: "dependencies" has dependency "ng-alain" with range "15.0.0" that collides with a dependency in "devDependencies" of the same name with version "^15.0.0"
$ npm run ng-high-memory build
> my-project@0.0.0 ng-high-memory
> node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build
✔ Browser application bundle generation complete.
✔ Copying assets complete.
⠋ Generating index html...4 rules skipped due to selector errors:
span.ant-radio+* -> Cannot read properties of undefined (reading 'type')
.ant-segmented-item-icon+* -> Cannot read properties of undefined (reading 'type')
.ant-table-rep .ant-table-tbody>tr>td .ant-table-rep__title+*:not(.ant-avatar) -> Cannot read properties of undefined (reading 'type')
.full-content__body .alain-default__content router-outlet+* -> Cannot read properties of undefined (reading 'type')
✔ Index html generation complete.
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
main.2047075fe14f79cb.js | main | 1.75 MB | 371.05 kB
styles.e1657026ca37db30.css | styles | 618.96 kB | 59.92 kB
polyfills.b5309eb668d4fe30.js | polyfills | 33.07 kB | 10.64 kB
runtime.32989da3fefd0ecb.js | runtime | 2.65 kB | 1.24 kB
| Initial Total | 2.39 MB | 442.85 kB
Lazy Chunk Files | Names | Raw Size | Estimated Transfer Size
111.3d877f08546a9d83.js | exception-exception-module | 5.22 kB | 2.02 kB
Build at: 2023-01-14T22:54:53.150Z - Hash: 1c4fbb8e97519bf0 - Time: 51286ms
Warning: bundle initial exceeded maximum budget. Budget 2.00 MB was not met by 398.07 kB with a total of 2.39 MB.
✨ Done in 59.44s.
%
迁移到 Yarn 3
启用 npm 中的 corepack 支持，然后安装 Yarn 3。
见：https://yarnpkg.com/getting-started/install
> corepack enable
PS > corepack prepare yarn@stable --activate
Preparing yarn@stable for immediate activation...
PS >
yarn 3 的源在配置文件 .yarnrc.yml 配置文件中。
如果原来已经是 yarn 1, 直接执行了 yarn 命令，它会帮助创建 .yarnrc.yml 配置文件。创建出来的配置文件如下：
nodeLinker: node-modules
增加自定义的源之后
nodeLinker: node-modules
# 自定义 registy
npmRegistryServer: 'https://registry.npm.taobao.org'
迁移到 yarn 3 如下所示，
> corepack enable
> corepack prepare yarn@stable --activate
Preparing yarn@stable for immediate activation...
> yarn
➤ YN0070: Migrating from Yarn 1; automatically enabling the compatibility node-modules linker 👍
➤ YN0000: ┌ Resolution step
➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ nice-napi@npm:1.0.2: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ node-addon-api@npm:3.2.1: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ canvas@npm:2.11.0: Implicit dependencies on node-gyp are discouraged
➤ YN0061: │ sourcemap-codec@npm:1.4.8 is deprecated: Please use @jridgewell/sourcemap-codec instead
➤ YN0061: │ source-map-resolve@npm:0.5.3 is deprecated: See https://github.com/lydell/source-map-resolve#deprecated
➤ YN0032: │ nan@npm:2.17.0: Implicit dependencies on node-gyp are discouraged
➤ YN0061: │ resolve-url@npm:0.2.1 is deprecated: https://github.com/lydell/resolve-url#deprecated
➤ YN0061: │ urix@npm:0.1.0 is deprecated: Please see https://github.com/lydell/urix#deprecated
➤ YN0061: │ source-map-url@npm:0.4.1 is deprecated: See https://github.com/lydell/source-map-url#deprecated
➤ YN0061: │ @npmcli/move-file@npm:2.0.1 is deprecated: This functionality has been moved to @npmcli/fs
➤ YN0061: │ @types/vfile-message@npm:2.0.0 is deprecated: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.
➤ YN0002: │ @angular-eslint/schematics@npm:15.1.0 [d9f8f] doesn't provide eslint (p4a38a), requested by @angular-eslint/eslint-plugin
➤ YN0002: │ @angular-eslint/schematics@npm:15.1.0 [d9f8f] doesn't provide eslint (p1452a), requested by @angular-eslint/eslint-plugin-template
➤ YN0002: │ @angular-eslint/schematics@npm:15.1.0 [d9f8f] doesn't provide typescript (p29343), requested by @angular-eslint/eslint-plugin
➤ YN0002: │ @angular-eslint/schematics@npm:15.1.0 [d9f8f] doesn't provide typescript (p648b4), requested by @angular-eslint/eslint-plugin-template
➤ YN0002: │ @delon/theme@npm:15.0.0 doesn't provide @angular/animations (pc517c), requested by ng-zorro-antd
➤ YN0002: │ @delon/theme@npm:15.0.0 doesn't provide @angular/common (p04de0), requested by ng-zorro-antd
➤ YN0002: │ @delon/theme@npm:15.0.0 doesn't provide @angular/core (pe1390), requested by ng-zorro-antd
➤ YN0002: │ @delon/theme@npm:15.0.0 doesn't provide @angular/forms (pefdcd), requested by ng-zorro-antd
➤ YN0002: │ @delon/theme@npm:15.0.0 doesn't provide @angular/platform-browser (pa70ad), requested by ng-zorro-antd
➤ YN0002: │ @delon/theme@npm:15.0.0 doesn't provide @angular/router (p2af21), requested by ng-zorro-antd
➤ YN0002: │ my-project@workspace:. doesn't provide jsonc-parser (p11976), requested by ng-alain-plugin-theme
➤ YN0002: │ my-project@workspace:. doesn't provide less (p789be), requested by ng-alain-plugin-theme
➤ YN0002: │ ng-alain@npm:15.0.0 doesn't provide jsonc-parser (p3f4dd), requested by ng-alain-plugin-theme
➤ YN0002: │ ng-alain@npm:15.0.0 doesn't provide less (p9c36e), requested by ng-alain-plugin-theme
➤ YN0002: │ ng-zorro-antd@npm:15.0.1 [51e48] doesn't provide rxjs (p9f831), requested by @angular/cdk
➤ YN0002: │ ng-zorro-antd@npm:15.0.1 [51e48] doesn't provide rxjs (pf5a5b), requested by @ant-design/icons-angular
➤ YN0002: │ ng-zorro-antd@npm:15.0.1 [d9f8f] doesn't provide rxjs (pe1e5b), requested by @angular/cdk
➤ YN0002: │ ng-zorro-antd@npm:15.0.1 [d9f8f] doesn't provide rxjs (pc3209), requested by @ant-design/icons-angular
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 1m 50s
➤ YN0000: ┌ Fetch step
➤ YN0013: │ yargs@npm:16.2.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs@npm:17.6.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yocto-queue@npm:0.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ zone.js@npm:0.12.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ zrender@npm:5.4.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 4s 551ms
➤ YN0000: ┌ Link step
➤ YN0007: │ esbuild@npm:0.16.17 must be built because it never has been before or the last one failed
➤ YN0007: │ canvas@npm:2.11.0 must be built because it never has been before or the last one failed
➤ YN0007: │ core-js@npm:3.27.1 must be built because it never has been before or the last one failed
➤ YN0009: │ canvas@npm:2.11.0 couldn't be built successfully (exit code 1, logs can be found here: C:\Users\Guanjun\AppData\Local\Temp\xfs-624085c8\build.log)
➤ YN0000: └ Completed in 1m 23s
➤ YN0000: Done with warnings in 3m 17s
>
Yarn 报错处理
错误：Cannot find module 'C:\Users\whao\AppData\Local\node\corepack\yarn\3.3.1\yarn.js'
删除 C:\Program Files\nodejs 路径下面的 yarn 开头的命令。
