Angular 6 officially released

Angular 6 has been officially released! This major release focuses less on the underlying framework and more on the toolchain and making it easier to move Angular forward quickly in the future.

As part of the release, we synced the main framework packages (@angular/core, @angular/common, @angular/compiler, etc), Angular CLI, and Angular Material + CDK. All are now released as 6.0.0. We sorted out the compatibility between them. Minor update patches will be released based on the needs of the project.

The full list can be viewed through the changelist for each project: framework , material+cdk , cli .

1. of the update

ng update <package> is a new CLI command that parses package.json and uses its knowledge of Angular to update your app. Please check the upgrade manual to see its behavior.

Not only can ng update be used to help you adapt the correct versions of dependencies and keep them in sync, but third parties can also use schematics to provide update script commands. If one of your dependent libraries provides the ng update syntax, you can automatically update your code when it has a major update.

ng update doesn't replace your package manager, but uses npm or yarn to manage dependencies under the hood, then update dependencies, ng update will make the necessary transformations for your project.

For example, ng update @angular/core will update all Angular framework packages like RxJS and TypeScript, and run the schemas available in those packages to keep them up to date. As part of the command, we will automatically install rxjs-compat into your app for smooth migration.

We expect more libraries and packages to support the ng update syntax in the future, and we've heard that some enterprise library teams are planning to use ng update to automatically update important changes to reduce development time.

To learn more about how to use ng update , to start learning how to create your own ng update syntax, you can refer to the entry of rxjs's package.json, which is associated with collection.json.

2. of add

Another new CLI command is ng add, which makes it easier for you to add new packages. ng add will use your package manager to download new dependencies and run the install script (implemented in schematics). Update the project through the configuration file. Add additional dependencies (such as polyfills, etc.), or execute package-specific initialization code.

You can try the following command on your new project created with ng new:

ng add @angular/pwa, turn your app into a PWA project by adding a manifest file and service worker to it
ng add @ng-bootstrap/schematics, add ng-bootstrap to the project
ng add @angular/metarial, installs and sets up Angular Metarial, and uses ng generate to add new startup components.
ng add @clr/angular@next, to install and setup Clarity from VMWare.
ng add @angular/elements, installs document-register-element.js and dependencies for Angular elements. Since ng add is based on schematics and Npm, we hope that the library and community will support us in building an ecosystem of ng add support packages.

Check out Angular Metarial's ng add schemetic for an example to help you get started creating your own ng add.

3. Angular Elements

The first version of Angular Elements allows you to register Angular Component as a custom element in your existing Angular application. We use this extensibility in the angular.io content management system to support dynamics by embedding HTML. This replaces manually starting Angular components.

Check out Registering an Angular Component as a custom element , or learn more about Angular Elements .

A community member has already published an Angular Elements Quick Start, which we highly recommend for your reference.

4. Angular Metarial + CDK component

The biggest update is the addition of a new tree component to display hierarchies, following the pattern of the table component, the CDK supports the core tree directive, Angular Metarial provides a consistent experience through Metalal Design, and we recently provided a piece about it that can See ( video , slide ). The new tree component comes in two flavors: (Metarial style) mat-tree and the undecorated version cdk-tree

In addition to the tree component, we also provide badge and bottom-sheet-components . Badges are used to display small help information. For example, the number of unread items, etc. Bottom-sheet is a mobile-specific dialog box, usually used to provide options for a series of actions.

@angular/cdk/overlay is a very useful package in the CDK, in the new v6 release it contains new positioning logic to help pop up in various scenarios.

5. Angular Metarial Starter Components

Once you do ng add @angular/metarial to add Metarial to your project, you will get 3 new starter components:

Metarial SideNav You can now generate a toolbar and sidebar navigation starter component that includes the app name.

implement

ng generate @angular/material:material-nav

Such a starter component will be generated.

Metaial Dashboard You can generate a list of cards with dynamic tables.

implement

ng generate  @angular/material:material-dashboard

Such a component can be generated.

Material Data Table You can generate data table components with pre-configured datasources that support sorting and pagination.

implement

ng generate  @angular/material:material-table

will generate such a component.

See more material here: Angular Material Schematics

6. CLI Workspaces

Angular CLI v6 now supports workspaces that contain multiple projects, such as multiple applications or libraries. CLI projects will now use angular.json instead of .angular-cli.json for configuration and build.

Each CLI can have multiple projects, each project has a target, and each target has a configuration file.

{
   "projects": {
      "my-project-name“： {
             "projectType": "application",
             "architect": {
                      "build": {
                            "configurations”: {
                                    "production": {},
                                    "demo": {},
                                    "staging": {},
                                                      }
                                  },
                       "serve": {},
                       "extrace-i18n": {},
                       "test": {},
                              }

                                    },
              "my-project-name-e2e": {}
                    }
}

For more information, see: New Configuration File.

Library Support A widely requested CLI feature is now supported: creating and building libraries. I am honored to introduce it.

ng generate  library <name>

This command will create a library project in your CLI workspace and configure it for testing and building.

For more information see: Creating Libraries with Angular CLI

8. Tree Shakable Provider

To make your app smaller, we changed from a module reference service to a service reference module. This allows us to just package the services that are injected into the code from the module.

before

@NgModule({
   ...
   providers: [ MyService ]
})
export class AppModule {}

Among them, the definition of service

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

@Injectable()
export class MyService {
   constructor() {}
}

future usage

No need to reference in the module.

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

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

For more information, see Dependency Injection.

9. Animation performance improvements

We've updated our animation implementation to no longer require the Web animations polyfill , which means you can remove this polyfill from your app and save about 47K of packed size while improving performance in Safari.

10. RxJS v6

Angular has been upgraded to RxJS v6. RxJS, a dependency of Angular, officially released v6 a few weeks ago. RxJS v6 brings several important updates and also provides the backward compatibility library rxjs-compat to keep your app working.

RxJS has been reorganized for Tree shakable, ensuring that only the parts of RxJS that are used are packaged into the application.

If you use ng update, your app will keep working, you can get more info on migrating from RxJS 5.5 to 6 .

11. Long-term support

We've extended our long-term support terms to all major releases.

Previously, we stated that only v4-v6 were long-term supported versions. But in order to make it easier to upgrade from one major version to the next, and to give larger projects more time to plan their upgrades, we decided to expand to support all major versions starting with v4.

Each major release will be supported for 18 months, including 6 months of active development and 12 months of critical bug fixes and security patches.

For more information, see Angular Versions and Releases.

12. How to update to 6.0.0

Visit update.angular.io for information and guidance on upgrading your application.

An upgrade usually consists of 3 steps and can benefit from the ng update tool.

upgrade @angular/cli
Upgrading Angular Framework Packages
Upgrading other dependencies It is especially important for us to keep developers up to date with the latest version, so if you have any suggestions please let us know.

13. How is Ivy?

Regarding our next generation rendering engine, Ivy, Ivy is currently in development and not yet part of v6. Over the next few months, we'll be announcing a preview of Ivy.