diff --git a/npm/ng-packs/packages/theme-shared/src/lib/handlers/lazy-style.handler.ts b/npm/ng-packs/packages/theme-shared/src/lib/handlers/lazy-style.handler.ts index bed1a5bbd5..c52214bf95 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/handlers/lazy-style.handler.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/handlers/lazy-style.handler.ts @@ -18,6 +18,8 @@ export class LazyStyleHandler { private styles: string[]; private _dir: LocaleDirection = 'ltr'; + readonly loaded = new Map(); + set dir(dir: LocaleDirection) { if (dir === this._dir) return; @@ -36,9 +38,17 @@ export class LazyStyleHandler { this.listenToLanguageChanges(injector); } + private getHrefFromLink(link: HTMLLinkElement | null): string { + if (!link) return ''; + + const a = document.createElement('a'); + a.href = link.href; + return a.pathname.replace(/^\//, ''); + } + private getLoadedBootstrap(): LoadedStyle { const href = createLazyStyleHref(BOOTSTRAP, this.dir); - const selector = `[href$="${href}"]`; + const selector = `[href*="${href.replace(/\.css$/, '')}"]`; const link = document.querySelector(selector); return { href, link }; } @@ -75,9 +85,19 @@ export class LazyStyleHandler { this.styles.forEach(style => { const oldHref = createLazyStyleHref(style, this.dir); const newHref = createLazyStyleHref(style, dir); - - const strategy = LOADING_STRATEGY.PrependAnonymousStyleToHead(newHref); - this.lazyLoad.load(strategy).subscribe(() => this.lazyLoad.remove(oldHref)); + const link = this.loaded.get(newHref); + const href = this.getHrefFromLink(link) || newHref; + + const strategy = LOADING_STRATEGY.PrependAnonymousStyleToHead(href); + this.lazyLoad.load(strategy).subscribe(() => { + const oldLink = this.lazyLoad.loaded.get(oldHref) as HTMLLinkElement; + this.loaded.delete(newHref); + this.loaded.set(oldHref, oldLink); + const newLink = this.lazyLoad.loaded.get(href) as HTMLLinkElement; + this.lazyLoad.loaded.delete(href); + this.lazyLoad.loaded.set(newHref, newLink); + this.lazyLoad.remove(oldHref); + }); }); } }