Is it worth to migrate from Angular 2 to Angular 4?
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 useimplements <lifecycle event>
. - Stop using
DefaultIterableDiffer
,KeyValueDiffers#factories
, orIterableDiffers#factories
- Stop using deep imports, these symbols are now marked with
ɵ
and arenot part of our public API. - Stop using
Renderer.invokeElementMethod
as this method has beenremoved. 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.0typescript@latest --save
- If you use animations in your application, you should import
BrowserAnimationsModule
from@angular/platform-browser/animations
inyour AppNgModule
. - Replace
RootRenderer
withRendererFactory2
. - Replace
Renderer
withRenderer2
.
After the update
- Rename your
template
tags tong-template
. - Replace
OpaqueTokens
withInjectionTokens
. - If you call
DifferFactory.create(...)
remove theChangeDetectorRef
argument. - Replace
ngOutletContext
withngTemplateOutletContext
. - Replace
CollectionChangeRecord
withIterableChangeRecord
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.
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.