bug: Angular 12 not compatible with Ionic 6.1.9

[blackholegalaxy]

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

While upgrading a fully functional project using router and ionic 5 from angular 11 and ionic 5 to angular 12 and ionic 6, following error occurs.

Please note keeping ionic 5 along with angular 12 doesn't produce problem. But we need some ionic 6 features for our project.

ERROR Error: Uncaught (in promise): TypeError: componentFactory.create is not a function
TypeError: componentFactory.create is not a function
    at ViewContainerRef.createComponent (core.js:23191:1)
    at IonRouterOutlet.activateWith (ionic-angular.js:3437:57)
    at ActivateRoutes.activateRoutes (router.js:2163:1)
    at router.js:2114:1
    at Array.forEach (<anonymous>)
    at ActivateRoutes.activateChildRoutes (router.js:2113:1)
    at ActivateRoutes.activate (router.js:2034:1)
    at MapSubscriber.project (router.js:2019:1)
    at MapSubscriber._next (map.js:29:1)
    at MapSubscriber.next (Subscriber.js:49:1)
    at resolvePromise (zone.js:1262:1)
    at resolvePromise (zone.js:1216:1)
    at zone.js:1329:1
    at push.6026._ZoneDelegate.invokeTask (zone.js:443:1)
    at Object.onInvokeTask (core.js:28679:1)
    at push.6026._ZoneDelegate.invokeTask (zone.js:442:1)
    at push.6026.Zone.runTask (zone.js:214:1)
    at drainMicroTaskQueue (zone.js:632:1)

Expected Behavior

No error while upgrading to angular 12 on a project using routing and ionic 6 since packages are indicated to be compatible.

Steps to Reproduce

ionic start ionic6 tabs --cordova --no-deps

Delete Tabs module and point to Explore container component as the only route, adding component in app.module.

Change angular 14 for angular 12 which is stated to be compatible with on ionic page.

Error occurs.

Code Reproduction URL

https://github.com/blackholegalaxy/repro-ionic-bug

Ionic Info

$ ionic info

Ionic:

Ionic CLI : 6.19.1 (C:\Users\X\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.1.9
@angular-devkit/build-angular : 12.2.17
@angular-devkit/schematics : 13.3.7
@angular/cli : 12.2.17
@ionic/angular-toolkit : 6.1.0

Cordova:

Cordova CLI : 11.0.0
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

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

System:

NodeJS : v16.13.2 (C:\Program Files\nodejs\node.exe)
npm : 8.1.2
OS : Windows 10

Additional Information

The error points to ionic-angular file which tries to land in angular 14 else block.

[Pierlu1586]

Hi! We have the same issue.

[sean-perkins]

Thanks for reporting this issue! In in the interim downgrade your application to @ionic/angular@6.1.8. I'll look into a fix, so this can be patched/fixed for 6.1.10.

Thanks!

[blackholegalaxy]

Downgrading to 6.1.8 seems to fix the problem. Will wait for 6.1.10

[sean-perkins]

Can either of you test with this dev-build and let me know if the problem is resolved?

6.1.10-dev.11654882801.1eb62ed9

I've validated it works with:

• Angular 14 projects
• The reproduction provided (Angular 12)

Appreciate the extra testing/second set of eyes.

Thanks!

[blackholegalaxy]

As far as I was able to test on one of my repository, it seems to fix the problem :)