Preface: It is said that ng is expensive to get started, but it is great to build a Web application once you get started. Less than 20 hours ago, Angular 9 was released on Angular’s github, and Angular Conf will be released on February 8th at 2am. What’s new when it’s officially released? This article gives you a preview

1. Ivy !!!!

The most important thing is the new rendering engine Ivy. We used the preview version of Ivy in the earlier version of NG, but it was not used in the project for stability reasons. The new rendering engine will bring us a huge performance improvement. The official website describes it as follows:

Ivy is the code name for Angular’s next-generation compilation and rendering pipeline. With the version 9 release of Angular, the new compiler and runtime instructions are used by default instead of the older compiler and runtime, known as View Engine.

Ivy is the name of Angular’s next-generation compiler and rendering pipeline. With The release of Angular 9, the new rendering Engine and runtime directives will be the default instead of earlier versions of View Engine.

It’s not as big a change as it looks, but Ivy does a lot Of things that you can’t see when you build ng apps using template, such as a smaller boundle volume, AOT (Ahead Of Time) as the default, In the previous development process of the project, the development process of using NG Serve was actually Just In Time compilation, which benefited from the fast compilation speed and page view refresh after updating files. However, the disadvantage is that when using ng build-prod, we will find a lot of parameter problems that are difficult to find in development. Now using AOT as the default option, and Ivy is faster compilation effect, can provide us with more stable and more efficient development efficiency in the development process.

2. Template type Checking Template type checking

Ng can now check binding data types in templates, expression data types in templates, and feedback directly from the console like TS. Currently, three modes are supported and all can be modified in tsConfig files.

Let’s start with the following example: ng 8.3

@Component({
    selector: 'app-user',
    templateUrl: '<p>user name is {{ name }}</p>',})export class UserComponent implements OnInit {
    @Input() name: string;
    ngOnInit() {}
}
// The User component indicates that the Input property type is string, and the User's name is expressed there


// Then used in its parent component
@Component({
    selector: 'app-root',
    templateUrl: '<app-user [name]="user.age"></app-user>',})export class AppComponent {
    user = {
        name: Royal Flower,
        age: 10
    };
}
Copy the code

At this point, if you run the project, you will find that there is no error, but the number type is not passed to the string type, which can easily inadvertently cause parameter passing problems during actual development.

Now check template by setting “strictTemplates”: true, and terminal will return a type error.

3. Static regression is optional in @viewChild

Return @viewChild (‘user’, {static: false}) userElement: ElementRef

;

Emmmm: true (static: true) emmmm: true (ng6

conclusion

Native Typescript support, RXJS makes me a fan of Angular, and the powerful CLI is handy for creating components, pipes, and Services.