配置 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 开头的命令。

参考资料

ng-alain: 配置开发环境的更多相关文章

  1. angular 配置开发环境、测试环境、生产环境

    1. 配置开发环境.测试环境.生产环境 (1). environment.ts - 开发环境: 用于程序开发 (创建项目时自动生成) export const environment = { prod ...

  2. node.js + webstorm ：配置开发环境

    一.配置开发环境: 1.先安装node (1).访问http://nodejs.org打开安装包,正常安装,点击next即可. 为了测试是否安装成功,打开命令提示符,输入node,则进入node.js ...

  3. Spark集群 + Akka + Kafka + Scala 开发(1) : 配置开发环境

    目标 配置一个spark standalone集群 + akka + kafka + scala的开发环境. 创建一个基于spark的scala工程,并在spark standalone的集群环境中运 ...

  4. 重装Ubuntu系统并配置开发环境

    安装 Ubuntu 并配置开发环境 写一篇文章详细记录下来所有的过程,以便以后参考. 安装前的准备 备份所有代码和配置文件 备份下载的各类文件 Ubuntu 安装 下载安装 Ubuntu14.04,下 ...

  5. 用C++语言开发Android程序 配置开发环境

    转自:http://www.cnblogs.com/yaotong/p/3622430.html 用C++语言开发Android程序 配置开发环境   如果你是一个C++语言的死忠,你喜欢C++语言到 ...

  6. SharePoint 2013 配置开发环境，需安装VS2012插件

    原文:SharePoint 2013 配置开发环境,需安装VS2012插件 SharePoint 2013已经安装好了,接下来就是配置开发环境,安装VS2012,但是,装好了以后,发现没有ShareP ...

  7. 【Java】0X001.配置开发环境，JDK、classpath等

    [Java]0x01 配置开发环境,JDK.CLASSPATH等 一. 下载JDK安装文件 首先,进入Oracle官网Java页面. 注意,要下载的是JDK而不是JRE,这点很重要,因为JRE并不包含 ...

  8. SharePoint 2013配置开发环境，需安装VS2012插件

    SharePoint 2013已经安装好了,接下来就是配置开发环境,安装VS2012,但是,装好了以后,发现没有SharePoint 2013开发的支持,如下图: 然后,去网上查找资料,VS2012对 ...

  9. QT + OpenCV + MinGW 在windows下配置开发环境

           由于研究项目需要,最近开始接触C++界面设计,关于“QT + OpenCV + MinGW在windows下配置开发环境”着实让人头疼,单次配置时间相当长,也十分不容易,本人第一次配置成 ...

  10. Delphi XE-Windows下配置开发环境 (Android版/IOS)

    Delphi XE-Windows下配置开发环境  (Android版/IOS)   http://www.52jike.com/thread-1-1-1.html Delphi XE5的Androi ...

随机推荐

  1. IDEA更改远程git仓库地址

    前言 我们在使用IDEA开发时,一般会配置好对应的git仓库,这样就比较容易对代码进行控制以及协同开发.   但有时候,我们远程的仓库地址由于这样那样的原因,需要迁移(这在爱折腾的企业是常有的事情). ...

  2. 14. 迭代器、生成器、模块与包、json模块

    1.迭代器 1.1 迭代器介绍 迭代器是用来迭代取值的工具 每一次迭代得到的结果会作为下一次迭代的初始值,单纯的重复并不是迭代 # while循环实现迭代取值 a = [1, 2, 3, 4, 5, ...

  3. Camera 冷启动阶段分解

    目录 一.Camx trace 调试开关设置 1.设置 camxoverridesettings trace开关 2. 重启后设置开启camx trace 开关 二.Camera 冷启动阶段分解分析 ...

  4. Vue3 的watch 监视属性

    1. 监听单个 watch(变量,(新值,老值)=>{}) 2. 监听多个 watch([变量1,变量2],(新值,老值)=>{}) 3. 监听对象 watch(()=>对象,(新值 ...

  5. 002 Typora 的使用（markdown 的使用）

    博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https:// ...

  6. 云原生周刊：在 Kubernetes 集群中使用通配符证书 ｜ 2024.2.19

    开源项目推荐 kube-fledged kube-fledged 是一个 Kubernetes Operator,用于直接在 Kubernetes 集群的工作节点上创建和管理容器映像的缓存.它允许用户 ...

  7. KubeSphere DevOps 系统功能实战

    James,Java 工程师,喜欢学习和记录当下热门技术并验证其优势和缺点,以及当下火热的云原生解决方案的实施与推广. 前言 基于 Jenkins 的 KubeSphere DevOps 系统是专为 ...

  8. appium-解决uiautomatorviewer不能定位android7以上版本元素的方法

    上图是android10模拟器,发现我们是无法连接模拟器识别的 解决方法: 在模拟器内打开指定页面然后截图,最后保存为uix文件,然后用adb拉到本地,一共四个命令,可以保存为.bat文件快捷执行(这 ...

  9. python+ffmpeg视频转码转格式

    本文转发来自:https://blog.csdn.net/KH_FC/article/details/115771126 废话 python目前自己也是在学习当中,对python也不是特别精通,写视频 ...

  10. MYSQL 批量删除以特定前缀开头的表

    前言 这是工作中确实会用到,比如分库分表后有t_order_01.t_order_02.t_order_03...t_order_08 这样的表. 测试过程中造了大量数据进行测试,其中可能含有部分脏数 ...