v6.0.0 - Hamilton
CLI Version 6 – Hamilton
Hello y'all, CLI team again.
This is a really big release for us, and listing each changes individually would be too much information for you. As such we're going to summarize the new features and changes that are included, from a higher point of view.
Also, please note that there is a blog post for version 6 here.
ng eject
The 'eject' command has been temporarily disabled, as it is not yet compatible with the new
angular.json format. The new configuration format provides further flexibility to modify the
configuration of your workspace without ejecting. Ejection will be re-enabled in a future
release of the CLI.
In the meantime, you can eject with 1.7.4, then update your project and keep using webpack to build.
ng update
A new Angular CLI command to help simplify keeping your projects up to date with the latest versions. Packages can define logic which will be applied to your projects to ensure usage of latest features as well as making changes to reduce or eliminate the impact related to breaking changes.
Configuration information for ng update can be found here
ng add
A new Angular CLI command provides package authors the ability to include dynamic setup instructions as part of the installation procedures. When a user installs a package via ng add
and that package includes a schematic named "ng-add" logic will run to set up that package within your project.
For package owners:
ng-add
is powered by a single schematic named "ng-add" within your package's schematics collection. Options will be passed through to your schematic when running the schematic to allow for further configuration options.
PWA Support
Progressive Web Apps have grown in popularity and support with all major browswers supporting service workers. Adding the configuration and assets to configure your applications as PWAs can be confusing and time consuming, to simplify the process you can now run ng add @angular/pwa --project [project-name]
to configure the supplied project as a progressive web application.
Angular Workspace
The .angular-cli.json
configuration file is replaced with angular.json
workspace file, a new file the lays the foundation for multiple projects in a single workspace.
In this file you can find every configuration item and default that Angular CLI uses. Having all configuration on file allows you to avoid typing out multiple configuration flags on each command and npm
script.
If your editor has JSON schema support, you will be able to see auto-completion with suggestions and defaults for each property in the angular.json
file.
Read more about the Angular Workspace here.
Build improvements
The build system Angular CLI uses has been overhauled to be faster and more easily configurable.
We have upgrade to Webpack 4 which comes with several performance and bundling improvements.
Angular Workspaces will also allow you to configure each build exactly the way you need instead of using lengthy npm
scripts:
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
Multi application support
Angular CLI now supports multiple individual applications within one workspace, each with separate configurations and defaults.
To create another app you can use the following command:
ng generate application my-other-app
The new application will be generated inside projects/my-other-app
.
Now we can serve
either application by passing the project name with the command:
ng serve my-other-app
Library Support
Angular CLI now comes with library support via ng-packagr plugged into the build system we use in Angular CLI, together with schematics for generating a library.
You can create a library in a existing workspace by running the following commands:
ng generate library my-lib
You should now have a library inside projects/my-lib
. It contains a component and a service inside a NgModule.
Read more about library creation here.
Schematic Defaults
Default values for schematics can be configured for any schematic property in any schematic collection. In previous versions the Angular CLI only provided access to configure defaults for certain properties of the default schematics.
Values can be provided at the root level:
// angular.json
{
...
"schematics": {
"@schematics/angular:component.inlineTemplate": true
}
}
Or at the project level:
// angular.json
{
"projects": {
"my-project": {
"schematics": {
"@schematics/angular:component.inlineTemplate": true
}
}
}
}
Or even at the global level, same as at the root level, except in a file located here:
[homedir]/.angular-config.json
Smart Defaults
Smart defaults is a new feature within Schematics which grants authors of schematics more control about how their values are parsed. An example is to specify how arguments (unnamed options) are parsed from the command line.
This example will set the value of the name option to the first argument. As you see defined in the $default
value.
"name": {
"type": "string",
"description": "The name option.",
"$default": {
"$source": "argv",
"index": 0
}
}
Breaking changes
The allowOutsideOutDir
option in assets has been removed.
The serve
option in ng e2e
is replaced with devServerTarget
. It allows you to specify which server target to use, and if it is set to empty string nothing will be served.
The completion
command has been removed as the functionality no longer aligns with this version.
The environment
option in build related commands is replaced with fileReplacements
, please see the wiki for how it can be used.
Special thanks to everyone who participated in this release:
Charles Lyding, Filipe Silva, Hans Larsen, Mike Brocchi, Alan Agius, Rahul Bhooteshwar, Cyrille Tuzi, Noel Mace, Christofer Steingrefer, Vikram Subramanian, Sébastien Cevey, Maxim Salnikov, Jose E, Cédric Exbrayat, sergey.sokolov, Yaroslav Admin, Will 保哥, Sylvain Dumont, Suguru Inatomi, Steven Enten, Stephen Fluin, Shai Reznik, PhilippeMorier, Miles Malerba, Michael Prentice, Matthias Lischka, Luke Chatton, Luis Confraria, Kasidit Iamthong, Jiaren Liu, GerbetMikhaël, George Kalpakas, Evan Carroll, Danny, Brandon, Alan