CODEWITHSUNDEEP
migrationangular
SrAxi
SrAxi

Reputation: 20005

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

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:

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

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:

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';

Upvotes: 27

Views: 10171

Answers (2)

Poul Kruijt
Poul Kruijt

Reputation: 71921

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

Upvotes: 25

Vignesh
Vignesh

Reputation: 2386

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.

Upvotes: 2

Related Questions