一、常用命令

1.1 npm config list配置项目

  可进行相关代理配置,通常可以配置在网络环境较差的情况下,配置相关代理。相关的设置命令如图:

1.2 ng 新建启动项目

  ng new project 新建项目
  npm install 安装项目需要的包
  ng serve启动项目    
 ng generate 生成相关文件

  常见的有以下文件格式

  比如生成一个User的组件就可以利用命令:

ng g c User

1.3 打包编译相关命令

ng serve --prod --aot 最小化打包启动
ng build --prod --aot 编译打包
ng test 测试用例

这里--prod参数后,angular-cli会把用不到的包都删掉,而--aot参数是让angular-cli启动预编译特性。

 二、使用命令碰到的问题

2.1 使用ng build 进行打包的时候,在工程目录下会生成dist的文件夹,控制台提示failed to load resource。相关js等文件路径问题。

解决方案:

.修改index.html中的base href    #在index.html页面里头将base href路径进行修改
.使用ng build --base-href ./ #用该命令进行打包
.在package.json中修改build命令

方案3的解决方案:

在package.json 文件的scripts中添加命令
"build":"ng build --base-href ./" 
./可以替换成打包的路径,最后执行:
npm run build

2.2 打包越打越大问题

项目都完整之后,接下来就是令人头疼的打包问题。第一步在项目根目录下运行ng build(为了方便大家对比,所以先运行此命令),如下:

其次在运行ng build --prod --aot,截图如下:

这里--prod参数后,angular-cli会把用不到的包都删掉,而--aot参数是让angular-cli启动预编译特性。最后angular-cli会在项目根目录下生成一个dist目录,里面就是编译,压缩好的文件……此时你只需要将其红色方框内圈中的.js文件,发布到服务器上即可,或者也可将.gz发布上去。这样就可以了。

最新文章

  1. csharp: Download SVN source
  2. Laravel大型项目系列教程(三)之发表文章
  3. MySql创建树结构递归查询存储过程
  4. Testing - FURPS模型
  5. hdu4976 A simple greedy problem. (贪心+DP)
  6. django的views里面的request对象详解大全
  7. CF 71C. Round Table Knights
  8. react + iscroll5
  9. jquery live()只支持css选择器
  10. 【有源汇上下界最大流】ZOJ 3229 Shoot the Bullet
  11. gem安装时出现 undefined method `size' for nil:NilClass (NoMethodError) 的解决办法
  12. Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理
  13. 【转】javascript 浮点数运算问题
  14. 1. Spring 简介以及关于 Eclipse 的 Spring Tool Suite 插件安装
  15. IntersectionObserver简介
  16. Linux内核分析作业 NO.4
  17. EHcache经典配置
  18. 辅助判卷程序的一些小bug
  19. HTML5+Bootstrap 学习笔记 3
  20. MongoDB day02

热门文章

  1. cookie 与 session 的区别详解
  2. [POI2009]Lyz
  3. quartz(6)--集群
  4. jQuery的序列化元素 serialize()方法 serializeArray()方法 param()方法
  5. 初探UiAutomator2.0中使用Xpath定位元素
  6. java中的Properties
  7. 在windows x64上部署使用Redis
  8. IOS-SDWebImage根据网络状态加载图片
  9. GAN作用——在我做安全的看来,就是做数据拟合、数据增强
  10. css选择器的特殊性值