Angular项目实战:创建项目

安装angular-cli

把 npm 切换成国内镜像

npm config set registry https://registry.npm.taobao.org

安装angular-cli

npm install -g @angular/cli

新建项目

项目名: my-angular-project

ng new my-angular-project --style less

提示:

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 (y/N)  
您是否要在工作空间中执行更严格的类型检查和更严格的捆绑包预算？
此设置有助于提高可维护性并提前发现错误。
有关更多信息，请参见https://angular.io/strict y 需要 n 不需要

Would you like to add Angular routing? (y/N)
你需要增加 Angular 路由吗? y 确认 n 不添加

添加NG-ALAIN后台前端解决方案

$ ng add ng-alain
$ ? Would you like to share anonymous usage data about this project 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. (y/n)

选择N

更换端口

打开项目根目录,编辑package.json,更改scripts下的start

"start": "ng s --port 3000 -o"

目录作用

├── _mock                                       # Mock 数据规则
├── src
│   ├── app
│   │   ├── core                                # 核心模块
│   │   │   ├── i18n
│   │   │   ├── net
│   │   │   │   └── default.interceptor.ts      # 默认HTTP拦截器
│   │   │   ├── services
│   │   │   │   └── startup.service.ts          # 初始化项目配置
│   │   │   └── core.module.ts                  # 核心模块文件
│   │   ├── layout                              # 通用布局
│   │   ├── routes
│   │   │   ├── **                              # 业务目录
│   │   │   ├── routes.module.ts                # 业务路由模块
│   │   │   └── routes-routing.module.ts        # 业务路由注册口
│   │   ├── shared                              # 共享模块
│   │   │   └── shared.module.ts                # 共享模块文件
│   │   ├── app.component.ts                    # 根组件
│   │   └── app.module.ts                       # 根模块
│   │   └── delon.module.ts                     # @delon模块导入
│   ├── assets                                  # 本地静态资源
│   ├── environments                            # 环境变量配置
│   ├── styles                                  # 样式目录
└── └── style.less                              # 样式引导入口

启动完成