前端框架：Angular快速入门，这几点可以帮你少走弯路

前言

目前主流的前端框架包含：Vue、React、Angular等。

Angular作为前端主流框架之一，它是互联网巨人谷歌开发，这意味着它有一个坚实的基础和社区支持。

和Vue相似，入门也比较容易，但概念较多，学习中较难深入理解。不过这些都不是问题，我们要知道学习任何技术都不可能一口吃个胖子，需要日常工作中慢慢积累和沉淀。

初学Angular，我也遇到不少坑，也是遇到问题解决问题，一步一步的使用起来的。初学者注意这几点可以帮你少走弯路，快速上手Angular。

正文

开始之前，先普及一下Angular相关概念，让我们更好的了解这个前端框架。

概念早知道

Angular是一个基于TypeScript构建的开发平台。它包括：

• 一个基于组件的框架，用于构建可伸缩的Web应用；
• 一组完美集成的库，涵盖各种功能，包括路由、表单管理、客户端-服务器通信等；
• 一套开发工具，可帮助你开发、构建、测试和更新代码。

前提条件

要想使用Angular框架，你要先具备下列技术：

• HTML
• CSS
• JavaScript
• TypeScript

学习TypeScript的知识也会很有用，但不是必须的。如果具备上面的技术，你可以轻松学习Angular框架。

下面开始我们的学习之旅吧！

搭建本地开发环境和工作区

工欲善其事必先利其器。学习任何一门技术，开发环境很重要，很重要，非常重要！

安装Angular CLI

创建Angular项目可以通过Angular CLI（脚手架），它可以帮助我们生成应用和库代码，以及执行各种持续开发任务，比如：测试、打包和部署等。

如果你还没有安装，请先安装Angular CLI。

注意：安装之前确保你已经安装了Node工具。

执行命令行：

npm install -g @angular/cli

安装完成执行 ng -v 查看是否安装成功

创建工作区和初始应用

打开CMD.exe后，进入指定的目录，开始创建工作区和初始应用。

ng new my-appdemo

命令说明：ng new [application name] 创建指定应用名的Angular项目

执行上面的命令，Angular CLI 会安装必要的 Angular npm 包和其它依赖包。这可能要花几分钟的时间。完成后，会看到该目录

运行应用

Angular CLI 中包含一个服务器，方便你在本地构建和提供应用。下面运行我们的应用，进入到我们的工作目录，比如：my-appdemo。

运行下列命令：

cd my-appdemo
ng serve --open

ng serve 命令会启动开发服务器、监视文件，并在这些文件发生更改时重建应用。

–open（或者只用 -o 缩写）选项会自动打开你的浏览器，并访问 http://localhost:4200/
也可以通过执行命令 ng serve --port 0 --open 打开随机端口的访问地址，不过一般不用

如果你的安装和环境搭建成功了，就会看到启动后的页面。

注意：这个界面是我添加了ng-zorro后的界面，原始界面会显示Angular的图标。

防入坑专区

安装Angular CLI过程中，会报错

通过npm install -g @angular/cli安装会安装最新的Angular脚手架，可能与本地Node版本不兼容。

指定和本地Node版本兼容的@angular/cli版本进行安装Angular脚手架。如：npm install -g @angular/cli@6.0.0

Angular CLI安装有问题，如何卸载

卸载安装的angular-cli

npm uninstall -g angular-cli

清除npm缓存

npm cache verify --force

npm安装模块非常慢，怎么办

设置淘宝镜像，让下载速度更快，cmd命令窗口中执行下面的命令：

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

Angular需要typescript和types模块，还要安装吗

不需要，安装脚手架时会自行安装这两个模块，如果要安装可以执行下面的命令：

npm install -g typescript typings

安装Angular6之后，启动应用报错 rxjs

错误栈：ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ‘;’ expected

找到应用目录中的package.json，修改依赖 rxjs 配置。将 “rxjs”: “^6.0.0” 改为 “rxjs”: “6.0.0”，保存文件，并在当前目录的cmd.exe中执行npm update。执行npm start查看运行结果。

小结

通过以上的学习，进修者相信您已经可以搭建本地环境，并且能够创建自己的应用，完成了Angular入门的学习。学习新知识，就是要不断的去踏坑，把学习过程中的问题都一一解决掉，您也就真的学会了。

感谢您读完了进修者的内容分享，欢迎留言区一起聊聊天，聊聊关于您对“Angular快速入门”有什么更好的想法!

我是进修者，期待与您肩并肩，一起进化成长！