The update also includes framework packages (@angular/core, @Angular /common, @Angular/Compiler, etc.), Angular CLI, Angular Material + CDK, mainly to address compatibility issues. Patched versions of these projects will be released based on project requirements.

Ng update is a new CLI command that analyzes your package.json and recommends updates to your application based on what you know about Angular.

Ng Update helps you use the correct version of your dependencies, synchronizes your dependencies with your application, and provides script updates from third parties when using Schematics. If one of your dependencies provides ng Update Schematic, it automatically updates the code when it makes a major change!

Instead of replacing your package manager, ng Update manages dependencies behind the scenes using NPM or YARN. In addition to updating and monitoring dependencies, ng Update will also make changes to your project as necessary.

For example, the ng update @angular/core command will update all Angular packages as well as RxJS and FTypeScript. It will also run schematics available in those packages to keep versions up to date. Also, this command automatically installs RxJs-compat into your application to make RXJS V6 smoother.

Another new CLI command, ng add , will make it easier to add new functionality to your project. Ng Add uses the package manager to download new dependencies and invoke installation scripts that update your application by changing configurations and adding additional dependencies, such as Polyfills.

You can try the following actions in the new NG New app:

  • Ng add @angular/ pWA: Add an app manifest and service worker to turn your app into a PWA.

  • Ng add @ng-bootstrap/schematics: Add ng-bootstrap to your app.

  • Ng add @angular/ Material: Install and set the Angular Material and theme, and register the new initial component into ng Generate.

  • Ng add@clr /angular@next: Install and setup VMWare Clarity.

The first version of Angular Elements, which is widely used in the Angular. IO content management system, focused on launching Angular components in existing Angular applications by registering them as Custom Elements. It is embedded in HTML to dynamically launch system functions.

Most notably, tree controls for displaying hierarchical data follow the pattern of data table components. CDK contains the core directives of the tree, while Angular Material provides the same experience as the top-level Material Design.

At the same time, there was an update to the badge and the component of the bottom menu bar, which displays small but useful information, such as the number of unread messages.

Currently, @angular/ CDK/Overlay packages are one of the most powerful infrastructures in CDK, and you can use them to build your own UI libraries.

Once you run ng Add @Angular/Material and add material to the existing application, you can generate three new initial components.

The Material Sidenav is an initial component with a toolbar with an application name and side navigation that responds based on breakpoints.

Run:

ng generate @angular/material:material-navCopy the code

The following components are generated:

The Material Dashboard is a startup component that contains a dynamic grid list.

Run:

ng generate @angular/material:material-dashboardCopy the code

The following components are generated:

The Material Data Table has a datasource preconfigured for sorting and paging.

The diagram below:

CLI V6 now supports multi-project workspaces, such as multiple applications or libraries, and CLI projects build and configure projects with angular.json instead of angular-cli.json.

Each CLI workspace has a project, each project has a target, and each target can have a configuration.

angular.json:
{
  "projects": {
    "my-project-name": {
      "projectType": "application",
      "architect": {
        "build": {
          "configurations": {
            "production": {},
            "demo": {},
            "staging": {},
          }
        },
        "serve": {},
        "extract-i18n": {},
        "test": {},
      }
    },
    "my-project-name-e2e": {}
  },
}Copy the code

Next comes the most important feature of the CLI: support for creating and building libraries.

ng generate library <name>Copy the code

This command creates a library in the CLI workspace and configures it for testing and building.

To make your application smaller, we changed the service reference module to the module reference service, which allows us to build only the services injected in the module.

Before:

app.module.ts:

@NgModule({
  ...
  providers: [MyService]
})
export class AppModule {}Copy the code
my-service.ts:

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
  constructor() { }
}Copy the code

In the future, ngModules no longer need references:

my-service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MyService {
  constructor() { }
}Copy the code

After the update, web animation polyfill will no longer be required. This means you can remove this polyfill from your application, saving about 47KB of memory while improving animation performance in Safari.

Angular 6 will also support RxJS V6, which was released last month. RxJS V6 comes with a backward compatible package, RxJS-Compat, which can keep your applications running.

Angular says it is extending the long term support to all major releases.

Previously only V4 and v6 were LTS releases, but to make it easier for developers to move from one major release to another, and to give projects enough time to plan updates, the Angular team says it will expand long-term support for all major releases starting with V4.

Each major release is supported for 18 months, with the first 6 months of active development and the next 12 months of bug fixes and security patches.

Please visit the Update Guide for update guidance.

Updates generally follow 3 steps, please use the new NG Update tool:

  • Update @angular/cli

  • Update your Angular framework package

  • Update other dependencies

Original link:

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

Update Guidelines:

https://update.angular.io/

Angular official announcement:

https://angular.io/guide/releases

Top of the Front is InfoQ’s vertical community focused on big front end technologies. Keep up with the trend of The Times, share first-line technology, welcome to pay attention to.

PWA, Web Frameworks, UI & Animation, Node… What’s next for the big front end? What is the value and growth path of a front-end engineer? GMTC2018, from Google, Facebook, BAT and other 60+ domestic and foreign front-line leaders, will meet you face to face to discuss the latest technology trends and practices in the big front-end field, want to promotion and salary quickly come! Scan the QR code below or click “Read the article” to learn more about the conference!

At present, 20% off the sale of the conference, more preferential group purchase, ticket consultation: 18514549229 (same as wechat)