Angular6学习笔记1：搭建开发环境

搭建Angular开发环境
最新推荐文章于 2024-01-16 16:07:50 发布
原创 最新推荐文章于 2024-01-16 16:07:50 发布 · 378 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍如何从零开始搭建Angular开发环境，包括安装Node.js、全局安装Angular CLI以及创建新项目的过程。

搭建angular开发环境 

a.安装node.js 

下载地址：https://nodejs.org/en/download/ 

确认安装结果 ：

打开cmd或者terminal

 

  1. Last login: Thu Aug  2 13:48:04 on ttys000

  2. bogon:~ wjy$ node -v

  3. v8.9.1

  4. bogon:~ wjy$ npm -v

  5. 5.5.1

  6. bogon:~ wjy$ 

b.全局安装 Angular CLI

npm install -g @angular/cli

 

  1. Last login: Thu Aug  2 13:48:57 on ttys000

  2. bogon:~ wjy$ npm install -g @angular/cli

确认安装结果：

 

  1. bogon:~ wjy$ ng -v

  2.      _                      _                 ____ _     ___

  3.     / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

  4.    / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |

  5.   / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |

  6.  /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|

  7.  

  8.                 |___/

  9. Angular CLI: 6.1.1

  10. Node: 8.11.3

  11. OS: darwin x64

  12. Angular: 

  13. ... 

  14. Package                      Version

  15. ------------------------------------------------------

  16. @angular-devkit/architect    0.7.1

  17. @angular-devkit/core         0.7.1

  18. @angular-devkit/schematics   0.7.1

  19. @schematics/angular          0.7.1

  20. @schematics/update           0.7.1

  21. rxjs                         6.2.2

  22. typescript                   2.7.2

  23.  
  24.  

c.创建一个新项目

