ng-alain新版尝试

r囧r小猫 2022-11-11 10:51 150阅读 0赞

这篇文章介绍一下在MacOS从0开始搭建前端框架ng-alain（封装ng-zorro（封装angular））。

# 环境 #

liumiao@liumiaodeMacBook-Pro alain-project % sw_vers
    ProductName:	macOS
    ProductVersion:	11.1
    BuildVersion:	20C69
    liumiao@liumiaodeMacBook-Pro alain-project %

# 步骤1: 安装nvm #

liumiao@liumiaodeMacBook-Pro ~ % wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
    => Downloading nvm from git to '/Users/liumiao/.nvm'
    => Cloning into '/Users/liumiao/.nvm'...
    remote: Enumerating objects: 333, done.
    remote: Counting objects: 100% (333/333), done.
    remote: Compressing objects: 100% (283/283), done.
    remote: Total 333 (delta 38), reused 150 (delta 25), pack-reused 0
    Receiving objects: 100% (333/333), 177.15 KiB | 1.33 MiB/s, done.
    Resolving deltas: 100% (38/38), done.
    => Compressing and cleaning up git repository
    
    => Profile not found. Tried ~/.bashrc, ~/.bash_profile, ~/.zshrc, and ~/.profile.
    => Create one of them and run this script again
       OR
    => Append the following lines to the correct file yourself:
    
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    
    => Close and reopen your terminal to start using nvm or run the following to use it now:
    
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    liumiao@liumiaodeMacBook-Pro ~ %

设定nvm

liumiao@liumiaodeMacBook-Pro ~ % vi .zprofile 
    liumiao@liumiaodeMacBook-Pro ~ % tail -n3 .zprofile 
    
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    liumiao@liumiaodeMacBook-Pro ~ % 
    liumiao@liumiaodeMacBook-Pro ~ % source $HOME/.zprofile

# 步骤2: 安装node #

确认node的lts版本：nvm ls-remote --lts  
安装node：

