From ff7a075cec5146c7362ac291e3ecff8df7aac171 Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Mon, 27 May 2024 15:43:07 +0200 Subject: [PATCH] MOBILE-4470 compile: Fix component ID collision detected warning Angular generates a unique component ID for each component to apply style encapsulation, restore application state, etc. Our compile code generated the same ID every time some HTML was compiled, and Angular displayed a warning in the console. Applying a different attribute every time makes sure the component ID is different in each compile. --- src/core/features/compile/services/compile.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/core/features/compile/services/compile.ts b/src/core/features/compile/services/compile.ts index 3fea8a902..f1f9073dd 100644 --- a/src/core/features/compile/services/compile.ts +++ b/src/core/features/compile/services/compile.ts @@ -161,6 +161,7 @@ export class CoreCompileProvider { getModWorkshopComponentModules, ]; + protected componentId = 0; protected libraries?: unknown[]; protected exportedObjects?: Record; @@ -187,7 +188,7 @@ export class CoreCompileProvider { await import('@angular/compiler'); // Create the component using the template and the class. - const component = Component({ template })(componentClass); + const component = Component({ template, host: { 'compiled-component-id': String(this.componentId++) } })(componentClass); const lazyImports = await Promise.all(this.LAZY_IMPORTS.map(getModules => getModules())); const imports = [