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.