UI: Remove flex-layout

ui-ngx/package.json

@@ -18,7 +18,6 @@
     "@angular/common": "18.2.13",
     "@angular/compiler": "18.2.13",
     "@angular/core": "18.2.13",
-    "@angular/flex-layout": "^15.0.0-beta.42",
     "@angular/forms": "18.2.13",
     "@angular/material": "18.2.14",
     "@angular/platform-browser": "18.2.13",

ui-ngx/src/app/core/services/dynamic-component-factory.service.ts

@@ -15,11 +15,10 @@
 ///
 
 import { Component, Injectable, Type, ɵComponentDef, ɵNG_COMP_DEF } from '@angular/core';
-import { forkJoin, from, Observable, of } from 'rxjs';
+import { from, Observable, of } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { mergeMap } from 'rxjs/operators';
 import { guid } from '@core/utils';
-import { getFlexLayoutModule } from '@shared/legacy/flex-layout.models';
 
 @Injectable({
     providedIn: 'root'
@@ -35,9 +34,9 @@ export class DynamicComponentFactoryService {
                      imports?: Type<any>[],
                      preserveWhitespaces?: boolean,
                      styles?: string[]): Observable<Type<T>> {
-    return forkJoin({flexLayoutModule: getFlexLayoutModule(), compiler: from(import('@angular/compiler'))}).pipe(
+    return from(import('@angular/compiler')).pipe(
-      mergeMap((data) => {
+      mergeMap(() => {
-        let componentImports: Type<any>[] = [CommonModule, data.flexLayoutModule];
+        let componentImports: Type<any>[] = [CommonModule];
         if (imports) {
           componentImports = [...componentImports, ...imports];
         }

ui-ngx/src/app/core/services/resources.service.ts

@@ -38,7 +38,6 @@ import { selectIsAuthenticated } from '@core/auth/auth.selectors';
 import { AppState } from '@core/core.state';
 import { map, tap } from 'rxjs/operators';
 import { RequestConfig } from '@core/http/http-utils';
-import { getFlexLayoutModule } from '@app/shared/legacy/flex-layout.models';
 import { isJSResource, removeTbResourcePrefix } from '@shared/models/resource.models';
 
 export interface ModuleInfo {
@@ -206,42 +205,25 @@ export class ResourcesService {
     const subject = new ReplaySubject<ModulesWithComponents>();
     this.loadedModulesWithComponents[url] = subject;
 
-    forkJoin(
+    forkJoin([
-      [
+      modulesMap.init(),
-        modulesMap.init(),
+      from(import('@angular/compiler'))
-        from(import('@angular/compiler'))
+    ]).subscribe(
-      ]
-    ).subscribe(
       () => {
         // @ts-ignore
         System.import(url, undefined, meta).then(
           (module: any) => {
             try {
               const modulesWithComponents = this.extractModulesWithComponents(module);
-              this.patchModulesWithFlexLayout(modulesWithComponents).subscribe(
+              if (modulesWithComponents.modules.length || modulesWithComponents.standaloneComponents.length) {
-                {
+                for (const module of modulesWithComponents.modules) {
-                  next: modules => {
+                  createNgModule(module.module.type, this.injector);
-                    if (modules.modules.length || modules.standaloneComponents.length) {
-                      try {
-                        for (const module of modules.modules) {
-                          createNgModule(module.module.type, this.injector);
-                        }
-                        this.loadedModulesWithComponents[url].next(modulesWithComponents);
-                        this.loadedModulesWithComponents[url].complete();
-                      } catch (e) {
-                        console.log(`Unable to parse module from url: ${url}`, e);
-                        this.loadedModulesWithComponents[url].error(new Error(`Unable to parse module from url: ${url}`));
-                      }
-                    } else {
-                      this.loadedModulesWithComponents[url].error(new Error(`Module '${url}' doesn't have exported modules or components!`));
-                    }
-                  },
-                  error: err => {
-                    console.log(`Unable to patch module with flexLayout, module url: ${url}`, err);
-                    this.loadedModulesWithComponents[url].error(new Error(`Unable to patch module with flexLayout, module url: ${url}`));
-                  }
                 }
-              );
+                this.loadedModulesWithComponents[url].next(modulesWithComponents);
+                this.loadedModulesWithComponents[url].complete();
+              } else {
+                this.loadedModulesWithComponents[url].error(new Error(`Module '${url}' doesn't have exported modules or components!`));
+              }
             } catch (e) {
               console.log(`Unable to parse module from url: ${url}`, e);
               this.loadedModulesWithComponents[url].error(new Error(`Unable to parse module from url: ${url}`));
@@ -343,40 +325,6 @@ export class ResourcesService {
     return modulesWithComponents;
   }
 
-  private patchModulesWithFlexLayout(modulesWithComponents: ModulesWithComponents): Observable<ModulesWithComponents> {
-    return getFlexLayoutModule().pipe(
-      map((flexLayoutModule) => {
-        modulesWithComponents.modules.forEach(m => {
-          if (Array.isArray(m.module.imports)) {
-            if (!m.module.imports.includes(flexLayoutModule)) {
-              m.module.imports.push(flexLayoutModule);
-            }
-          } else {
-            const imports = m.module.imports();
-            if (!imports.includes(flexLayoutModule)) {
-              imports.push(flexLayoutModule);
-              m.module.imports = imports;
-            }
-          }
-        });
-        modulesWithComponents.standaloneComponents.forEach(c => {
-          if (Array.isArray(c.dependencies)) {
-            if (!c.dependencies.includes(flexLayoutModule)) {
-              c.dependencies.push(flexLayoutModule);
-            }
-          } else {
-            const dependencies = c.dependencies();
-            if (!dependencies.includes(flexLayoutModule)) {
-              dependencies.push(flexLayoutModule);
-              c.dependencies = dependencies;
-            }
-          }
-        });
-        return modulesWithComponents;
-      })
-    );
-  }
-
   private loadResourceByType(type: 'css' | 'js', url: string): Observable<any> {
     const subject = new ReplaySubject<void>();
     this.loadedResources[url] = subject;

ui-ngx/src/app/modules/common/modules-map.ts

@@ -338,8 +338,7 @@ import * as AggregationOptionsConfigComponent from '@shared/components/time/aggr
 import * as IntervalOptionsConfigPanelComponent from '@shared/components/time/interval-options-config-panel.component';
 
 import { IModulesMap } from '@modules/common/modules-map.models';
-import { Observable, map, of } from 'rxjs';
+import { Observable, of } from 'rxjs';
-import { getFlexLayout } from '@shared/legacy/flex-layout.models';
 import { isJSResourceUrl } from '@shared/public-api';
 
 class ModulesMap implements IModulesMap {
@@ -352,10 +351,6 @@ class ModulesMap implements IModulesMap {
     '@angular/common': AngularCommon,
     '@angular/common/http': HttpClientModule,
     '@angular/forms': AngularForms,
-    '@angular/flex-layout': {},
-    '@angular/flex-layout/flex': {},
-    '@angular/flex-layout/grid': {},
-    '@angular/flex-layout/extended': {},
     '@angular/platform-browser': AngularPlatformBrowser,
     '@angular/platform-browser/animations': AngularPlatformBrowserAnimations,
     '@angular/router': AngularRouter,
@@ -678,39 +673,30 @@ class ModulesMap implements IModulesMap {
 
   init(): Observable<any> {
     if (!this.initialized) {
-      return getFlexLayout().pipe(
+      System.constructor.prototype.resolve = (id: string) => {
-        map((flexLayout) => {
+        try {
-          this.modulesMap['@angular/flex-layout'] = flexLayout;
+          if (this.modulesMap[id]) {
-          this.modulesMap['@angular/flex-layout/flex'] = flexLayout;
+            return 'app:' + id;
-          this.modulesMap['@angular/flex-layout/grid'] = flexLayout;
+          } else {
-          this.modulesMap['@angular/flex-layout/extended'] = flexLayout;
+            return id;
-          System.constructor.prototype.resolve = (id: string) => {
-            try {
-              if (this.modulesMap[id]) {
-                return 'app:' + id;
-              } else {
-                return id;
-              }
-            } catch (err) {
-              return id;
-            }
-          };
-          for (const moduleId of Object.keys(this.modulesMap)) {
-            System.set('app:' + moduleId, this.modulesMap[moduleId]);
           }
-          System.constructor.prototype.shouldFetch = (url: string) => url.endsWith('/download') || isJSResourceUrl(url);
+        } catch (err) {
-          System.constructor.prototype.fetch = (url: string, options: RequestInit & {meta?: any}) => {
+          return id;
-            if (options?.meta?.additionalHeaders) {
+        }
-              options.headers = { ...options.headers, ...options.meta.additionalHeaders };
+      };
-            }
+      for (const moduleId of Object.keys(this.modulesMap)) {
-            return fetch(url, options);
+        System.set('app:' + moduleId, this.modulesMap[moduleId]);
-          };
+      }
-          this.initialized = true;
+      System.constructor.prototype.shouldFetch = (url: string) => url.endsWith('/download') || isJSResourceUrl(url);
-        })
+      System.constructor.prototype.fetch = (url: string, options: RequestInit & {meta?: any}) => {
-      );
+        if (options?.meta?.additionalHeaders) {
-    } else {
+          options.headers = { ...options.headers, ...options.meta.additionalHeaders };
-      return of(null);
+        }
+        return fetch(url, options);
+      };
+      this.initialized = true;
     }
+    return of(null);
   }
 }
 

ui-ngx/src/app/shared/legacy/flex-layout.models.ts

@@ -1,41 +0,0 @@
-///
-/// Copyright © 2016-2025 The Thingsboard Authors
-///
-/// 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 { Observable } from 'rxjs/internal/Observable';
-import { from, of } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
-import { Type } from '@angular/core';
-
-let flexLayoutModule: any;
-
-export function getFlexLayout(): Observable<any> {
-  if (flexLayoutModule) {
-    return of(flexLayoutModule);
-  } else {
-    return from(import('@angular/flex-layout')).pipe(
-      tap((module) => {
-        module.DEFAULT_CONFIG.addFlexToParent = false;
-        flexLayoutModule = module;
-      })
-    );
-  }
-}
-
-export function getFlexLayoutModule(): Observable<Type<any>> {
-  return getFlexLayout().pipe(
-    map(module => module.FlexLayoutModule)
-  );
-}

ui-ngx/yarn.lock

@@ -307,13 +307,6 @@
   dependencies:
     tslib "^2.3.0"
 
-"@angular/flex-layout@^15.0.0-beta.42":
-  version "15.0.0-beta.42"
-  resolved "https://registry.yarnpkg.com/@angular/flex-layout/-/flex-layout-15.0.0-beta.42.tgz#ad5e1dda32ee6280ba73765be10fd916c222e38e"
-  integrity sha512-cTAPVMMxnyIFwpZwdq0PL5mdP9Qh+R8MB7ZBezVaN3Rz2fRrkagzKpLvPX3TFzepXrvHBdpKsU4b8u+NxEC/6g==
-  dependencies:
-    tslib "^2.3.0"
-
 "@angular/forms@18.2.13":
   version "18.2.13"
   resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-18.2.13.tgz#119f9b32b0da5e2f1bc3c07f506a645e5635f583"