liumiao@liumiaodeMacBook-Pro ~ % nvm install 14.16.0
    Downloading and installing node v14.16.0...
    Downloading https://nodejs.org/dist/v14.16.0/node-v14.16.0-darwin-x64.tar.xz...
    ##################################################################################################################################################################################################################################################### 100.0%
    Computing checksum with shasum -a 256
    Checksums matched!
    Now using node v14.16.0 (npm v6.14.11)
    Creating default alias: default -> 14.16.0 (-> v14.16.0)
    liumiao@liumiaodeMacBook-Pro ~ % 
    liumiao@liumiaodeMacBook-Pro ~ % nvm ls
    ->     v14.16.0
    default -> 14.16.0 (-> v14.16.0)
    iojs -> N/A (default)
    unstable -> N/A (default)
    node -> stable (-> v14.16.0) (default)
    stable -> 14.16 (-> v14.16.0) (default)
    lts/* -> lts/fermium (-> v14.16.0)
    lts/argon -> v4.9.1 (-> N/A)
    lts/boron -> v6.17.1 (-> N/A)
    lts/carbon -> v8.17.0 (-> N/A)
    lts/dubnium -> v10.24.0 (-> N/A)
    lts/erbium -> v12.21.0 (-> N/A)
    lts/fermium -> v14.16.0
    liumiao@liumiaodeMacBook-Pro ~ %

结果确认

liumiao@liumiaodeMacBook-Pro ~ % node -v
    v14.16.0
    liumiao@liumiaodeMacBook-Pro ~ % 
    liumiao@liumiaodeMacBook-Pro ~ % npm -v
    6.14.11
    liumiao@liumiaodeMacBook-Pro ~ %

# 步骤4: 设定淘宝源 #

npm config set registry https://registry.npm.taobao.org  
npm config set sass\_binary\_site http://cdn.npm.taobao.org/dist/node-sass

liumiao@liumiaodeMacBook-Pro ~ % npm config set registry https://registry.npm.taobao.org
    liumiao@liumiaodeMacBook-Pro ~ % npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass
    liumiao@liumiaodeMacBook-Pro ~ %

# 步骤3: 安装angular-cli #

liumiao@liumiaodeMacBook-Pro ~ % npm install -g @angular/cli
    npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
    npm WARN deprecated har-validator@5.1.5: this library is no longer supported
    /Users/liumiao/.nvm/versions/node/v14.16.0/bin/ng -> /Users/liumiao/.nvm/versions/node/v14.16.0/lib/node_modules/@angular/cli/bin/ng
    
    > @angular/cli@11.2.5 postinstall /Users/liumiao/.nvm/versions/node/v14.16.0/lib/node_modules/@angular/cli
    > node ./bin/postinstall/script.js
    
    ? Would you like to share anonymous usage data with the Angular Team at Google under
    Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
    how to change this setting, see https://angular.io/analytics. No
    + @angular/cli@11.2.5
    added 238 packages from 181 contributors in 67.507s
    liumiao@liumiaodeMacBook-Pro ~ %

当前缺省已经到11了，12也已经呼之欲出了

# 步骤5: 创建Angular项目 #

liumiao@liumiaodeMacBook-Pro ~ % ng new alain-project --style less --routing
    ? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
      This setting helps improve maintainability and catch bugs ahead of time.
      For more information, see https://angular.io/strict Yes
    CREATE alain-project/README.md (1021 bytes)
    CREATE alain-project/.editorconfig (274 bytes)
    CREATE alain-project/.gitignore (631 bytes)
    CREATE alain-project/angular.json (3761 bytes)
    CREATE alain-project/package.json (1203 bytes)
    CREATE alain-project/tsconfig.json (783 bytes)
    CREATE alain-project/tslint.json (3185 bytes)
    CREATE alain-project/.browserslistrc (703 bytes)
    CREATE alain-project/karma.conf.js (1430 bytes)
    CREATE alain-project/tsconfig.app.json (287 bytes)
    CREATE alain-project/tsconfig.spec.json (333 bytes)
    CREATE alain-project/src/favicon.ico (948 bytes)
    CREATE alain-project/src/index.html (298 bytes)
    CREATE alain-project/src/main.ts (372 bytes)
    CREATE alain-project/src/polyfills.ts (2830 bytes)
    CREATE alain-project/src/styles.less (80 bytes)
    CREATE alain-project/src/test.ts (753 bytes)
    CREATE alain-project/src/assets/.gitkeep (0 bytes)
    CREATE alain-project/src/environments/environment.prod.ts (51 bytes)
    CREATE alain-project/src/environments/environment.ts (662 bytes)
    CREATE alain-project/src/app/app-routing.module.ts (245 bytes)
    CREATE alain-project/src/app/app.module.ts (393 bytes)
    CREATE alain-project/src/app/app.component.less (0 bytes)
    CREATE alain-project/src/app/app.component.html (24846 bytes)
    CREATE alain-project/src/app/app.component.spec.ts (1078 bytes)
    CREATE alain-project/src/app/app.component.ts (218 bytes)
    CREATE alain-project/e2e/protractor.conf.js (904 bytes)
    CREATE alain-project/e2e/tsconfig.json (274 bytes)
    CREATE alain-project/e2e/src/app.e2e-spec.ts (664 bytes)
    CREATE alain-project/e2e/src/app.po.ts (274 bytes)
    ✔ Packages installed successfully.
        Successfully initialized git.
    liumiao@liumiaodeMacBook-Pro ~ %

# 步骤6: 添加ng-alain框架至Angular项目中 #

liumiao@liumiaodeMacBook-Pro ~ % cd alain-project 
    liumiao@liumiaodeMacBook-Pro alain-project % ng add ng-alain
    ℹ Using package manager: npm
    ✔ Found compatible package version: ng-alain@11.8.1.
    ✔ Package information loaded.
    ✔ Package 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) Yes
    ✔ Congratulations, NG-ALAIN scaffold generation complete.
    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 (1936 bytes)
    CREATE src/style-icons.ts (264 bytes)
    CREATE src/typings.d.ts (144 bytes)
    CREATE src/app/global-config.module.ts (2351 bytes)
    CREATE src/app/core/README.md (137 bytes)
    CREATE src/app/core/core.module.ts (380 bytes)
    CREATE src/app/core/index.ts (162 bytes)
    CREATE src/app/core/module-import-guard.ts (269 bytes)
    CREATE src/app/core/i18n/i18n.service.spec.ts (2450 bytes)
    CREATE src/app/core/i18n/i18n.service.ts (3798 bytes)
    CREATE src/app/core/net/default.interceptor.ts (8851 bytes)
    CREATE src/app/core/startup/startup.service.ts (4673 bytes)
    CREATE src/app/layout/layout.module.ts (2458 bytes)
    CREATE src/app/layout/basic/README.md (47 bytes)
    CREATE src/app/layout/basic/basic.component.ts (3511 bytes)
    CREATE src/app/layout/basic/widgets/clear-storage.component.ts (888 bytes)
    CREATE src/app/layout/basic/widgets/fullscreen.component.ts (859 bytes)
    CREATE src/app/layout/basic/widgets/i18n.component.ts (2060 bytes)
    CREATE src/app/layout/basic/widgets/search.component.ts (2775 bytes)
    CREATE src/app/layout/basic/widgets/user.component.ts (1829 bytes)
    CREATE src/app/layout/blank/README.md (45 bytes)
    CREATE src/app/layout/blank/blank.component.ts (280 bytes)
    CREATE src/app/layout/passport/passport.component.html (635 bytes)
    CREATE src/app/layout/passport/passport.component.less (1822 bytes)
    CREATE src/app/layout/passport/passport.component.ts (628 bytes)
    CREATE src/app/routes/routes-routing.module.ts (2556 bytes)
    CREATE src/app/routes/routes.module.ts (998 bytes)
    CREATE src/app/routes/dashboard/dashboard.component.html (28 bytes)
    CREATE src/app/routes/dashboard/dashboard.component.ts (313 bytes)
    CREATE src/app/routes/exception/403.component.ts (219 bytes)
    CREATE src/app/routes/exception/404.component.ts (219 bytes)
    CREATE src/app/routes/exception/500.component.ts (219 bytes)
    CREATE src/app/routes/exception/exception-routing.module.ts (710 bytes)
    CREATE src/app/routes/exception/exception.module.ts (885 bytes)
    CREATE src/app/routes/exception/trigger.component.ts (1076 bytes)
    CREATE src/app/routes/passport/callback.component.ts (895 bytes)
    CREATE src/app/routes/passport/passport-routing.module.ts (1492 bytes)
    CREATE src/app/routes/passport/passport.module.ts (753 bytes)
    CREATE src/app/routes/passport/lock/lock.component.html (876 bytes)
    CREATE src/app/routes/passport/lock/lock.component.less (184 bytes)
    CREATE src/app/routes/passport/lock/lock.component.ts (1166 bytes)
    CREATE src/app/routes/passport/login/login.component.html (3801 bytes)
    CREATE src/app/routes/passport/login/login.component.less (976 bytes)
    CREATE src/app/routes/passport/login/login.component.ts (5750 bytes)
    CREATE src/app/routes/passport/register/register.component.html (4787 bytes)
    CREATE src/app/routes/passport/register/register.component.less (670 bytes)
    CREATE src/app/routes/passport/register/register.component.ts (3603 bytes)
    CREATE src/app/routes/passport/register-result/register-result.component.html (553 bytes)
    CREATE src/app/routes/passport/register-result/register-result.component.ts (514 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 (1469 bytes)
    CREATE src/app/shared/json-schema/json-schema.module.ts (769 bytes)
    CREATE src/app/shared/st-widget/st-widget.module.ts (455 bytes)
    CREATE src/app/shared/utils/yuan.ts (310 bytes)
    CREATE src/assets/color.less (308078 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 (576254 bytes)
    CREATE src/assets/style.dark.css (587907 bytes)
    CREATE src/assets/zorro.svg (2232 bytes)
    CREATE src/assets/tmp/app-data.json (9355 bytes)
    CREATE src/assets/tmp/i18n/el-GR.json (10233 bytes)
    CREATE src/assets/tmp/i18n/en-US.json (7101 bytes)
    CREATE src/assets/tmp/i18n/es-ES.json (7798 bytes)
    CREATE src/assets/tmp/i18n/fr-FR.json (7831 bytes)
    CREATE src/assets/tmp/i18n/hr-HR.json (7257 bytes)
    CREATE src/assets/tmp/i18n/ko-KR.json (7561 bytes)
    CREATE src/assets/tmp/i18n/pl-PL.json (7709 bytes)
    CREATE src/assets/tmp/i18n/sl-SI.json (7359 bytes)
    CREATE src/assets/tmp/i18n/tr-TR.json (7474 bytes)
    CREATE src/assets/tmp/i18n/zh-CN.json (7033 bytes)
    CREATE src/assets/tmp/i18n/zh-TW.json (7041 bytes)
    CREATE src/assets/tmp/img/avatar.jpg (43173 bytes)
    CREATE src/styles/index.less (80 bytes)
    CREATE src/styles/theme.less (404 bytes)
    CREATE .nvmrc (8 bytes)
    CREATE LICENSE (1086 bytes)
    CREATE README-zh_CN.md (4552 bytes)
    CREATE ng-alain.json (177 bytes)
    CREATE proxy.conf.json (4 bytes)
    CREATE _mock/README.md (38 bytes)
    CREATE _mock/_user.ts (3171 bytes)
    CREATE _mock/index.ts (25 bytes)
    CREATE .prettierignore (198 bytes)
    CREATE .prettierrc (113 bytes)
    CREATE .stylelintrc (695 bytes)
    CREATE .vscode/extensions.json (67 bytes)
    CREATE .vscode/launch.json (459 bytes)
    CREATE .vscode/settings.json (838 bytes)
    UPDATE package.json (3022 bytes)
    UPDATE angular.json (4988 bytes)
    UPDATE tsconfig.json (896 bytes)
    UPDATE src/favicon.ico (15678 bytes)
    UPDATE src/main.ts (759 bytes)
    UPDATE src/styles.less (253 bytes)
    UPDATE src/test.ts (678 bytes)
    UPDATE src/app/app.component.ts (1034 bytes)
    UPDATE src/app/app.module.ts (3922 bytes)
    UPDATE src/environments/environment.prod.ts (231 bytes)
    UPDATE src/environments/environment.ts (957 bytes)
    UPDATE README.md (4585 bytes)
    UPDATE tslint.json (3790 bytes)
    UPDATE src/index.html (1676 bytes)
    ⠇ Installing packages (npm)...
    ✔ Packages installed successfully.
    liumiao@liumiaodeMacBook-Pro alain-project %

# 步骤7: 结果确认 #

liumiao@liumiaodeMacBook-Pro alain-project % npm start
    
    > alain-project@0.0.0 start /Users/liumiao/alain-project
    > ng s -o
    
    Compiling @angular/core : es2015 as esm2015
    Compiling ng-zorro-antd/core/environments : es2015 as esm2015
    Compiling @angular/animations : es2015 as esm2015
    Compiling @angular/cdk/keycodes : es2015 as esm2015
    Compiling ng-zorro-antd/core/color : es2015 as esm2015
    Compiling ng-zorro-antd/core/animation : es2015 as esm2015
    Compiling @angular/cdk/collections : es2015 as esm2015
    Compiling ng-zorro-antd/core/types : es2015 as esm2015
    Compiling @angular/animations/browser : es2015 as esm2015
    Compiling @angular/common : es2015 as esm2015
    Compiling ng-zorro-antd/core/logger : es2015 as esm2015
    Compiling @angular/cdk/platform : es2015 as esm2015
    Compiling @angular/cdk/bidi : es2015 as esm2015
    Compiling ng-zorro-antd/core/util : es2015 as esm2015
    Compiling @angular/platform-browser : es2015 as esm2015
    Compiling @angular/common/http : es2015 as esm2015
    Compiling ng-zorro-antd/core/polyfill : es2015 as esm2015
    Compiling @angular/cdk/layout : es2015 as esm2015
    Compiling ng-zorro-antd/core/outlet : es2015 as esm2015
    Compiling @angular/cdk/portal : es2015 as esm2015
    Compiling ng-zorro-antd/core/services : es2015 as esm2015
    Compiling @angular/cdk/scrolling : es2015 as esm2015
    Compiling @ant-design/icons-angular : es2015 as esm2015
    Compiling @angular/platform-browser/animations : es2015 as esm2015
    Compiling @angular/forms : es2015 as esm2015
    Compiling ng-zorro-antd/core/no-animation : es2015 as esm2015
    Compiling ng-zorro-antd/core/config : es2015 as esm2015
    Compiling @ant-design/icons-angular/icons : es2015 as esm2015
    Compiling @angular/cdk/overlay : es2015 as esm2015
    Compiling @angular/cdk/observers : es2015 as esm2015
    Compiling ng-zorro-antd/core/time : es2015 as esm2015
    Compiling @angular/cdk/a11y : es2015 as esm2015
    Compiling ng-zorro-antd/core/overlay : es2015 as esm2015
    Compiling ng-zorro-antd/i18n : es2015 as esm2015
    Compiling ng-zorro-antd/core/transition-patch : es2015 as esm2015
    Compiling ng-zorro-antd/core/wave : es2015 as esm2015
    Compiling @angular/router : es2015 as esm2015
    Compiling ng-zorro-antd/icon : es2015 as esm2015
    Compiling ng-zorro-antd/core/resize-observers : es2015 as esm2015
    Compiling @delon/util/other : es2015 as esm2015
    Compiling ng-zorro-antd/empty : es2015 as esm2015
    Compiling ng-zorro-antd/checkbox : es2015 as esm2015
    Compiling ng-zorro-antd/button : es2015 as esm2015
    Compiling ng-zorro-antd/menu : es2015 as esm2015
    Compiling ng-zorro-antd/spin : es2015 as esm2015
    Compiling ng-zorro-antd/time-picker : es2015 as esm2015
    Compiling ng-zorro-antd/select : es2015 as esm2015
    Compiling ng-zorro-antd/pipes : es2015 as esm2015
    Compiling ng-zorro-antd/dropdown : es2015 as esm2015
    Compiling ng-zorro-antd/radio : es2015 as esm2015
    Compiling ng-zorro-antd/modal : es2015 as esm2015
    Compiling ng-zorro-antd/drawer : es2015 as esm2015
    Compiling ng-zorro-antd/date-picker : es2015 as esm2015
    Compiling ng-zorro-antd/pagination : es2015 as esm2015
    Compiling @delon/util/decorator : es2015 as esm2015
    Compiling ng-zorro-antd/tooltip : es2015 as esm2015
    Compiling @delon/util/browser : es2015 as esm2015
    Compiling ng-zorro-antd/core/tree : es2015 as esm2015
    Compiling ng-zorro-antd/input : es2015 as esm2015
    Compiling @delon/util/token : es2015 as esm2015
    Compiling ng-zorro-antd/table : es2015 as esm2015
    Compiling ng-zorro-antd/core/highlight : es2015 as esm2015
    Compiling ng-zorro-antd/grid : es2015 as esm2015
    Compiling ng-zorro-antd/tabs : es2015 as esm2015
    Compiling ng-zorro-antd/message : es2015 as esm2015
    Compiling @delon/util/date-time : es2015 as esm2015
    Compiling @delon/util/pipes/filter : es2015 as esm2015
    Compiling ng-zorro-antd/tag : es2015 as esm2015
    Compiling ng-zorro-antd/avatar : es2015 as esm2015
    Compiling @delon/util/math : es2015 as esm2015
    Compiling @delon/util/config : es2015 as esm2015
    Compiling ng-zorro-antd/input-number : es2015 as esm2015
    Compiling ng-zorro-antd/switch : es2015 as esm2015
    Compiling ng-zorro-antd/tree : es2015 as esm2015
    Compiling ng-zorro-antd/progress : es2015 as esm2015
    Compiling ng-zorro-antd/badge : es2015 as esm2015
    Compiling ng-zorro-antd/divider : es2015 as esm2015
    Compiling @ngx-translate/core : es2015 as esm2015
    Compiling ng-zorro-antd/auto-complete : es2015 as esm2015
    Compiling ng-zorro-antd/card : es2015 as esm2015
    Compiling @delon/acl : es2015 as esm2015
    Compiling @delon/util/format : es2015 as esm2015
    Compiling @delon/util/array : es2015 as esm2015
    Compiling ng-zorro-antd/cascader : es2015 as esm2015
    Compiling @delon/theme : es2015 as esm2015
    Compiling ng-zorro-antd/form : es2015 as esm2015
    Compiling ng-zorro-antd/mention : es2015 as esm2015
    Compiling @delon/util/pipes/currency : es2015 as esm2015
    Compiling @delon/util/pipes/format : es2015 as esm2015
    Compiling @delon/util/form : es2015 as esm2015
    Compiling ng-zorro-antd/rate : es2015 as esm2015
    Compiling @delon/util/pipes : es2015 as esm2015
    Compiling ng-zorro-antd/slider : es2015 as esm2015
    Compiling ng-zorro-antd/transfer : es2015 as esm2015
    Compiling ng-zorro-antd/tree-select : es2015 as esm2015
    Compiling ng-zorro-antd/upload : es2015 as esm2015
    Compiling @delon/util : es2015 as esm2015
    Compiling @delon/abc/reuse-tab : es2015 as esm2015
    Compiling ng-zorro-antd/affix : es2015 as esm2015
    Compiling ng-zorro-antd/skeleton : es2015 as esm2015
    Compiling ng-zorro-antd/breadcrumb : es2015 as esm2015
    Compiling @delon/abc/xlsx : es2015 as esm2015
    Compiling @delon/abc/let : es2015 as esm2015
    Compiling ng-zorro-antd/popconfirm : es2015 as esm2015
    Compiling ng-zorro-antd/resizable : es2015 as esm2015
    Compiling ng-zorro-antd/list : es2015 as esm2015
    Compiling ng-zorro-antd/alert : es2015 as esm2015
    Compiling @angular/platform-browser-dynamic : es2015 as esm2015
    Compiling ng-zorro-antd/notification : es2015 as esm2015
    Compiling @ngx-translate/http-loader : es2015 as esm2015
    Compiling @delon/auth : es2015 as esm2015
    Compiling @delon/mock : es2015 as esm2015
    Compiling @delon/form : es2015 as esm2015
    Compiling @delon/abc/page-header : es2015 as esm2015
    Compiling @delon/abc/result : es2015 as esm2015
    Compiling @delon/abc/se : es2015 as esm2015
    Compiling @delon/abc/st : es2015 as esm2015
    Compiling @delon/abc/sv : es2015 as esm2015
    Compiling ng-zorro-antd/popover : es2015 as esm2015
    Compiling ng-zorro-antd/version : es2015 as esm2015
    Compiling @delon/abc/global-footer : es2015 as esm2015
    Compiling @delon/abc/notice-icon : es2015 as esm2015
    Compiling @delon/theme/layout-default : es2015 as esm2015
    Compiling @delon/theme/setting-drawer : es2015 as esm2015
    Compiling @delon/theme/theme-btn : es2015 as esm2015
    Compiling @delon/abc/exception : es2015 as esm2015
    ✔ Browser application bundle generation complete.
    
    Initial Chunk Files           | Names                      |      Size
    vendor.js                     | vendor                     |  11.74 MB
    styles.css                    | styles                     | 796.86 kB
    main.js                       | main                       | 253.93 kB
    polyfills.js                  | polyfills                  | 128.75 kB
    runtime.js                    | runtime                    |   9.02 kB
    
                                  | Initial Total              |  12.90 MB
    
    Lazy Chunk Files              | Names                      |      Size
    exception-exception-module.js | exception-exception-module |  30.23 kB
    
    Build at: 2021-03-19T16:09:42.445Z - Hash: 8cd6f225edf5b913050a - Time: 46157ms
    
    Warning: /Users/liumiao/alain-project/src/app/app.module.ts depends on 'date-fns/locale'. CommonJS or AMD dependencies can cause optimization bailouts.
    For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
    
    Warning: /Users/liumiao/alain-project/node_modules/@delon/form/__ivy_ngcc__/fesm2015/form.js depends on 'ajv'. CommonJS or AMD dependencies can cause optimization bailouts.
    For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
    
    
    
    ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
    
    
    ✔ Compiled successfully.
    ✔ Browser application bundle generation complete.
    
    Initial Chunk Files | Names  |      Size
    styles.css          | styles | 796.86 kB
    
    5 unchanged chunks
    
    Build at: 2021-03-19T16:09:48.593Z - Hash: e2863e9b059d40387f6e - Time: 3280ms
    
    Warning: /Users/liumiao/alain-project/node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-i18n.js depends on 'date-fns/format'. CommonJS or AMD dependencies can cause optimization bailouts.
    For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
    
    Warning: /Users/liumiao/alain-project/node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-i18n.js depends on 'date-fns/getISOWeek'. CommonJS or AMD dependencies can cause optimization bailouts.
    For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
    
    Warning: /Users/liumiao/alain-project/node_modules/ng-zorro-antd/__ivy_ngcc__/fesm2015/ng-zorro-antd-i18n.js depends on 'date-fns/parse'. CommonJS or AMD dependencies can cause optimization bailouts.
    For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
    
    
    
    ✔ Compiled successfully.

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center]  
登陆之后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 1]  
整体比上次见到ng-alian要流畅太多了，感觉可能可用了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/baebae80d7824266aa5e76833742facf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/78c8539655904d5aaa069da81ce4752e.png