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