Angular2.0于2016年9月上线,我于9月入坑。

入坑以来,一直让我很困惑的问题

  1、angular-cli是个什么鬼东西?

  2、为什么我们自己的资源文件还没写什么,就有起码50多个js文件加载出来,页面启动速度蜗牛级别

  3、ng build打包出来的文件,未压缩

  4、ng build --prod打包出来的文件,未压缩,而且缺少js文件

  5、部署后,如何替换客户端缓存文件,也就是文件版本如何更换

  6、文件配置文件在哪里?

  诸如此类问题,需要以下条件:

  angular-cli :Beta.14版本  (ng --version)

  node :Beta.4 or higher

  npm: Beta.3 or higher

  具体方法参见angular-cli在github上的原文:https://github.com/angular/angular-cli/wiki/Upgrading-from-Beta.10-to-Beta.14;

  我这里只介绍根据原文我所做的具体操作:

  1、卸载掉旧版cli,下载最新版

  npm uninstall -g angular-cli
  npm cache clean
  npm install -g angular-cli@latest  2、使用新版cli,new一个新项目出来
  ng new migration-project
  cd migration-project

  3、将新项目中的src目录备份

  mv src/ src.webpacktemplate/

 4、将原项目中的src,移入新项目中
  mv ${OLD_PATH}/src src

 5、将原项目中的e2e目录,移入新项目中
  mv ${OLD_PATH}/e2e e2e
 6、删掉新项目中不需要的文件
  rm src/system-config.ts
  rm src/typings.d.ts  7、将备份的src中这些文件拷贝出来
  cp src.webpacktemplate/polyfills.ts src/
  cp src.webpacktemplate/styles.css src/
  cp src.webpacktemplate/test.ts src/
  cp src.webpacktemplate/tsconfig.json src/
  cp src.webpacktemplate/typings.d.ts src/
 8、将备份中的src.webpacktemplate/main.ts文件,拷贝到新项目中,注意和你原项目中的main.ts做对比,保留你的代码
 9、如上操作src.webpacktemplate/index.html文件
 10、将旧目录的环境配置文件拷入,注意文件名
  mv ${OLD_PATH}/config/environment.dev.ts src/environments/environment.ts
  mv ${OLD_PATH}/config/environment.prod.ts src/environments/environment.prod.ts   此处原文标注:

  If you have any custom environments don't forget to move them too.

  Environments are now listed in the angular-cli.json. Make sure those files matches the files on your disk. More importantly, because they're part of your application, their paths are relative to   your main.ts.

 11、npm install --save ${LIBRARY}
 12、删除掉所有的 moduleId: module.id,在webpack中,module.id 是number,但是在angular中期望是一个string

 13、把你所有的静态资源文件,图片放入新项目中的src/assets目录,别忘了改代码里的引用路径
  cp -R ${OLD_PATH}/public/ src/assets/

 14、
  Finally, if you're using SASS or LESS, you need to rename your styleUrls in all your files. Webpack understands LESS and SASS so you can use styleUrls: ['my-component.scss'] in your component and it will be transcompiled automatically.
 15、可以入坑了,ng serve运行一下,改掉所有出错的地方,如果没有出错,就可以删掉src.webpacktemplate/目录了
  
 16、删掉新项目的.git配置,把原项目中的.git文件复制过来
  rm -rf .git/
  cp -R ${OLD_PATH}/.git .
  
 17、ng serve起项目,ng build --prod打包也成功了!     打包出来的东西少很多了!! 研究得出,它的配置文件是这个:


 
 
 
 

