feat: support Angular 14

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

In Angular 14, there is a breaking change that removes the deprecated ComponentFactoryResolver, specifically from router outlets. Since @ionic/angular currently uses this to in ion-router-outlet, Angular applications using Ionic will stop working once upgraded to version 14. Ionic will need to update to support the next version of Angular (currently in RC).

Describe the Use Case

Allow users to continue staying current with Angular releases.

Describe Preferred Solution

Remove references to deprecated resolvers. But whatever you think is best 😃

From Angular upgrade guide:

Remove the resolver from RouterOutletContract.activateWith function and the resolver from OutletContext class since factory resolvers are no longer needed.

Describe Alternatives

Unknown.

Related Code

No response

Additional Information

Link to Angular deprecation info: https://angular.io/api/core/ComponentFactoryResolver#description

Angular v14 Upgrade Guide: https://update.angular.io/?l=3&v=13.0-14.0

Stack trace:

E/Capacitor/Console: File: http://localhost/polyfills.js - Line 1349 - Msg: Uncaught Error: Uncaught (in promise): TypeError: resolver.resolveComponentFactory is not a function
    TypeError: resolver.resolveComponentFactory is not a function
        at IonRouterOutlet.activateWith (http://localhost/vendor.js:31027:32)
        at ActivateRoutes.activateRoutes (http://localhost/vendor.js:170835:28)
        at http://localhost/vendor.js:170779:12
        at Array.forEach (<anonymous>)
        at ActivateRoutes.activateChildRoutes (http://localhost/vendor.js:170778:25)
        at ActivateRoutes.activateRoutes (http://localhost/vendor.js:170842:14)
        at http://localhost/vendor.js:170779:12
        at Array.forEach (<anonymous>)
        at ActivateRoutes.activateChildRoutes (http://localhost/vendor.js:170778:25)
        at ActivateRoutes.activateRoutes (http://localhost/vendor.js:170842:14)
        at http://localhost/vendor.js:170779:12
        at Array.forEach (<anonymous>)
        at ActivateRoutes.activateChildRoutes (http://localhost/vendor.js:170778:25)
        at ActivateRoutes.activate (http://localhost/vendor.js:170679:10)
        at http://localhost/vendor.js:170662:99
E/Capacitor/Console: File: http://localhost/ - Line 344 - Msg: Uncaught TypeError: Converting circular structure to JSON
        --> starting at object with constructor 'Zone'
        |     property '_zoneDelegate' -> object with constructor '_ZoneDelegate'
        --- property 'zone' closes the circle
E/Capacitor/Console: File: http://localhost/polyfills.js - Line 1349 - Msg: Uncaught Error: Uncaught (in promise): TypeError: resolver.resolveComponentFactory is not a function
    TypeError: resolver.resolveComponentFactory is not a function
        at IonRouterOutlet.activateWith (http://localhost/vendor.js:31027:32)
        at ActivateRoutes.activateRoutes (http://localhost/vendor.js:170835:28)
        at http://localhost/vendor.js:170779:12
        at Array.forEach (<anonymous>)
        at ActivateRoutes.activateChildRoutes (http://localhost/vendor.js:170778:25)
        at ActivateRoutes.activateRoutes (http://localhost/vendor.js:170842:14)
        at http://localhost/vendor.js:170779:12
        at Array.forEach (<anonymous>)
        at ActivateRoutes.activateChildRoutes (http://localhost/vendor.js:170778:25)
        at ActivateRoutes.activateRoutes (http://localhost/vendor.js:170842:14)
        at http://localhost/vendor.js:170779:12
        at Array.forEach (<anonymous>)
        at ActivateRoutes.activateChildRoutes (http://localhost/vendor.js:170778:25)
        at ActivateRoutes.activate (http://localhost/vendor.js:170679:10)
        at http://localhost/vendor.js:170662:99
E/Capacitor/Console: File: http://localhost/ - Line 344 - Msg: Uncaught TypeError: Converting circular structure to JSON
        --> starting at object with constructor 'Zone'
        |     property '_zoneDelegate' -> object with constructor '_ZoneDelegate'
        --- property 'zone' closes the circle

Ionic Info:

mshark:topdecked-unified-patch lincoln$ ionic info

Ionic:

   Ionic CLI                     : 6.19.0 (/Users/lincoln/.nvm/versions/node/v14.19.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.1.1
   @angular-devkit/build-angular : 14.0.0-rc.1
   @angular-devkit/schematics    : 14.0.0-rc.1
   @angular/cli                  : 14.0.0-rc.1
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 3.5.1
   @capacitor/android : 3.5.1
   @capacitor/core    : 3.5.1
   @capacitor/ios     : 3.5.1

Utility:

   cordova-res : not installed globally
   native-run  : 1.6.0

System:

   NodeJS : v14.19.0 (/Users/lincoln/.nvm/versions/node/v14.19.0/bin/node)
   npm    : 6.14.16
   OS     : macOS Monterey

[sean-perkins]

The fix has been merged and will be available as part of this week’s release (6.1.9).

Thanks!

[sean-perkins]

Here’s an updated build that should work on both your Angular 13 projects and work after updating the project to Angular 14:

6.1.9-dev.11654275237.1b595be3

Note: Delete the ./angular cache folder and the running Angular App and re-start the dev server after installing.

Also note: Not all new Angular 14 features are currently supported.

The tricky thing with libraries supporting multiple major versions of a dependency, is how that dependency is configured. We unfortunately cannot update our own dependencies to Angular 14, otherwise the Angular CLI will not build apps on < 14 and using Ionic, which is not desired.

We also want to add support for the new features that Angular has included, but many of those new features are new providers/classes/etc. that are not available in the peer dependency that we are required to install. We typically support the current major version and the previous major version for each major version of Ionic. So for instance, v6 of Ionic supports v12 and v13 of Angular. This isn’t a hard rule of thumb, but we are discussing the tradeoffs of only supporting Angular 14+ for Ionic 7.

Standalone components are a “dev preview” feature of Angular 14, that allows you to create a component without declaring/exporting it from an NgModule. This also allows you to have Angular routes that lazy load a component, instead of a whole module. The goal of that feature was to lower the burden of creating modules and the learning curve for new devs in the eco-system. The benefits of the feature to established applications that use SCAM (single component angular modules) or similar, is minimal.