配置 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. Vite2 如何设置打包后文件名

    vite.config.js build: { rollupOptions: { output: { entryFileNames: `assets/[name].${timestamp}.js`, ...

  2. Android usb广播 ACTION_USB_DEVICE_ATTACHED流程源码分析

    整体流程图 大概意思就是UsbHostManager启动监控线程,monitorUsbHostBus会调用usb_host_run函数(使用inotify来监听USB设备的插拔)不停的读取bus总线, ...

  3. window使用VNC远程ubuntu16.04

    首先保证在同一局域网下 一.设置Ubuntu 16.04 允许进行远程控制 首先在ubuntu下找到下图图标 将[允许其他人查看您的桌面]这一项勾上,然后在安全那项,勾选[要求远程用户输入此密码],并 ...

  4. 小程序的button组件

    button组件 按钮组件 功能比html的button按钮丰富 可以通过open-type属性可以调用微信提供的各种功能(客服,转发,获取用户权限,获取用户信息等): 按钮的属性 size 按钮的大 ...

  5. 将数组数据转化成树形结构 tranListToTreeData

    export function tranListToTreeData(list, rootValue) { // list是最完整的数组 let arr = []; // 记录儿子 list.forE ...

  6. 浅析Jvm

    浅析Jvm 基本概念 引言 Java 虚拟机(JVM,Java Virtual Machine)是 Java 生态系统的核心组成部分,它为 Java 应用程序提供了一个运行环境.JVM 的主要职责是将 ...

  7. 云原生爱好者周刊：OCI 镜像管理新工具 — regclient

    云原生一周动态要闻: OpenKruise v1.0 发布 SlashData 最新报告:560 万开发者使用 Kubernetes,一年增长 67% WasmEdge 0.9.0 发布 Securi ...

  8. tmux从入门到装x

    原文: https://blog.csdn.net/CSSDCC/article/details/121231906 安装方法: # Ubuntu 或 Debian $ sudo apt-get in ...

  9. 认识JVM

    类加载器 运行时数据区 执行引擎 执行引擎的任务就是将字节码指令解释/编译为对应平台上的本地机器指令 JVM架构图

  10. KNN算法：近朱者赤，近墨者黑

    文章目录 1.一个例子 2.算法原理 3.算法的优缺点 3.关于 K 的选取 4.代码实现 今天我要讲的这个算法是最近邻算法(K-NearestNeighbor),简称 KNN 算法. 1.一个例子 ...