Nxtend Nx 11 Support and Plugin Updates
Tags: ionic, capacitor, nx, webdev
Published: 2021-01-05 13:58:08

The Nxtend plugins have been updated to support Nx 11, and with that are coming some changes. Nxtend plugin versions will now be more closely aligned with Nx, and the Ionic and Capacitor plugins will be more closely aligned with their respective projects. A lot of work have gone into the updates of each of these plugins. Features have been added, bugs have been fixed, and there were even some breaking changes. However, I think that Nxtend is the most sustainable and maintanable than ever.

Read more for details on updates and upgrades...

## Ionic React

This plugin has some more dramatic changes compared to the rest. I have determined that some changes needed to be made to ensure the longevity of this project, and that resulted in the removal of some functionality. This is a breaking change in terms of interfacing with the plugin schematics, but it should not break existing applications. In this case, a number of options have been removed from the `application` schematic.

This includes:

```
--classComponent
--style
--pascalCaseComponent
--skipFromat
--linter
--js
```

In exchange, this plugin now supports generating several of the official starter templates, such as tabs and sidemenu. These changes more closely align this plugin with the Ionic CLI and will make the project vastly more maintainable. In the future I want to support more schematics such as libraries, pages, and more, and I want to be able add these enhancements in a scalable manner.

I hope the users of this plugin will understand this decision. Removing functionality is never a good user experience, but I believe that this change will pay dividends in the future.

### Features

- add additional Ionic starter templates to application schematic
- support custom Nx layouts
- update Ionic to 5.5.2

### Bug Fixes

- fix generating an application in a sub-directory with Capacitor enabled

### BREAKING CHANGES

- remove `classComponent` option from `application` schematic (now defaults to functional components)
- remove `style` option from the `application` schematic (now defaults to CSS)
- remove `pascalCaseComponent` option from the `application` schematic (now defaults to true)
- remove `skipFormat` option from the `application` schematic (now defaults to false)
- remove `linter` option from the `application` schematic (now defaults to ESLint)
- remove `js` option from the `application` schematic (now defaults to true)

## Ionic Angular

### Features

- Nx 11 support (Nx 11 now required)
- update Ionic to 5.5.2
- add additional Ionic starter templates to application schematic
- support `none` as a unit test and e2e config for the application schematic

### Bug Fixes

- fix generating an application in a sub-directory with Capacitor enabled

## Capacitor

### Features

- Nx 11 support (Nx 11 now required)
- update Capacitor to 2.4.5
- added `cap` builder for a more generic interface with the Capacitor CLI

## Upgrading

If you are utilizing the `@nxtend/capacitor` plugin then you should upgrade this first:

```
nx migrate @nxtend/capacitor

yarn install
# or
npm install

nx migrate --run-migrations migrations.json

yarn install
# or
npm install
```

Next, you can upgrade the `@nxtend/ionic-react` plugin:

```
nx migrate @nxtend/ionic-react

yarn install
# or
npm install

nx migrate --run-migrations migrations.json

yarn install
# or
npm install
```

Or the `@nxtend/ionic-angular` plugin:

```
nx migrate @nxtend/ionic-react

yarn install
# or
npm install

nx migrate --run-migrations migrations.json

yarn install
# or
npm install
```

For information on upgrading the plugin, visit the [nxtend upgrades documentation](https://nxtend.dev/docs/nxtend/upgrades).