What's new in Angular CLI 1.7?
Angular CLI 1.7.0 is out with some nice new features!
If you want to upgrade to 1.7.0 without pain (or to any other version, by the way), I have created a Github project to help: angular-cli-diff. Choose the version you’re currently using (1.2.1 for example), and the target version (1.7.0 for example), and it gives you a diff of all files created by the CLI: angular-cli-diff/compare/1.2.1…1.7.0. You have no excuse for staying behind anymore!
Let’s see what new features we have!
App budgets
One of the major new features is the ability to set budgets for your applications.
In .angular-cli.json
, you can now add a new section looking like:
"apps": [
{
"budgets": [
{ "type": "bundle", "name": "main", "baseline": "300kb", "warning": "30kb" },
{ "type": "bundle", "name": "races", "maximumWarning": "360kb" },
{ "type": "allScript", "baseline": "1.4mb", "maximumError": "100kb" },
{ "type": "initial", "baseline": "1.6mb", "error": "100kb" },
{ "type": "any", "maximumError": "500kb" }
],
As you can see, there are several types of budget:
bundle
, a specific bundle that you name;allScript
, all your application scripts;all
, all the application;initial
, the initial size of the application;anyScript
, any one of the script;any
, any one of the files.
The sizes are compared to the baseline
you specify.
If you don’t specify a baseline, then the baseline used is 0
.
There are several types of error:
maximumWarning
: warns you if size > baseline + maximumWarning;minimumWarning
: warns you if size < baseline - minimumWarning;warning
: same as defining the samemaximumWarning
andminimumWarning
;maximumError
: errors if size > baseline + maximumError;minimumError
: errors if size < baseline - minimumError;error
: same as defining the samemaximumError
andminimumError
.
This is a pretty cool feature, as it allows to keep the size in check without additional tooling (like bundlesize)! And these may be the only budgets your app won’t go over ;)
ng update
Good news, we have now a command to automatically update the Angular dependencies of our CLI applications.
If you use the new CLI 1.7, just run:
ng update
And all your @angular/*
dependencies will be updated to the latest stable!
This includes all the core packages in your dependencies and devDependencies,
but also the CLI itself, and other Angular packages like Material, or DevKit.
It does so recursively, so dependencies like rxjs
,
typescript
or zone.js
are automatically updated too!
The command does not have a lot of options
(only a dry-run
option and a next
option to update not to the latest stable, but to the next version),
so it’s currently an all or nothing process.
But it relies on a schematic (introduced in CLI 1.4, see our blog post),
called package-update
, that you can use directly.
In broad lines, a schematic is a package that contains tasks allowing developers
to create code (a full project, a component, a service…)
and/or to update code (like updating configuration or classes, adding a dependency, etc…).
All the “classic” tasks and blueprints of Angular CLI are in the @schematics/angular
package,
but the CLI team is gradually rolling in a few new ones to add features,
like @schematics/package-update
.
This new schematic offers 4 tasks:
@angular
to update the Angular packages@angular/cli
to update the CLI@angular-devkit
to update the DevKitall
to update all at once
The ng update
command calls the all
task of the schematic,
but you can use the schematic directly if you need or want to.
I’ve never really explained how to do so, so let’s take an example: you only want to update the Angular packages but not the CLI version.
First, install the schematic:
yarn add --dev @schematics/package-update
Add a schematics
script in your package.json
:
"scripts": {
"ng": "ng",
"schematics": "schematics"
// ...
},
and run:
yarn schematics @schematics/package-update:@angular
And you’ll only have your Angular packages (and their own dependencies) updated.
You can also specify a version to the schematic:
yarn schematics @schematics/package-update:@angular --version 5.2.3
Configuration simplifications
I usually don’t mention that a few files have changed in the project template, but for once it comes with a few simplifications and new options, so you should definitively take a careful look at all the changes, especially in the:
test.ts
file (newzone.js
import, simplified logic)polyfills.ts
file (shows how to use somezone.js
capabilities)tslint.json
file (rules added and removed)package.json
file (lots of dependency bumps)
You can easily see these changes with our angular-cli-diff
repository,
for example between an old version and the last one: angular-cli-diff/compare/1.2.1…1.7.0
E2e test suites
The e2e
task can now take a --suite
option,
to run only part of your e2e tests.
You can define suites of tests in your protractor.conf.js
configuration file:
exports.config = {
suites: {
perf: 'e2e/perf/**/*.e2e-spec.ts',
regression: [
'e2e/regression/**/*.e2e-spec.ts',
'e2e/bugs/**/*.e2e-spec.ts'
]
},
And then run:
yarn e2e --suite perf,regression
Service worker safety
Service workers are a really nice feature of modern browsers, and Angular offers a package to help you use them, introduced in Angular 5 (see our blog post). Angular CLI also has a very good support for them, as we explained in our blog post.
But they can also be tricky, as everything involving caching in our industry…
If you need to deactivate an already installed service worker,
@angular/service-worker
will include a safety-worker.js
script starting with Angular 6,
and the CLI 1.7 adds support to automatically include it in the production bundle.
You must then serve the content of this script at the URL of the service worker you want to unregister.
Angular 6 support
As Angular 6 stable is right around the corner (end of March if everything goes well), the CLI is now compatible with it, meaning you can give a try to version 6 right now!
Angular Compiler options
The Angular Compiler options are now supported!
That means if you try to use for example the fullTemplateTypeCheck
option
introduced in Angular 5.0 (see our blog post),
you can now just update the tsconfig.json
file of your CLI project,
and when you will run ng serve --aot
or ng build --prod
the option will be picked up!
TypeScript 2.5 and 2.6 support
As Angular 5.1 supports TypeScript 2.5 (see our blog post) and Angular 5.2 now supports TypeScript 2.6 (see our other blog post) , the CLI will no longer complain if you use these TS versions.
Webpack 4 support
As you may know, the CLI uses Webpack under the hood. Webpack is currently in version 3 but the version 4 should not be far away, bringing in some performance enhancements and some nice features (like the side-effect feature which should reduce our bundle sizes, better defaults, WebAssembly support, etc…).
The CLI is getting ready to switch to Webpack 4, and we should enjoy some of these nice features (reduce bundle sizes, faster builds) soon!
Better, faster, higher
The tasks have been slightly improved with the introduction of caching, so your build should be faster!
Check out our ebook, online training (Pro Pack) and training if you want to learn more!