解决:Angular-cli:执行ng-build --prod后,dist文件里无js文件、文件未压缩等问题的更多相关文章

  1. 执行ng build --prod --aot命令报错

    D:\git\**\src\main\iui>ng build --prod --aotHash: 257ab60feca43633b6f7Time: 25358mschunk {0} poly ...

  2. ANGULAR 使用 ng build --prod 编译报内存错误的解决办法

    如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433. ...

  3. angular ng build --prod 打包报错解决方案

    使用以下代码  就不报错了 ng build --prod --no-extract-license    打包命令 使用以下代码  就不报错了 ng build --prod --no-extrac ...

  4. angular2 ng build --prod 报错:Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

    调试页面 ng serve 正常 ng build 也正常 ng build --prod 异常:Module not found: Error: Can't resolve './$$_gendir ...

  5. ng build --aot 与 ng build --prod

    angluar的编译有以下几种方式: ng build  常规的压缩操作    代码体积最大 ng build --aot   angular预编译      代码体积较小 ng build --pr ...

  6. 使用 ng build 构建后资源地址引用错误的问题

    最近使用 Angular 做项目的时候,通过 ng build 打包后的资源地址都带有 localhost:4200,百思不得其解,以为是打包的问题. 最后在 index.html 的文件中发现有一个 ...

  7. Angular6之ng build | ng build --aot | ng build --prod 差异

    由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...

  8. nginx设置反向代理后,页面上的js css文件无法加载

    问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...

  9. Angular CLI 升级 6.0 之后遇到的问题

    Angular CLI 1.7.4 在使用 ng build --prod 会构建失败,而 ng build 是正常的.比较好的解决办法是使用 ng build --prod --extract-li ...

随机推荐

  1. Linux下php安装memcache扩展

    安装环境:CentOS 6.4 php扩展memcache的作用是为了支持memcached数据库缓存服务器,下面是安装方法. 1.下载 下载地址:http://pecl.php.net/packag ...

  2. web安全测试工具的局限性

    讨论安全漏洞的原理,谈谈工具的局限. 先说下扫描工具的原理: 扫描工具可以看做由两部分组成:爬虫+校验机构.爬虫的作用是搜集整个被采集对象的链接,然后校验机构对这些链接逐一进行验证. 说扫描工具的局限 ...

  3. 将TP引擎改为smarty引擎

    在common/config文件里设置'TMPL_ENGINE_TYPE'=>'Smarty'即可,但要注意,在模板文件里的css样式{}要用一对{literal}{/literal}标签包裹, ...

  4. ST3插件——PlainTasks的使用

    今天看到一个有意思的ST3插件,可以进行简单的任务管理. 安装很简单:ctrl + shift + p,输入install回车,再输入plaintasks回车即可. 以下是一些支持的操作,更多的操作请 ...

  5. ndk开发教程以及问题解决方案

    一.NDK产生的背景 Android平台从诞生起,就已经支持C.C++开发.众所周知,Android的SDK基于Java实现,这意味着基于Android SDK进行开发的第三方应用都必须使用Java语 ...

  6. How to install 64-bit Google Chrome 28+ on 64-bit RHEL/CentOS 6 or 7

    How to install 64-bit Google Chrome 28+ on 64-bit RHEL/CentOS 6 or 7 The problem Google developers s ...

  7. Response.Redirect("x.aspx);跳转后session为null的解决方法

    通常我们做登陆的时候都是登录成功后为管理员保存一些信息,一般都会写类似下面的代码 if(登录成功) { Session["xx"] = "user"; Resp ...

  8. iBATIS.net获取运行时sql语句

    [本文原创,第一次离首页如此之近.发在候选区攒攒rp,管理员看着不合适可以撤下.] 虽然只在iBatis的世界里小打小闹匆匆数月,却历经数次与领导和同事激辩,再通过不懈努力学习和开发积累,楼猪终于被它 ...

  9. Android开发探秘之一:创建可以点击的Button

    感觉到自己有必要学习下手机开发方面的知识,不论是为了以后的工作需求还是目前的公司项目. 当然,任何新东西的开始,必然伴随着第一个HelloWorld,Android学习也不例外.既然才开始,我就不做过 ...

  10. Linux基础入门学习笔记20135227黄晓妍

    学习计时:共24小时 读书:1小时 代码:8小时 作业:3小时 博客:12小时 一.学习目标 1. 能够独立安装Linux操作系统   2. 能够熟练使用Linux系统的基本命令   3. 熟练使用L ...