Standalone component import error when running tests for Angular 20, but not when building

After updating an application from Angular version 15 to version 20, there seems to be some errors occurring only when running tests but not when building.

One of the packages we use is an Angular wrapper of the Ace editor (named ng12-ace-editor in npm). The recommended usage of this package includes importing the AceEditorModule in the application, which has worked perfectly so far, and continues to work when building the application via ng build.

However, when running tests (via ng test using jasmine and karma), and without making changes to any of the code, the following error shows up for a large portion of the tests and seems to be related to newer Angular versions having components be "standalone" by default:

Error: Unexpected "AceEditorComponent" found in the "declarations" array of the "AceEditorModule" NgModule, "AceEditorComponent" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?


I'm wondering...

• Why do the tests have a different behavior like this compared to building the application?
• Is there any way to mark the components as not standalone prior to the tests starting?
• Is this something that would need to be rectified in the Ace package itself?

The only thing I've been able to get to work is to manually edit the imports of the application to import the Ace component directly instead of the Ace module.

That doesn't necessarily feel like a reasonable solution, especially when including the tests as part of an automated test process, so I'm wondering if there's a better alternative.

Continue reading...