从这篇文章开始，我将在这里记录学习angular10的全部过程。这是一条艰辛的路，希望我能坚持走下去～(原文查看)

1.安装全局ANGULAR CLI

npm install -g @angular/cli@10  // windows
sudo npm install -g @angular/cli@10  // macOS

安装成功后执行ng --version，出现下图则表示安装成功

2.创建项目

确定一个你项目需要安装的目录，用终端打开文件夹，执行ng new hero（hero是你的项目名称）。

ng new <name> [options]
ng n <name> [options] // 简写// options具体参数详见 https://angular.cn/cli/new
// 这里给出我这个项目的ng new指令
ng new hero --routing=true --style=scss --skipTests
// 含义是，添加routing路由文件，采用scss作为默认预处理样式，不安装单元测试文件

执行了上面指令，cli将自动安装依赖到你的项目。项目默认结构如下：

为了方便开发，我们先修改下package.json 文件

// "scripts"下"start"添加 --open，当启动项目时将自动在浏览器打开
"start": "ng serve --open"

启动项目

npm run start

如果一切正常，浏览器将正常打开http://localhost:4200/

3.安装BOOTSTRAP

为了减少样式的书写，本项目将使用bootstrap(v4.5.3)。

// 因为bootstrap依赖jquery跟popper.js,所以安装的时候一并安装npm install bootstrap jquery popper.js -S

安装成功后需要引入boot的样式文件，修改***styles.scss*** 文件：

// styles.scss
// 添加下面代码到文件顶部
@import '~bootstrap'

引入JS文件，在***main.ts***中引入bootstrap：

import 'bootstrap';

清空src/app/app.component.html文件，并添加下面代码，来验证bootstrap是否安装成功：

<!-- app.component.html -->
<div class="alert alert-primary" role="alert">A simple primary alert—check it out!
</div><div class="dropdown"><button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button</button><div class="dropdown-menu" aria-labelledby="dropdownMenuButton"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div>
</div>

页面已经运用上bootstrap的样式则安装成功

至此，angular10 的环境配置全部完成，顺便还装了一个bootstrap～
还有一件重要的事，欢迎大家关注我的公众号，公众号会最先更新