ng  new demo(项目名称）

 

  1. bogon:WebstormProjects wjy$ ng new demo

  2. CREATE demo/README.md (1021 bytes)

  3. CREATE demo/angular.json (3530 bytes)

  4. CREATE demo/package.json (1309 bytes)

  5. CREATE demo/tsconfig.json (408 bytes)

  6. CREATE demo/tslint.json (2805 bytes)

  7. CREATE demo/.editorconfig (245 bytes)

  8. CREATE demo/.gitignore (503 bytes)

  9. CREATE demo/src/favicon.ico (5430 bytes)

  10. CREATE demo/src/index.html (291 bytes)

  11. CREATE demo/src/main.ts (370 bytes)

  12. CREATE demo/src/polyfills.ts (3194 bytes)

  13. CREATE demo/src/test.ts (642 bytes)

  14. CREATE demo/src/styles.css (80 bytes)

  15. CREATE demo/src/browserslist (375 bytes)

  16. CREATE demo/src/karma.conf.js (964 bytes)

  17. CREATE demo/src/tsconfig.app.json (170 bytes)

  18. CREATE demo/src/tsconfig.spec.json (256 bytes)

  19. CREATE demo/src/tslint.json (314 bytes)

  20. CREATE demo/src/assets/.gitkeep (0 bytes)

  21. CREATE demo/src/environments/environment.prod.ts (51 bytes)

  22. CREATE demo/src/environments/environment.ts (631 bytes)

  23. CREATE demo/src/app/app.module.ts (314 bytes)

  24. CREATE demo/src/app/app.component.css (0 bytes)

  25. CREATE demo/src/app/app.component.html (1141 bytes)

  26. CREATE demo/src/app/app.component.spec.ts (989 bytes)

  27. CREATE demo/src/app/app.component.ts (208 bytes)

  28. CREATE demo/e2e/protractor.conf.js (752 bytes)

  29. CREATE demo/e2e/tsconfig.e2e.json (213 bytes)

  30. CREATE demo/e2e/src/app.e2e-spec.ts (300 bytes)

  31. CREATE demo/e2e/src/app.po.ts (208 bytes)

  32. ⸨ ░░░░░░░░░░░░░░░░░⸩ ⠹ fetchMetadata: sill pacote range manifest for body-parse

等待下方的进度条跑完就回在相关目录下创建一个新项目

 

  1. bogon:WebstormProjects wjy$ ng new demo

  2. CREATE demo/README.md (1021 bytes)

  3. CREATE demo/angular.json (3530 bytes)

  4. CREATE demo/package.json (1309 bytes)

  5. CREATE demo/tsconfig.json (408 bytes)

  6. CREATE demo/tslint.json (2805 bytes)

  7. CREATE demo/.editorconfig (245 bytes)

  8. CREATE demo/.gitignore (503 bytes)

  9. CREATE demo/src/favicon.ico (5430 bytes)

  10. CREATE demo/src/index.html (291 bytes)

  11. CREATE demo/src/main.ts (370 bytes)

  12. CREATE demo/src/polyfills.ts (3194 bytes)

  13. CREATE demo/src/test.ts (642 bytes)

  14. CREATE demo/src/styles.css (80 bytes)

  15. CREATE demo/src/browserslist (375 bytes)

  16. CREATE demo/src/karma.conf.js (964 bytes)

  17. CREATE demo/src/tsconfig.app.json (170 bytes)

  18. CREATE demo/src/tsconfig.spec.json (256 bytes)

  19. CREATE demo/src/tslint.json (314 bytes)

  20. CREATE demo/src/assets/.gitkeep (0 bytes)

  21. CREATE demo/src/environments/environment.prod.ts (51 bytes)

  22. CREATE demo/src/environments/environment.ts (631 bytes)

  23. CREATE demo/src/app/app.module.ts (314 bytes)

  24. CREATE demo/src/app/app.component.css (0 bytes)

  25. CREATE demo/src/app/app.component.html (1141 bytes)

  26. CREATE demo/src/app/app.component.spec.ts (989 bytes)

  27. CREATE demo/src/app/app.component.ts (208 bytes)

  28. CREATE demo/e2e/protractor.conf.js (752 bytes)

  29. CREATE demo/e2e/tsconfig.e2e.json (213 bytes)

  30. CREATE demo/e2e/src/app.e2e-spec.ts (300 bytes)

  31. CREATE demo/e2e/src/app.po.ts (208 bytes)

  32. npm WARN deprecated istanbul-lib-hook@1.2.1: 1.2.0 should have been a major version bump

  33. > fsevents@1.2.4 install /Users/wjy/WebstormProjects/demo/node_modules/fsevents

  34. > node install

  35. [fsevents] Success: "/Users/wjy/WebstormProjects/demo/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed

  36. Pass --update-binary to reinstall or --build-from-source to recompile

  37.  

  38. > node-sass@4.9.2 install /Users/wjy/WebstormProjects/demo/node_modules/node-sass

  39. > node scripts/install.js

  40.  

  41. Cached binary found at /Users/wjy/.npm/node-sass/4.9.2/darwin-x64-57_binding.node

  42.  

  43. > node-sass@4.9.2 postinstall /Users/wjy/WebstormProjects/demo/node_modules/node-sass

  44. > node scripts/build.js

  45. Binary found at /Users/wjy/WebstormProjects/demo/node_modules/node-sass/vendor/darwin-x64-57/binding.node

  46. Testing binary

  47. Binary is fine

  48. added 1166 packages in 151.644s

  49. Successfully initialized git.

 

 

Angular4学习笔记之准备和环境搭建项目
08-29
Angular4学习笔记之准备和环境搭建项目是Angular4学习笔记中的一部分，主要介绍了Angular4学习笔记之准备和环境搭建项目的相关知识点。 一、环境搭建 Angular4学习笔记之准备和环境搭建项目需要具备以下环境： *...
Angular 入门学习笔记
最新发布
07-02
使用场景及目标：①帮助开发者快速搭建Angular开发环境，掌握Angular的基本概念和开发技巧；②通过实际案例，加深对Angular组件化开发的理解；③学习如何使用Angular的各种特性，如数据绑定、路由、服务、指令等，...
npm install出现一直停留在"fetchMetadata: sill pacote range manifest for "解决方法
热门推荐
yuxinqingge的博客
04-17 1万+
更换成淘宝的源 npm config set registryhttps://registry.npm.taobao.org – 配置后可通过下面方式来验证是否成功npm config get registry或npm info express 或者 使用npm config set registry http://registry.cnpmjs.org/ 然后 npm ...
【npm install一直停留在“fetchMetadata: sill pacote range manifest for “解决方法】
limuzhixing的博客
10-31 3682
npm install一直停留在"fetchMetadata: sill pacote range manifest for "解决方法
npm install 报错sill pacote range manifest for hmac-drbg@^1.0.0 fetched
u011298001的博客
11-27 1万+
  npm config set registry  https://registry.npm.taobao.org    
npm install出现一直停留在fetchMetadata: sill解决方法
江七
09-04 5087
主要是因为npm安装插件是从国外服务器下载，受网络影响大，一般网速不好的情况下，会等很久很久,有时还会直接断开连接。 解决办法 将npm的源换成淘宝镜像 使用下面命令更换源。 npm config set registry https://registry.npm.taobao.org 配置后可通过下面方式来验证是否成功 npm config get registry 输入命令执行后，输出内容如下，即代表更换成功。 https://registry.npm.taobao.org/ ...
Angular4 vs React：对比与环境搭建笔记
"Angular4学习笔记之准备和环境搭建项目" 这篇学习笔记主要介绍了作者从Java背景转到前端开发，特别是Angular4的学习历程，同时也对比了Angular与React两个框架的差异。作者提到了从Angular1.x过渡到Angular4的挑战...
Angular4学习之路：环境配置与初步探索
"Angular4学习笔记主要讲解了准备和环境搭建的过程，适合对Angular4感兴趣的开发者参考。文中作者从个人经历出发，对比了Angular与React的特点，并分享了对两者的看法。" 在开始Angular4的学习之前，了解其核心特性...
npm install时长时间停留在fetchMetadata: sill解决方法
Evan's Blog ٩(๑❛ᴗ❛๑)۶
01-26 9733
主要是因为npm安装插件是从国外服务器下载，受网络影响大，一般网速不好的情况下，会等很久很久，too long~ 解决办法 1.将npm的源换成淘宝镜像 使用下面命令更换源。 npm config set registry https://registry.npm.taobao.org 源更换完成之后，使用下面命令检查 npm config get registry #或者 npm info...
npm i到[ .................] - fetchMetadata: sill pacote range manifest for babel-plugin-transform-
不忘初心
03-07 2619
卡住了,应该是淘宝源的出了问题,解决办法, 使用npm config set registry http://registry.cnpmjs.org/后再npm i
解决npm install时长时间停留在fetchMetadata: sill
Thomas的博客
07-27 8988
原因是因为npm安装插件是从国外服务器下载，受网络影响大 解决方法： 1.npm换源成淘宝镜像 npm config set registry https://registry.npm.taobao.org 输入下面的代码验证是否成功 npm config get registry 或者 npm info express 2.个人实验科学上网也行（当然你的梯子也得快） ...
运行npm install 时卡在fetchMetadata: sill install loadAllDepsIntoIdealTree不动-解决方法
十三阿哥的博客
01-16 2732
运行npm install 时卡在fetchMetadata: sill install loadAllDepsIntoIdealTree不动-解决方法
cocos creater自定义引擎 npm 报错 fix
丶党玲儿的博客
12-16 592
背景 cocos creater 编译引擎 npm install 报错 报错内容： fetchMetadata: sill pacote range manifest for path-root@^0.1.1 fetched in 194ms 解决方案 生效方案如下 npm config set registry http://registry.npmjs.org/ --global npm cache clear --force npm install --verbose 参考文章： https
安装npm install时，长时间停留在fetchMetadata的解决方法
sdaujsj1的博客
07-26 4110
安装npm install时，长时间停留在fetchMetadata的解决方法 方法如下： 更换成淘宝的源 npm config set registry https://registry.npm.taobao.org – 配置后可通过下面方式来验证是否成功 npm config get registry – 或npm info express 参考博客：https://blog.csdn.net...
运行vue npm install 遇到的错误及解决方法
ChenS27的博客
03-22 5242
错误1：一直停滞在sill pacote range manifest for hmac-drbg@^1.0.0 fetched的解决方法 1.先执行npm config set registry https://registry.npm.taobao.org 2.再次执行npm install 错误2：ERR! Failed at the chromedriver@2.46.0 i...
ubuntu中vuecli创建项目一直卡在fetchMetadata: sill pacote range manifest for fastq@^1.6的解决方式！包成功)
weixin_45762388的博客
12-12 2312
ubuntu中vuecli创建项目一直卡在fetchMetadata: sill pacote range manifest for fastq@^1.6的解决方式！包成功 1.打开software updater 2.选择settings 3.点击ubuntu software选项 4.点击download form的下拉框选择other 5.点击select best server（会自动帮你查找哪个源最适合你） 6.然后保存重启一下就成功啦！！~ ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值