在讲到angular2 及以上项目打包之前,我先讲一下。angular cli 拥有自己的打包工具,熟悉的可以直接上手。如果用不惯,也可以去使用webpack 之类的。内置的systemjs也是很好用的。

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

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

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

在打包过后。上传上服务器就可以使用了,当然也会有一些坑。如果服务器没有配置相关的路由也是跑不起来的。当然这个就是属于后端问题了。

对您有帮助,请给给个赞。谢谢。

关于angular2 打包(一)的更多相关文章

  1. Ionic2 cordova angular2 打包到Android apk环境搭建

    一.前言 前段时间,公司有个APP项目需要支持不同平台,于是采用了Ionic2 + cordova + angular2,在搭建环境过程中遇到了不少问题,刚好最近有时间整理出来. 二.开发环境搭建 参 ...

  2. angular2 安装 打包成发布项目过程

    安装之前要有typings和typescript全局已经安装好 安装命令新版为npm install -g @angular/cli 原来的angular-cli为老版的,我安装失败了 安装之后新建一 ...

  3. angular2项目打包部署的坑

    1.ng项目打包后,打开index.html,发现页面是空白的,F12查看,发现js和css引入的路径不对 这里要将package.json文件的打包命令改成 ng build --prod --ba ...

  4. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  5. Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境

    一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...

  6. Angular2学习笔记——NgModule

    在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...

  7. 最新Angular2案例rebirth开源

    在过去的几年时间里,Angular1.x显然是非常成功的.但由于最初的架构设计和Web标准的快速发展,逐渐的显现出它的滞后和不适应.这些问题包括性能瓶颈.滞后于极速发展的Web标准.移动化多平台应用, ...

  8. ionic2+angular2中踩的那些坑

    好久没写什么东西了,最近在做一个ionic2的小东西,遇到了不少问题,也记录一下,避免后来的同学走弯路. 之前写过一篇使用VS2015开发ionic1的文章,但自己还没摸清门道,本来也是感兴趣就学习了 ...

  9. [译]Angular2 和TypeScript -- 一次简要的预览

    原文链接:https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview 作者:  Yakov Fain Posted o ...

随机推荐

  1. python -- Pythonic

    所谓Pythonic,就是极具Python特色的Python代码(明显区别于其它语言的写法的代码) 总结如下: 两变量的内容交换 Python:a,b = b,a 非Python:t=a;a=b;b= ...

  2. 我的海外购页面List

    <%@ page language="java" contentType="text/html;charset=UTF-8" %> <%@ t ...

  3. ubuntu16.04 在/etc/network/interfaces设置static ip无效

    双网卡使用无线网卡上互联网,使用以太网卡连局域网,在/etc/network/interfaces里对以太网卡设置static ip无效,使用ifconfig临时设置也仅能工作一会,设置的ip马上就消 ...

  4. kaggle竞赛-保险转化-homesite

    时间格式的转化 查看数据类型 查看DataFrame的详细信息 填充缺失值 category 数据类型转化 模型参数设定 结论 该项目是针对kaggle中的homesite进行的算法预测,使用xgbo ...

  5. python和计算机的交互

    网易邮箱都2万+满了,但是只有手动删除.实在太多,于是想使用python脚本实现,python有很多现成的库可以使用,这就是python的好处,而不是c++或者java,python的库说明网站:ht ...

  6. 11.17 flask (1)

    2018-11-17 18:38:42 开始学习进行玩前面项目  开始进军flask flask是一个小型的web框架,,但是有很多第三方组件 最后组装组装就和django一样啦!!!!!!! pyt ...

  7. 使用stylus

    1. 首先确保  node + npm  环境一切正常. 2. 全局安装  stylus: 在命令行中:            npm i stylus@latest -g 3. 此时可以创建  .s ...

  8. maven如何单独启动插件目标

    说来恼火,在网上找了半天没找到 原来插件名称其实不需要定义而是直接想象到的,如下,我尝试过了好几种 mvn plugin:goal 都没成功:从代码看goal已经没啥疑问了,就是compile,但哪个 ...

  9. CF3A Shortest path of the king

    The king is left alone on the chessboard. In spite of this loneliness, he doesn't lose heart, becaus ...

  10. 关于微信里wx.getUserInfo获取用户信息都是拼音的转成中文方法

    加一个参数:lang:"zh_CN" 就可以了  1.  加在js里面 wx.getUserInfo({ lang:"zh_CN", success: func ...