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
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:
- Read new features and update yourself with Angular 4. This was specially useful: https://angularjs.blogspot.it/2017/03/angular-400-now-available.html
- 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';
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
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.