angular开发环境配置

angular CLI简介

• Angular"全家桶"式的设计思路

  • @angular/cli工具里面集成了日常开发需要使用的所有Node模块
  • 使用@angular/cli可以大幅度降低搭建开发环境的难度

• Angular CLI是Angular官方开发的一个脚手架工具，专门用来构建Angular应用程序

  • Angular应用程序初始化
  • 内置开发服务器
  • 代码变更浏览器自动刷新
  • 创建组件、指令、服务等集成工具
  • 测试和维护
  • 。。。

angular 安装依赖环境

• 安装 Node.js

  • 下载地址：https://nodejs.org/en/download/
  • 安装
  • 确认安装环境
    • 终端输入：node -v
    • 终端反馈 版本号 即安装成功！

• 安装 npm

  • npm会随着Node的安装被一起安装
  • 确认安装环境
    • 终端输入：npm -v
    • 终端反馈 版本号 即安装成功！

• 安装 Python

  • 下载地址：https://www.python.org/downloads/release/python-2714/
  • 确认安装环境
    • 终端输入：python --version
    • 终端反馈 版本号 即安装成功！

• 安装C++编译工具

  • 如果本地安装了Visual Studio，则无需安装
  • 在终端执行以下指令，安装C++编译工具
  • npm install --global --production windows-bulid-tools

• 安装 cnpm

  • 在终端执行以下指令，安装cnpm
  • npm i -g cnpm --registry=https://registry.npm.taobao.org
  • 如果报错，先执行以下指令
  • npm config set strict-ssl false
  • 确认安装环境
    • 终端输入：cnpm -v
    • 终端反馈 版本号 即安装成功！

• 安装 yarn

  • 参照官网
  • https://yarn.bootcss.com/docs/install/#windows-stable

安装脚手架工具 Angular CLI

• 概述

  • Angular CLI是Angular官方开发的一个脚手架开发工具
  • 集成了webpack打包，开发服务器，单元测试，自动编译，部署等功能特性

• 安装

  • 在终端执行以下指令
  • cnpm i -g @angular/cli
  • 终端输入：ng --version
  • 终端反馈 版本号 即安装成功！
  • 如果安装失败，请手动把全局的@angular/cli删掉
  • cnpm uninstall -g @angular/cli

使用脚手架工具初始化项目

• 在当前项目根目录打开终端
  • 键入以下指令
  • ng new itemName
  • 当Angular CLI自动生成好项目骨架之后，会立即自动使用npm来安装所依赖的Node模块，由于被墙原因，初始化很慢或者失败
  • 此时手动ctrl+C，终止当前任务
  • 然后进入初始化好的根目录，键入指令 cnpm install来安装

启动开发模式

• 在终端的根目录下键入指令

  • # 或者 npm start
  • ng serve
  • ng serve --open 启动开发模式，并自动打开浏览器
  • 若是报错 [error] Error: Cannot find module '@angular-devkit/build-webpack'
  • 在终端键入：cnpm i --save-dev @angular-devkit/build-webpack

• 如果错误暂时无法解决,卸载重装

  • 常规卸载angular方法
    • 打开终端键入以下指令
    • npm uninstall -g angular-cli
    • npm cache clean
    • 测试删除成功
    • ng version
  • 强制手动删除angular/cli
    • 打开路径：C:Users[用户名]AppDataRoaming
    • 找到文件夹npm-cache，将其删除
    • 找到文件夹npm，打开进入
    • 删除文件ng ng.cmd
    • 继续打开文件夹：node_modules
    • 删除@angular
    • 测试删除成功
    • ng version
  • 按照官网要求重新进行环境配置
    • https://angular.cn/guide/setup-local

• 启动成功

  • 浏览器打开网址：http://localhost:4200/
  • 若想更改端口号，终端键入指令：ng serve --port 3000

目录结构

• src 所有编码文件加入其中
  • app 组件目录
    • app.component.css 组件样式
    • app.component.html 组件母版,也就是http://localhost:4200/页面
    • app.component.ts 组件
  • main.ts 模块启动入口