CraftTheme kt-menus not working after Angular 20 upgrade
We're using the KeeneThemes CraftTheme and recently upgraded our project to Angular 20. The upgrade was done in two steps: first, we updated our existing Angular 19 project to version 20, and everything appeared to work fine.
In the next step, we created a brand-new Angular 20 project and migrated our files over to avoid any lingering Angular 19 artifacts. While the top-level component (loaded via the router outlet) works as expected, child components are not functioning properly—specifically, none of the kt-menu elements are showing the dropdowns on click.
We managed to get first-level child components working by manually invoking (window as any).KTMenu.createInstances() in the ngAfterViewInit hook of the top-level component. However, this doesn't fix issues in deeper nested components "grandchildren", which still work fine in the directly upgraded project.
We did try adding the bundles to the angular.json as well. It did load the scripts into the scripts.js file, but nothing actually worked when they were loaded that way.
We’d like to stick with the fresh Angular 20 setup, but will need to resolve this issue first. From what we’ve read, Angular 20 introduced optimizations that affect component rendering in the DOM. We're hoping you’re already familiar with the problem and have a potential fix or workaround for this behavior.
Replies (2)
Hi Dave
This is a known DOM initialization timing issue that commonly occurs when JavaScript-based UI components need to be re-initialized after Angular's component lifecycle changes. Here example code:
Implement Router-based Reinitialization in Your App Component:
import { Component, OnInit } from "@angular/core";
import { Router, NavigationEnd, NavigationCancel } from "@angular/router";
@Component({
selector: "app-root",
templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit(): void {
// Listen to router events and reinitialize menu components
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
this.reinitializeMenuComponents();
}
});
}
private reinitializeMenuComponents(): void {
setTimeout(() => {
// Reinitialize all menu instances
(window as any).KTMenu.createInstances();
// If you have other components that need reinitialization
if ((window as any).KTDrawer) {
(window as any).KTDrawer.createInstances();
}
if ((window as any).KTToggle) {
(window as any).KTToggle.createInstances();
}
if ((window as any).KTScroll) {
(window as any).KTScroll.createInstances();
}
}, 100);
}
}Angular 20 Specific Fix - Add to Your Main.ts:
import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app/app.component";
// Ensure KTMenu is available globally before app initialization
declare global {
interface Window {
KTMenu: any;
KTDrawer: any;
KTToggle: any;
KTScroll: any;
}
}
bootstrapApplication(AppComponent, {
// your providers here
});Thanks that fixed it. I'm not sure why it was working without any manual steps in 19, maybe i just got lucky with the timing?
