bug: angular, calling flush in tests causes ionic components to fail to load

[studioromeo]

Bug Report

Using @angular/cdk/scroller and ionic appears to work fine in the browser but in jasmine tests throw chunk errors. It should be noted the test passes but chunk errors are seen in the output.

From my debugging the following has to happen for this bug to appear:

• In the spec testbed: IonicModule must be imported with forRoot()
• An ionic component must be used inside an element with *cdkVirtualFor applied to it
• In a test fixture.detectChanges() & flush() must be called. This ensures the cdk scroller renders items so the tests pass but also triggers the chunk error warning

Ionic version:
[x] 5.x

Current behavior:
The test passes but we see chunk errors in the output

ERROR: ChunkLoadError: Loading chunk 22 failed.
(timeout: http://localhost:9876/_karma_webpack_/22.js)
ChunkLoadError: Loading chunk 22 failed.
(timeout: http://localhost:9876/_karma_webpack_/22.js)
 at Function.requireEnsure [as e] (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:126:1)
 at webpackAsyncContext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ionic/core/dist/esm lazy ^\.\/.*\.entry\.js$ include: \.entry\.js$ exclude: \.system\.entry\.js$ namespace object:185:1)
 at loadModule (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ionic/core/dist/esm/index-7a8b7a1c.js:1948:12)
 at initializeComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ionic/core/dist/esm/index-7a8b7a1c.js:1610:1)
 at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ionic/core/dist/esm/index-7a8b7a1c.js:1751:1
 at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:364:1)
 at FakeAsyncTestZoneSpec.push.QpwO.FakeAsyncTestZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:1652:1)
 at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:289:1)
 at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:363:1)
 at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:123:1), undefined

Expected behavior:
The test to pass without chunk errors in the output

Steps to reproduce:
Run npm test in the console and observe the output. The test will pass but you should see errors like ERROR: ChunkLoadError: Loading chunk 22 failed. in the stdout

Related code:
https://github.com/studioromeo/ionic-cdk-bug

Other information:
This doesn't seem to happen when other components are used only with ionic components. It also only appears when I add forRoot() to the testbed. Hopefully the demo project explains all but feel free to ask any followups

Ionic info:

Ionic:

 Ionic CLI : 6.13.1
 Ionic Framework : @ionic/angular 5.6.4
 @angular-devkit/build-angular : 0.1102.8
 @angular-devkit/schematics : 11.2.8
 @angular/cli : 11.2.8
 @ionic/angular-toolkit : 3.1.1

Utility:

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

System:

 NodeJS : v14.16.0 (/Users/robertrhoades/.nvm/versions/node/v14.16.0/bin/node)
 npm : 6.14.11
 OS : macOS Big Sur

[liamdebeasi]

Thanks for the issue. It looks like calling flush(); while Ionic components are still loading results in this error. Does not seem to be Angular CDK Scroller specific, just related to that flush function imported from @angular/core/testing.

[liamdebeasi]

Thanks for the report. I can reproduce the reported behavior. This is due to an incompatibility with how Ionic components are loaded using IonicModule. Our components are lazily loaded using Stencil as needed. This can cause issues if the state of the app changes before loading is done (in this case calling flush).

While this error is coming from Ionic/Stencil, avoiding lazy loading in the IonicModule will likely come with breaking changes that will disrupt existing applications. I recommend using Ionic's standalone components as a solution for this instead. This approach avoids Stencil's lazy loading, so the reported error should go away when using standalone components. See https://ionicframework.com/docs/angular/build-options#standalone for more information.

Alternatively, I see you posted a workaround in #22684 (comment). I recommend using that workaround if you are unable to migrate to standalone components.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.