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

Answer 1

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.

Answer 2

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 3

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.