配置 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. SuperMap iServer8C证书过期如何解决

    说明:该问题是SuperMap iServer8.0.2和8.1.0版本云许可模块问题,需要手动更新云许可HTTPS证书,可以升级到官网8.1.1/9D/10i等方式进行解决 针对无法升级或者老项目维 ...

  2. word在原有的方框里打勾

    按住键盘上的ALT键不放,然后在小键盘区输入"9745"这几个数字,最后松开 ALT 键,自动变成框框中带勾符号.

  3. STL标准模板库

    STL(Standard Template Library)标准模板库 是C++标准库中的一个重要组成部分,它提供了一组通用的模板类和函数,用于数据结构和算法的实现.STL的核心部分包括容器.算法和迭 ...

  4. SXYZ-6.26模拟赛

    没有爆零,足矣. 发现绍兴一中机房的一个特点:键盘打得贼响!! T1 ctrl 啃臭键在哪里 (中文名我都不好意思大打) 第一遍测T1一分都没得啊! 这跟题目描述自相矛盾有关,导致我只是轻微考虑了一下 ...

  5. 《Vue.js 设计与实现》读书笔记 - 第14章、内建组件和模块

    第14章.内建组件和模块 14.1 KeepAlive 组件的实现原理 KeepAlive 一词借鉴了 HTTP 协议. KeepAlive 组件可以避免组件被频繁的销毁/重建.本质是缓存管理,再加上 ...

  6. duxui：基于Taro，兼容React Native、小程序、H5的多端UI库

    duxui是duxapp官方开发的一款兼容多端的UI组件库,兼容小程序.H5.React Native,库中提供了60+的组件,覆盖大部分使用场景 它能帮助你通过统一的组件样式,快速完成多端应用的开发 ...

  7. python：将文件从一个目录移动到另一个目录。附：nnUnet使用

    在使用nn-Unet做BraTS2019数据集预测时,预测文件分别生成了三类文件:.pkl  .npz  .nii.gz,我们需要的是.nii.gz文件.所以需要进行文件移动. # coding:ut ...

  8. vue前端开发仿钉图系列（7）底部数据列表的开发详解

    底部数据列表主要是记录图层下面对应的点线面数据,点击单元行或者查看或者编辑,弹出右侧编辑页面,点击单元行地图定位到相应的绘图位置.里面的难点1是动态绑定字段管理编辑的字段以及对应的value值,2是点 ...

  9. YoloDotNet v2.1：实时物体检测的利器

    项目介绍 YoloDotNet v2.1 是一个基于 C# 和 .NET 8 的实时物体检测框架,专为图像和视频中的物体检测而设计.它集成了 Yolov8 ~ Yolov11 模型,通过 ML.NET ...

  10. 谈一谈你对vue指令的理解

    vue指令的本质是给 html 标签新增一些属性 : vue的指令可以分为 3 中类型 : 1. 用于渲染数据的指令,比如 v-for ,v-if ,v-show : 2. 用来交互的指令 ,v-on ...