Angular team has released Angular 5.0 on 1st Nov 2017. They focused on most new features and bug fixes. This release continues our focus on making Angular smaller, faster, and easier to use.
Following things are New:
Angular CLI 1.5 and Angular 5.0.0
Now we are in CLI 1.5, if you install CLI 5.0, automatically you will get the angular 5.0 versions default in your package.json file in angular app.
Typescript updated to 2.4
Dynamic import expressions are a new feature and part of ECMAScript that allows users to asynchronously request a module at any arbitrary point in your program.
RXJS was updated to 5.5 version:
This recent release of RxJS fully empowers developers to avoid the side effects of the
previous import mechanism with a new way of using RxJS called “lettable operators”.
These new operators eliminate the side effects and the code splitting .
Tree shaking problems that existed with the previous ‘patch’ method of importing operators.
instead of :
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);user below like this:
import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
names = allUserData.pipe(
map(user => user.name),
filter(name => name),
);Buid optimizes.,Bundle size reduced, Speed the app
Ahead -of -time compiler
Converts your angular code before browser downloads and run it
Aot: faster rendering . few async reauests, smaller download
watch mode files ngc –watch. This command will watch your file what are the file executing
Easier to build progressvie web apps
The build optimizer does is to remove Angular decorators from your application’s runtime code. Decorators are used by the compiler, and aren’t needed at runtime and can be removed. Each of these jobs decreases the size of your JavaScript bundles, and increases the boot speed of your application for your users.
Their goal is to make this angular default option for most developers
->service workers
->small, easier and more powerfull
->Http client module feature added. from
import { HttpClientModule } from '@angular/common/http';removed map(res=> res.jon()) calls which no longer needed with http client module.
depreacted http in 5.0 version, for now you can use http in 5.0 but its depreacted. In future they may removed from angular 5.0
Angular Form validation
They added some new feature on forms.
angular 4 form validates the form when we entered the characters.
but in angular 5 they inclueded validation on blur and submit
validation and value updates on `blur` or on `submit`, instead of on every input event
Template Driven Forms
Before
<input name="firstName" ngModel>
After
<input name="firstName" ngModel [ngModelOptions]={updateOn: 'blur'}>OR
Validations will be done on submit.
Or you can add for each individual with ngModel options
<input name ="firstName" ngModel[ngModelOptions]={updateOn: 'blur'}>Or simply you can use the reactive forms
Reactive Forms
Before
new FormGroup(value); new FormControl(value, [], [myValidator])
After
new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})Changes with pipes
DepreactedI 18 Npipes module
old pipes will depreacted but you can use now. In future they may removed from angular 5.0
Increase standardization across browsers
Internationalized Number, Date & Currency
Router Life cycle Events:
New lifecycle events to the router, allowing developers to track the cycle of the router from the start
of running guards through to completion of activation. These events could be used for things such as showing a spinner on a specific router outlet when a child is updating or to measure performance of guards and/or resolvers. Allow develpers to track the routing cycle used to do things like show spinners, measures performance of guards
GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, Resolve End,
ActivatonEnd, ChildActivationEnd
An example of using these events to start/stop a spinner might look like this:
class MyComponent {
constructor(public router: Router, spinner: Spinner) {
router.events.subscribe(e => {
if (e instanceof ChildActivationStart) {
spinner.start(e.route);
} else if (e instanceof ChildActivationEnd) {
spinner.end(e.route);
}
});
}
}Angular Universal State Transfer API and DOM Support
Easily share application state between the server side and client side versions of your application.
And helping developers to perform server side rendering (SSR) of Angular applications.
By rendering your Angular applications on the server and then bootstrapping on top of the generated HTML, you can add support for scrapers and crawlers that don’t
Support JavaScript, and you can increase the perceived performance of your application.
In 5.0.0, the team has added ServerTransferStateModule and the corresponding BrowserTransferStateModule. This module allows you to generate information as part of your rendering with platform-server, and then transfer it to the client side so that this information does not need to be regenerated
This means when you fetch the data over http, by transfer data from there server, this means developers no need to make 2nd HTTP request
It supported more DOM manipulations out of the box within server side contexts, improving our support for 3rd party JS and Component libraries that aren’t server-side aware
Improvements on compiler:
They improved compiler to supports incremental compilation. Its provide faster rebuilds,
It builds with AOT, and added new feature to Decorators. And made it possible to smaller bundles
By remove the whitespaces.
Typescript Transforms
Typescript transform, making incremental rebuilds dramatically faster
You can take advantage of this by running ng serve with the AOT flag turned on.
You can take advantage of this by running ng serve with the AOT flag turned on.
ng serve –aot
This will become the default in a future release of the CLI
On this transforms, we don’t need a genDir anymore, and outDir has been changed: we are now always emitting generated files for packages in node_modules.
Preserve Whitespace
Tabs, newlines, and spaces in your templates are recreated and included in the build by the compiler.
You can now choose whether or not to preserve whitespace coming from your components and your application.
1) You can specify this as part of each component’s decorator, where it currently defaults to true.
@Component({
templateUrl: 'about.component.html',
preserveWhitespaces: false
}
export class AboutComponent {}2) specify in tsconfig.json file also: by default its true.
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"angularCompilerOptions": {
"preserveWhitespaces": false
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}Decorator Support :
Expression lowering in decorators for lambdas and the value of useValue, useFactory and data in object literals. This allows you to use values that can only be calculated at runtime in decorators for expressions that are lowered.
You can now use a lambda instead of a named function, meaning you can execute code without affecting your d.ts or your public API.
Component({
provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}-> lower expressions as part of useValue.
Component({
provider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]
})
export class MyClass {}Replace the ReflectiveInjector with StaticInjector
In order to remove even more polyfills, we’ve replaced the ReflectiveInjector with the StaticInjector.
This injector no longer requires the Reflect polyfill, reducing application size for most developers.
Before
ReflectiveInjector.resolveAndCreate(providers);
After
Injector.create(providers);
Please refer angular blog for more info:
https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced
update to angular 5.0 from this below site
If you want to update your angular app to 5.0, just go to below website and give your current version in the fields.
https://angular-update-guide.firebaseapp.com/
| Published on Web Code Geeks with permission by Ramesh Kotha, partner at our WCG program. See the original article here: Angular 5.0 New things Opinions expressed by Web Code Geeks contributors are their own. |
Nice article, Keep up the good work!
Thank You!