Angular 7 new features
CLI Prompts:-
Angular is continuously increasing new features focusing on new tools and improvements.
While creating apps through CLI its asks for ? Would you like to add Angular routing? (y/N) like below.
Next when click Y it will add routing to the project.
Next asks for ? Which stylesheet format would you like to use? (Use arrow keys) here we can select the list of style sheet format we need to use by using arrow keys up and down. If you don’t want to select none of them just press Enter, It will generate the application.
CLI prompts are customizable! Add we can add a schematic. json using the Schematic CLI and you can tell the Angular CLI which prompts to execute!
Any package publishing Schematics can take advantage of them by adding an x-prompt key to a Schematics collection.
"routing": {
"type": "boolean",
"description": "Generates a routing module.",
"default": false,
"x-prompt": "Would you like to add Angular routing?"
},
Application Performance
Earlier developers were including reflect metadata in polypill production, Actually this is needed only in Development.
In Order to fix this in new angular v7 will automatically remove this from your polyfills.ts file. It will add in at the time of application build in Jit Mode and removes from production builds by defaults.
New applications will warn when the initial bundle is more than 2MB and it will throw error at 5MB. These budgets can be easy to change in angular.json.
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]
Angular Material & the CDK
Angular material in angular 7 updated and can show visual effect updated. They have added Virtual Scrolling and Drag and Drop by importing the DragDropModule and ScrollingModule.
Dependency Updates In Angular 7
TypeScript 3.1 support
RxJS 6.3 is added
Added Support for Node v10
Angular Elements with Slot
Angular 6 enabled the feature of ViewEncapsulation.ShadowDom, which support angular elements support content projection using web standards for custom elements.
New standard HTML element introduced by Web Component Specification is slot. This enables components with a template.
@Component({
selector: 'sd-card',
template: `
<header>
<slot name="card-header"></slot>
</header>
<slot></slot>`,
encapsulation: ViewEncapsulation.ShadowDom,
styles: []
})
export class CardComponent {
}
That can later be used as an Angular Element like this:
<sd-card>
<span slot="card-header">My crad Header</span>
<p>My Card info...</p>
</sd-card>
New ng-compiler
New Ng-compiler provided eight-phase compilation and reduced a large app size around 2 times. Advanced New Compiler is capable of 8-phase rotating AOT compilation.
Application can reduce a massive reduction of 95-99% in bundle size.
Router Updates
Router has been updated and will give new warnings if you try to trigger a navigation outside of the Angular zone and it won't work.
Deprecations
Its quite common in major releases, few things have been deprecated. <ngForm> is deprecated and replaced with <ng-form>
CLI Prompts:-
Angular is continuously increasing new features focusing on new tools and improvements.
While creating apps through CLI its asks for ? Would you like to add Angular routing? (y/N) like below.
Next asks for ? Which stylesheet format would you like to use? (Use arrow keys) here we can select the list of style sheet format we need to use by using arrow keys up and down. If you don’t want to select none of them just press Enter, It will generate the application.
CLI prompts are customizable! Add we can add a schematic. json using the Schematic CLI and you can tell the Angular CLI which prompts to execute!
Any package publishing Schematics can take advantage of them by adding an x-prompt key to a Schematics collection.
"routing": {
"type": "boolean",
"description": "Generates a routing module.",
"default": false,
"x-prompt": "Would you like to add Angular routing?"
},
Application Performance
Earlier developers were including reflect metadata in polypill production, Actually this is needed only in Development.
In Order to fix this in new angular v7 will automatically remove this from your polyfills.ts file. It will add in at the time of application build in Jit Mode and removes from production builds by defaults.
New applications will warn when the initial bundle is more than 2MB and it will throw error at 5MB. These budgets can be easy to change in angular.json.
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]
Angular Material & the CDK
Angular material in angular 7 updated and can show visual effect updated. They have added Virtual Scrolling and Drag and Drop by importing the DragDropModule and ScrollingModule.
Dependency Updates In Angular 7
TypeScript 3.1 support
RxJS 6.3 is added
Added Support for Node v10
Angular Elements with Slot
Angular 6 enabled the feature of ViewEncapsulation.ShadowDom, which support angular elements support content projection using web standards for custom elements.
New standard HTML element introduced by Web Component Specification is slot. This enables components with a template.
@Component({
selector: 'sd-card',
template: `
<header>
<slot name="card-header"></slot>
</header>
<slot></slot>`,
encapsulation: ViewEncapsulation.ShadowDom,
styles: []
})
export class CardComponent {
}
That can later be used as an Angular Element like this:
<sd-card>
<span slot="card-header">My crad Header</span>
<p>My Card info...</p>
</sd-card>
New ng-compiler
New Ng-compiler provided eight-phase compilation and reduced a large app size around 2 times. Advanced New Compiler is capable of 8-phase rotating AOT compilation.
Application can reduce a massive reduction of 95-99% in bundle size.
Router Updates
Router has been updated and will give new warnings if you try to trigger a navigation outside of the Angular zone and it won't work.
Deprecations
Its quite common in major releases, few things have been deprecated. <ngForm> is deprecated and replaced with <ng-form>
No comments :
Post a Comment