this.scrollPage(ele, this.nextElement.offsetTop - window.innerHeight * 0.2, 24, 'down');

angular2升级到angular4
angular2升级到angular4有必要吗？答案是很有必要。升级到4不会在像angular1升级到angular2那样麻烦，而且angular4打包后的文件大小会减少300KB左右。
升级包命令


在Linux/Mac上

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest
 typescript@latest --save

在Windows上：

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest
 @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

效果


98版本是angular2生产环境打包后的文件，99版本是升级到angular4后打包的文件，从这图可以看到，
main.js文件减少了大概230KB，随着代码的增加这数字更明显，vendor.js减少了30KB多。

意外金喜的博客 : http://blog.csdn.net/zzwwjjdj1

Angular2和Angular4之间的区别不大，没有什么本质上的区别。Angular4是基于angular2 ，然后在功能列表中添加了一些新功能，同时还有一些旧功能的改进。
angular4与angular2兼容吗
Angular2和Angular4之间属于平滑过渡，Angular 4将尽可能兼容Angular 2，因为Angular团队不想重蹈从Angular 1.X到Angular 2.X的覆辙。
Minar补充道：“我们不会再做任何会破坏软件生态系统的重大更改，我们也不想破坏现有的组件。”所以，现有的稳定的或者遵循Angular一般使用规范的API将不会有重大更改。
Minar说如果未来的一些新功能被证明会破坏生态系统并且产生的问题不能被修复的话，他们会移除该功能而不是冒险使用它们。
Angular4 的特性和性能
相比于Angular 2，Angular4的功能列表中添加了许多新功能，同时还有一些旧功能的改进。
更小更快：
使用Angular4，程序将会消耗更少的空间，并比以前的版本运行地更快。工作主要用于不断进行改进。
视图引擎：
Angular4的开发人员修改了视图引擎的代码，例如AOT创建的代码。这些修改促使视图部分生成的代码大小减少了大约60％。模板越是复杂，节省的就越多。
动画包：
Angular4的开发人员将动画从Angular的核心部分提取出来，并将它们放在独立的包中。这意味着如果开发人员不需要使用动画，就可以不创建这些额外的代码。
这个功能还能够帮助更方便的查找docs文件和使用自动完成功能。开发人员可以通过为@angular/platform-b??rowser/animations引入浏览器动画模块，从而实现为主要的NgModule添加动画功能。
改进 *ngIf 和 *ngFor：
模板绑定语法目前支持一些少量有帮助的更改。现在，开发人员已经可以使用if/else设计??语法，并分配局部变量了。
Angular Universal：
此版本是Universal团队几个月的工作成果。这个Universal版本的代码的绝大多数目前位于@angular/platform-server。
TypeScript 2.1和2.2兼容性：
Angular4开发组将Angular升级为更新版本的TypeScript。这将提高ngc的速度，方便开发人员将在编码过程中更好的进行类型检查。
模板的源映射：
每当模板中的某些内容出现错误时，都将创建源映射，为原始模板提供有意义的说明内容。

安装angular/cli

全局安装 angular/cli

cnpm install -g angular/cli@1.1.3
或
npm install -g angular/cli@1.1.3


执行 ng - v 查看是否安装成功
angular4 需安装nodejs9.0 以下版本

安装不成功，卸载angular/cli
cnpm uninstall -g @angular/cli 
npm cache clean --force
或者
npm cache verify

创建项目
ng new projectName


创建项目，会默认使用npm安装，可通过一下命令，跳过安装依赖包，只创建基本项目代码

ng new projectName -si （简写）
或者
ng new newApp --skip-install
给项目制定样式风格：
ng new projectName -si --style=scss

创建组件

在app下创建组件

ng g component 组件名

添加第三方包

在angular-cli.json 文件中：

"styles": [
                "styles.css",
                "../node_modules/_bootstrap@4.3.1@bootstrap/dist/css/bootstrap.min.css"
            ],
"scripts": [
     "../node_modules/_jquery@3.4.1@jquery/dist/jquery.min.js",
     "../node_modules/_bootstrap@4.3.1@bootstrap/dist/js/bootstrap.min.js"
 ]


如果时cnpm安装的包，引入路径，需查看node_modules对应的包。