配置 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. 使用阿里云 SpringBoot 仓库初始化项目

    本文基于:https://www.bilibili.com/video/BV15b4y1a7yG?p=5&vd_source=cf8900ba33d057d422c588abe5d5290d ...

  2. 权限控制 vue3

  3. k8s的pod的理解

    pod共享相同的IP地址和端口空间. 这意味着在同一 pod中的容器运行的 多个进程需要注意不能绑定到相同的端口号, 否则会导致端口冲突, 但这只涉及同一pod中的容器. 由于每个pod都有独立的端口 ...

  4. 盘点.NET支持的 处理器架构

    在一个会议上,中国招投标协会的技术负责人居然当着很多领导的面说.NET不能在国产服务器上运行,可以说这个技术负责人非蠢即坏.国产服务器的处理器架构主要包括x86.ARM.LoongArch.risc- ...

  5. cxv文件合并

    1.新建bat脚本 @echo off setlocal enabledelayedexpansion copy *.csv new.csv echo @@@@@@@@@@@@@合并成功!@@@@@@ ...

  6. C++之OpenCV入门到提高001：使用 Visual Studio2022 配置 OpenCV 环境

    一.介绍 从今天开始,我们又要开始一个新的系列了,这个系列就是<C++之 Opencv 入门到提高>.这个系列是有关如何使用 C++ 语言,通过 Opencv 来实现图像处理.缺陷检测.视 ...

  7. 温习 SPI 机制 （Java SPI 、Spring SPI、Dubbo SPI）

    SPI 全称为 Service Provider Interface,是一种服务发现机制. SPI 的本质是将接口实现类的全限定名配置在文件中,并由服务加载器读取配置文件,加载实现类.这样可以在运行时 ...

  8. cmu15545-数据存储(Database Storage)

    蓝图 数据库自己管理磁盘数据和缓冲区,而不是通过操作系统管理(Os is not your friend.). 三层视图 数据库以页(page)为存储数据的基本单位,文件(file)是一系列页的集合, ...

  9. Python爬虫之数据解析

    1.Request库 HTTP测试工具:http://httpbin.org,以下的示例会以此为URL 属于第三方库,需要手动安装 pip install requests 基本用法 import r ...

  10. python之执行shell命令

    python 执行shell命令,且执行完后将shell端的输出返回 subprocess import subprocess # 要执行的命令 command = "ls -lrt&quo ...