Wellthere is no path breaking change that meansAngular 4is not a complete rewrite ofAngular 2.
Google has adaptedSEMVER(Semantic versioning) approach for it’sAngular Framework.
Why not Angular 3?
Due to misalignment of router package version . As@angular/routerwas using v3.3 already , so they switch toAngular 4Finally .
What has Changed?
Angular team has laid emphasis on making angular apps more faster,compact .
Under the Hood Changes
New changes reduce the size of the generated code for your components by around 60% in most cases.
The more complex your templates are, the higher the savings.
Faster Compilation
Better Bug fixes Alert.
Some changes in Imports/Syntax
Animationsbeing pulled out of@angular/coreso as to remove the extra code being imported into our production bundle .Though you can easliy add animation by importing {BrowserAnimationsModule}from@angular/platform-browser/animationsintoNgModule.
Renderer 2 in place of Renderer from same ‘@angular/core’.
*ngIf/else : Now you can use else clause as well .
For email validation in Angular forms
Earlier Angular 2 : pattern = “[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?”
Now Angular 4: Now just put email as an attribute to input field where you want to have email id .Here email is an angular directive not to confuse with the type=”email” which is just an HTML DOM type property .
TypeScript 2.1 and 2.2 compatibility:Finally We can use typescript 2.1 or more earlier only upto typescript 1.8 was supported.
So that’ s all has changed .
---------- someone else said: -----------
Now let me point out the major changes for you that has been introduced in Angular 4 :
TypeScript 2.1+ Required:TypeScript2.1and2.2have brought really nice features you should check out. Angular 4 now supports them (and you will soon be able to activate the new strictNullChecks TypeScript option for example).
ModuleID Removed:They have added a new SystemJS plugin which dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you.
Ahead of Time Compilation - View Engine:As you may know, in AoT mode, Angular compiles your templates during the build, and generates JS code whereas in case of Just in Time mode, this compilation is done at runtime. Now, AoT has several advantages, like you will get to know that your templates is incorrect at build time instead of having to wait at runtime, and the application starts faster (as the code generation is already done). The downside of AoT that people were facing was that the generated JS is generally bigger than the uncompiled HTML templates. So, in the vast majority of applications, the package is in fact bigger with AoT. The team worked quite hard to implement a new View Engine, that produces less code when you use the Ahead of Time compilation. The results are quite impressive on large apps, while still conserving the same performances. To give you a few numbers, on two medium apps we have, the bundle sizes went:
From 499KB to 187KB (68Kb to 34Kb after gzip)
From 192KB to 82KB (27Kb to 16Kb after gzip)
Animations:They have segregated animation package from @angular/core as a separate and dedication package. Therefore, if you don’t use animations, this extra code will not end up in your production bundles.
Template is now ng-template:The template tag is now deprecated: you should use the ng-template tag instead. It still works though. Now Angular has its own template tag: ng-template. You will have a warning if you use the deprecated template somewhere when you update to Angular 4, so it will be easy to spot them.
ngIf with else:It’s now also possible to use an else syntax in your templates as shown below:
Pipes:Angular 4 introduced a new titlecase pipe. It changes the first letter of each word into uppercase:
Http:Adding search parameters to an HTTP request has been simplified:
Earlier, it was done as:
Router:A new interface has been introduced to represent the parameters of a URL:ParamMap. Instead of usingparamsorqueryParams, you should now use param or queryParam, because they offer get() for retrieving one value and getAll() to retrieve all values (as query parameters can have multiple values for example).
I guess I have covered all the major changes that has been introduced in Angular 4. You may also refer to this officialchange logw.r.t. ng-4.
I would also recommend you to check out this video on Angular 4 that explains all the concepts of angular with examples:
If you prefer reading over video, you may go ahead with thisblogon Angular which actually covers all the basics of Angular and therefore, is good for someone who wants a head start.
Hope it helps!