Wijmo compatibility with Angular 19

Posted by: mark.brodziak on 5 December 2024, 10:54 pm EST

  • Posted 5 December 2024, 10:54 pm EST

    Dear Mescius,

    We’re in the process of updating our application to Angular 19. Of note, the new default for a component is that it is standalone, and a component must opt out of this if it wants to be included in a module.

    Our application itself seems to build and run fine using Wijmo 5.20242.21

    Our tests, on the other hand, seem to have a problem. They declare testing modules, and the process of importing a module that includes Wijmo results in this error:

    Error: Unexpected "WjTooltip" found in the "declarations" array of the "WjCoreModule" NgModule, "WjTooltip" 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)?
    Unexpected "WjComponentLoader" found in the "declarations" array of the "WjCoreModule" NgModule, "WjComponentLoader" 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)?
        at verifySemanticsOfNgModuleDef (node_modules/@angular/core/fesm2022/core.mjs:33645:15)
        at forEach (node_modules/@angular/core/fesm2022/core.mjs:33619:9)
        at Array.forEach (<anonymous>)
        at verifySemanticsOfNgModuleDef (node_modules/@angular/core/fesm2022/core.mjs:33617:10)
        at forEach (node_modules/@angular/core/fesm2022/core.mjs:33619:9)
        at Array.forEach (<anonymous>)
        at verifySemanticsOfNgModuleDef (node_modules/@angular/core/fesm2022/core.mjs:33617:10)
        at forEach (node_modules/@angular/core/fesm2022/core.mjs:33619:9)
        at Array.forEach (<anonymous>)
        at verifySemanticsOfNgModuleDef (node_modules/@angular/core/fesm2022/core.mjs:33617:10)

    After a quick look at Angular’s processing of this, it looks like it is assuming that a component is standalone even if it isn’t built that way (due to the absence of the standalone property in the component metadata), and that seems to be tripping it up.

    I tried the latest Wijmo nightly and that has the same problem.

    Has anyone experienced this? Are there any known work-arounds? Are there any changes coming that might address this?

    I suspect that if the Wijmo components explicitly declare the standalone property, this issue would just go away.

  • Posted 6 December 2024, 8:03 am EST

    Hi Mark,

    It seems there have been some changes in Angular 19 and all components are treated as standAlone by default. We found the following related issue on GitHub - https://github.com/angular/angular/issues/58862

    However, we are investigating the issue further and will share an update with you soon. For now, as a workaround, you can import the required Wijmo components directly, instead of importing the complete module. For example, if you want to use ‘WjToolTip’ component, then import it directly -

    import { WjTooltip} from '@mescius/wijmo.angular2.core';
    ...
    
    await TestBed.configureTestingModule({
          imports: [AppComponent, WjTooltip],
        }).compileComponents()
    ...

    Avoid importing the module -

    import { WjCoreModule } from '@mescius/wijmo.angular2.core';
    ...
    
    await TestBed.configureTestingModule({
          imports: [AppComponent, WjCoreModule],
        }).compileComponents()
    ...

    Regards

  • Posted 9 December 2024, 7:25 am EST

    Hi Mark,

    We have forwarded this issue to the engineering team for further investigation with internal tracking ID- WJM-35388. We will update you when we have an update to share.

    For now, please use the workaround we suggested in our previous comment. In case, you face any issues, please let us know.

    Regards

  • Posted 10 December 2024, 12:55 am EST

    Thanks Vivek,

    Due to various upstream modules and the way that we had configured our application, this was a bit problematic. We did manage to solve this by bringing forward the work to convert all of our components / directives / pipes to standalone (this was on the cards already, we just didn’t really want to tackle it right away). Anyway, by doing this, it made it easier for us to fix our tests so that they only import the necessary components, and that let us move forward with a green build.

    I still think there is a problem somewhere that will impact various folk, depending on how they have structured their Angular application, modules, and tests.

    Thank you for the suggestions anyway, and we’re going to keep an eye on this thread because we’d like to be across any updates relating to the underlying problem - whether this is in Angular, Wijmo, or both.

  • Posted 10 December 2024, 7:47 am EST

    Hi Mark,

    We are glad that you have resolved the issue on your end, thank you for sharing this information. We will keep you updated on the progress of this case.

    Regards

  • Posted 6 January 2025, 11:42 pm EST

    same issue here.

  • Posted 8 January 2025, 1:23 am EST

    Hi Weide,

    The engineering team is working on this issue, we will share the updates here when we have some updates from the engineering team. Meanwhile, please use the workaround we suggested in our previous comments to avoid this issue.

    In case, you face any other issues, please let us know.

    Regards

  • Posted 10 January 2025, 11:46 am EST

    Hi,

    we’re experiencing the same issue.

    Is there any ETA for the fix? Thank you.

  • Posted 13 January 2025, 8:50 am EST

    Hi Ishilin,

    We have asked the engineering team for an ETA on the fix. We will let you know when we have some information from the engineering team.

    Regards

  • Posted 4 February 2025, 1:31 pm EST

    Hey all, thank you for your patience with Angular 19 support. We have implemented the packaging changes so that Wijmo supports Angular 19 (without modifying your imports in testbed). The Angular 19 support is included in our nightly build on npm.

    Our QA team has tested this nightly build and it is verified as stable. No issues were found in Angular 19. Please feel free to try this nightly version to use Wijmo in your Angular 19 project:

    https://www.npmjs.com/package/@mescius/wijmo.angular2.all/v/5.20251.31-nightly.d20250204.t020130

    This will be in our public release in March.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels