Merge pull request #4071 from dpalou/MOBILE-4470

Mobile 4470

src/core/features/compile/pipes/translate.ts

@@ -1,28 +0,0 @@
-// (C) Copyright 2015 Moodle Pty Ltd.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { Injectable, Pipe, PipeTransform } from '@angular/core';
-import { TranslatePipe } from '@ngx-translate/core';
-
-/**
- * Copy of translate pipe to use when compiling a dynamic component.
- * For some reason, when compiling a dynamic component the original translate pipe isn't found so we use this copy instead.
- */
-@Injectable()
-@Pipe({
-  name: 'translate',
-  pure: false, // required to update the value when the promise is resolved
-  standalone: true,
-})
-export class TranslatePipeForCompile extends TranslatePipe implements PipeTransform {}

src/core/features/compile/services/compile.ts

@@ -33,7 +33,6 @@ import {
     ToastController,
 } from '@ionic/angular';
 import { TranslateService } from '@ngx-translate/core';
-import { TranslatePipeForCompile } from '../pipes/translate';
 
 import { CoreLogger } from '@singletons/logger';
 import { CoreEvents } from '@singletons/events';
@@ -161,6 +160,7 @@ export class CoreCompileProvider {
         getModWorkshopComponentModules,
     ];
 
+    protected componentId = 0;
     protected libraries?: unknown[];
     protected exportedObjects?: Record<string, unknown>;
 
@@ -187,14 +187,13 @@ 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 = [
             ...lazyImports.flat(),
             ...this.IMPORTS,
             ...extraImports,
-            TranslatePipeForCompile,
         ];
 
         try {