What's new in Angular CLI 11.2?

Angular CLI 11.2.0 is out!✨

If you want to upgrade to 11.2.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 (11.0.0 for example), and the target version (11.2.0 for example), and it gives you a diff of all files created by the CLI: angular-cli-diff/compare/11.0.0…11.2.0. It can be a great help along with the official ng update @angular/core @angular/cli command. You have no excuse for staying behind anymore!

Let’s see what we’ve got in this release.

Tailwind CSS integration

Tailwind is a popular CSS framework nowadays. It has a different philosophy than Bootstrap or Material. Tailwind comes with tons of utility classes that you can add to your elements:

<button class="text-base font-medium rounded-lg p-3">Hello</button>

or that you can combine together to create your own styles, using @apply:

@tailwind base;
@tailwind components;
.btn {
  @apply text-base font-medium rounded-lg p-3;
}

And you can of course customize a lot of things by adding a tailwind.config.js configuration to your project. But then, when you build your application, you need something to apply these customizations, understand @tailwind, @apply and others, and also remove all the unused CSS. As there are thousands of utility classes, you would ship way too much CSS to your users otherwise.

The way to do that in a project is to use postcss. The CLI already uses it, but you have no easy way to customize what postcss does in a CLI application (without entering the dark realm of custom webpack config, partially supported by the CLI, and always a joy to figure out).

CLI v11.2 fixes it, and now supports Tailwind out of the box! If the CLI detects a tailwind configuration in your project, postcss will automatically use the tailwind plugin with this config.

To give it a try in a v11.2 CLI project:

# install tailwind
npm install --save tailwindcss
# create `tailwind.config.js`
npx tailwindcss init
# update a component with the CSS above
# and disable view encapsulation due to the global nature of Tailwind CSS
# now try it! 🚀
ng serve

This was one of the most popular requests for the CLI, so it should make a lot of people happy.

npm 7 warning

npm v7 is now generally available. It comes with new features (check out the announcement blog) but also with a few breaking changes, especially with peer dependencies. A few issues are still unresolved on npm side, and it leads to a buggy behavior when using npm v7 with the CLI.

The recommended way to workaround this is to use npm v6, or add --legacy-peer-deps to your npm install command (it also works with the feared but always powerful --force).

In the meantime, you’ll see a warning message when using npm v7 with the CLI for the new, add and update commands:

The Angular CLI temporarily requires npm version 6 while upstream issues are addressed.

Please install a compatible version to proceed (`npm install --global npm@6`).
For additional information and alternative workarounds, please see https://github.com/angular/angular-cli/issues/19957#issuecomment-775407654

This is of course temporary, and the warning will go away when the CLI is able to work with npm v7 (tracked by the issue mentioned in the warning).

ng add

ng add is now a bit more verbose to let you know what it does by logging which version was installed. It also displays a pretty spinner while working.

> ng add ngx-valdemort
ℹ Using package manager: npm
✔ Found compatible package version: ngx-valdemort@5.0.0.
✔ Package information loaded.
✔ Package successfully installed.

You can check what’s new in the framework for this v11.2 release in our other blog post. That’s all for this release, the next one will be v12. Stay tuned!

All our materials (ebook, online training and training) are up-to-date with these changes if you want to learn more!