尝试从Angular2迁移到Angular4时出现了问题。

尝试从Angular2切换到Angular4后，发现动画无法正常工作，因此记录了一些备忘录。

暫時先編譯一下試試看

首先要切换从Angular2到Angular4，需要先修改package.json文件。

参考Quick Start的package.json文件进行重写。
https://github.com/angular/quickstart/blob/master/package.json

...

  "dependencies": {
    "@angular/common": "~4.1.3",
    "@angular/compiler": "~4.1.3",
    "@angular/core": "~4.1.3",
    "@angular/forms": "~4.1.3",
    "@angular/http": "~4.1.3",
    "@angular/platform-browser": "~4.1.3",
    "@angular/platform-browser-dynamic": "~4.1.3",
    "@angular/router": "~4.1.3",
    ...
  },
...

暂时先尝试使用npm update，然后运行npm run build，嗯，并没有成功。出现了以下错误。

node_modules/@angular/animations/src/animation_metadata.d.ts（34,33）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/common/src/platform_id.d.ts（8,42）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/common/src/platform_id.d.ts（9,41）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/common/src/platform_id.d.ts（10,45）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/common/src/platform_id.d.ts（11,44）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/compiler/src/util.d.ts（8,36）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/core/src/animation/animation_metadata_wrapped.d.ts（12,33）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/core/src/animation/dsl.d.ts（34,33）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/core/src/errors.d.ts（9,33）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/core/src/errors.d.ts（10,43）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/core/src/errors.d.ts（11,42）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/core/src/errors.d.ts（12,43）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/core/src/errors.d.ts（13,35）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/forms/src/model.d.ts（6,28）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/forms/src/model.d.ts（10,30）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/forms/src/model.d.ts（15,30）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/forms/src/model.d.ts（20,31）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/http/src/backends/browser_jsonp.d.ts（1,33）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/platform-browser/src/dom/dom_renderer.d.ts（14,41）：错误TS1039：在环境上下文中不允许初始化程序。
node_modules/@angular/router/src/shared.d.ts（15,37）：错误TS1039：在环境上下文中不允许初始化程序。

当我搜索后，我发现结果显示在这里。
换句话说，这似乎不是一个错误，而是说明你使用的Typescript版本过旧。

再次编辑 package.json 文件中的 typescript 部分（将其版本从最新的 2.3.3 修改为 2.3.3）。

...
  "devDependencied": {
    ...
    "typescript": "2.3.3"
  },
...

尝试运行 npm update，并进行 npm run build。
这次成功编译结束了。

尝试启动服务器

运行npm start来启动服务器，服务器将平稳地启动。

看起来基本上没有任何问题，但在动画相关方面出现了问题。

导入BrowserAnimationsModule或NoopAnimationsModule报错。

错误.ts:42 错误 错误: 捕获（在承诺中）: 错误: 发现了合成属性@slideRightLeft。请在您的应用程序中包含”BrowserAnimationsModule”或”NoopAnimationsModule”之一。

所以，我先谷歌搜索一下，在这里找到了。

就是说，以下两点

在app.module.ts中进行添加

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';// <- これ

...
  imports: [
    ...
    BrowserAnimationsModule,// <- これ
  ],
  ...

安装@angular/animations

npm install --save @angular/animations@latest

让我们试一试这个。

发生错误

发生以下错误：
@angular/platform-browser/bundles/platform-browser.umd.js/animations 404（未找到）

听说文件不在那里，所以我再次搜索了一下，发现它在这里。

总之，似乎是说要在 systemjs.config.js 中添加以下内容，所以请添加。

(function(global) {
  System.config({
    ...
    map: {
      ...
      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', // <- これと
      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', // <- これと
      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js' // <- これ
    },
    ...
  });
})(this);

这样重新启动服务器。
嗯，没有出现错误，但动画不动了。

动画无法播放

去看教程试试看。

这里发生了变化。
ts
import { trigger,state,style,transition,animate,keyframes } from ‘@angular/animations’;

换句话说，@angular/core中的东西似乎被移动到了@angular/animations中。
所以首先要改变那里的内容。

嗯。运行顺利，没有问题。

以下是所見

将从Angular 2迁移到Angular 4其实不是很困难。
可能原本源代码就比较小，但也与TypeScript等版本相关，所以及早跟进最新版本可能有助于避免技术债务的拖欠。

如果有任何建议或意见，请在评论中告诉我。