angular项目搭建

一、环境准备

1、安装node：https://nodejs.org/en/（npm -v查看是否安装成功及安装版本）

若npm太慢，建议安装yarn（npm install yarn）

2、安装TypeScript：npm install -g typescript （tsc -v查看版本）

3、安装@angular/cli

　　1）若之前安装过，先卸载

　　npm uninstall -g @angular/cli

　　2）清除缓存

　　npm cache clean --force

　　3）查看

　　ng -v

　　若仍然显示之前的版本，执行第四步

　　4）找的node安装下的删除

　　5）安装

　　npm install -g @angular/cli

　　6）新建

　　ng new my-app –skip-install （创建时不执行install）

*********************************************************************************************************************************************************************************************************************

二、开始

1、创建项目

命令：ng new my-app （创建时会执行install，很慢）

　　使用ng new my-app –skip-install （创建时不执行install）

2、启动项目

npm start

默认端口为4200（http://localhost:4200/）

3、添加concurrently

命令：npm i concurrently --save

concurrently我们可以通过npm install在项目内安装多个服务,然后配置package.json内的script命令, 然后通过命令行一键并行开启多个服务。

说明参考：https://www.jianshu.com/p/20e61878d59e

4、添加json-server

命令： npm i -g json-server --save

模拟接口获取mock数据。

5、配置

"start": "concurrently "ng serve -o --proxy-config proxy.conf.json --host=0.0.0.0 --port=8888" "

 

6、使用less

1）新项目

 ng new project-name --style less

2）已有项目

将后缀名为css的文件改为less，配置package.json文件

"projects": {

　　"ngeg": {

　　　　"root": "",

　　　　"sourceRoot": "src",

　　　　"projectType": "application",

　　　　"prefix": "app",

　　　　"schematics": {

　　　　　　"@schematics/angular:component": {

　　　　　　"styleext": "less"

　　　　}

　　},

　　......

}

 

 

 

7、引用ng-zorro-antd（*项目停止运行再执行以下命令*）

命令：npm install ng-zorro-antd --save

导入：在app.module.ts中

import { BrowserModule } from '@angular/platform-browser';

import { NgZorroAntdModule } from 'ng-zorro-antd';

imports: [

　　BrowserModule,

　　NgZorroAntdModule

]

 

引入：在styles.less中

@import "~ng-zorro-antd/src/ng-zorro-antd.less";

8、rxjs参考：https://www.jianshu.com/p/16be96d69143