Is it worth to migrate from Angular 2 to Angular 4?

Question

Hello SO community and Angularians!

So, I am midway developing a huge platform in Angular 2. And I realized that many external libraries and dependencies for Angular 2 are migrating to the new Angular 4. Giving me many errors, obviously.

I could fork these libraries and use the forked versions and subscribe to main library development or, I could just upgrade to Angular 4 my project.

Questions to be answered in order to determinate if it's worth for me to migrate:

• Compatibility with Angular 2.4

I have found some adaptations to ensure compatibility with legacy, like this: https://github.com/angular/angular/commit/e99d721

• Changes app wide

Do I have to go through my whole app and start fixing things?

I mean, are main functionalities reworked in such way that I will have to review many of them?

Or, are there many build/core incompatibilities that will keep me days occupied fixing compile errors/warnings instead of developing?

I am not asking for someone to do the research for me, I am asking people that maybe already went through this process or simply know well both versions in order to give me some experience tips, clarifications, etc.

At the moment, I am doing my research here:

• https://github.com/angular/angular/blob/master/CHANGELOG.md
• http://angularjs.blogspot.it/2017/03/angular-400-now-available.html
• https://learninglaravel.net/angular-4-new-features-and-improvements

UPDATE

I just migrated to Angular 4. The link that @PierreDuc put in his answer is a very nice tool to have a decent guideline in the migration process.

I would recommend:

1. Read new features and update yourself with Angular 4. This was specially useful: https://angularjs.blogspot.it/2017/03/angular-400-now-available.html
2. Follow Angular's guideline and modify your project: https://angular-update-guide.firebaseapp.com/

I would also recommend to commit your current project, create a new branch in your dev repository and proceed with migration in that branch.

An issue that I encountered:
Input, Output and ContentChild will be imported from a wrong path.

My case:

import { Component, OnInit, OnDestro } from '@angular/core';
import { Input, ContentChild } from "@angular/core/src/metadata/directives";

Solution:

import { Component, OnInit, OnDestroy, Input, ContentChild } from '@angular/core';

Answer 1

If you check the changelog there are a couple things you need to keep in mind:

Before updating

• Ensure you don't use extends OnInit, or use extends with any lifecycle event. Instead use implements <lifecycle event>.
• Stop using DefaultIterableDiffer, KeyValueDiffers#factories, or IterableDiffers#factories
• Stop using deep imports, these symbols are now marked with ɵ and are not part of our public API.
• Stop using Renderer.invokeElementMethod as this method has been removed. There is not currently a replacement.

During the update

• Update all of your dependencies to version 4 and the latest typescript.
• If you are using Linux/Mac, you can use: npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@4.0.0 typescript@latest --save
• If you use animations in your application, you should import BrowserAnimationsModule from @angular/platform-browser/animations in your App NgModule.
• Replace RootRenderer with RendererFactory2.
• Replace Renderer with Renderer2.

After the update

• Rename your template tags to ng-template.
• Replace OpaqueTokens with InjectionTokens.
• If you call DifferFactory.create(...) remove the ChangeDetectorRef argument.
• Replace ngOutletContext with ngTemplateOutletContext.
• Replace CollectionChangeRecord with IterableChangeRecord

source

Answer 2

Angular team has announced , let's not call angular 2 or angular 4 let's call it Angular and there will be major update for every 6 months.I have faced the issue in angular v4.0.0 so change the configuration in webpack

  new webpack.ContextReplacementPlugin(
                // The (\\|\/) piece accounts for path separators in *nix and Windows
                /angular(\\|\/)core(\\|\/)@angular/,
                helpers.root('./src'), // location of your src
                {} // a map of your routes
            ),

And install @angular/animations package and import in app.module.ts file

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

@NgModule({
    imports: [
        BrowserAnimationsModule
    ]
})

I will prefer to update to latest version of angular. Angular V4.0.0 has reduced the packages weight and they have increased the performance.

Answer 3

Here is a nice 12 minutes video which demonstrates how to migrate from angular 2 to angular 4 . Said and done there are 3 basic steps to be followed :-

1) Delete old node_modules folder to avoid any references to 2.X

2) change all @angular to 4.0.0 in your package.json and do a NPM install. If possible please do clear the cache.

3) There is a high possibility you will get peer version mismatch when doing NPM install. correct it. The above video explains how to fix peer mismatch.

As said in above answers you need to implement interfaces for event etc. For some reason i did not get any issues and the events worked as it was previously in Angular 2.