dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Remove flex-layout

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2025-03-07 18:41:53 +02:00
parent 124ceaf1c9
commit e986df7ebc
7 changed files with 39 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui-ngx/package.json
View File

@ -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",

21
ui-ngx/patches/@angular+flex-layout+15.0.0-beta.42.patch
View File

File diff suppressed because one or more lines are too long

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

@ -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(
mergeMap((data) => {
let componentImports: Type<any>[] = [CommonModule, data.flexLayoutModule];
return from(import('@angular/compiler')).pipe(
mergeMap(() => {
let componentImports: Type<any>[] = [CommonModule];
if (imports) {
componentImports = [...componentImports, ...imports];
}

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

@ -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(
[
modulesMap.init(),
from(import('@angular/compiler'))
]
).subscribe(
forkJoin([
modulesMap.init(),
from(import('@angular/compiler'))
]).subscribe(
() => {
// @ts-ignore
System.import(url, undefined, meta).then(
(module: any) => {
try {
const modulesWithComponents = this.extractModulesWithComponents(module);
this.patchModulesWithFlexLayout(modulesWithComponents).subscribe(
{
next: modules => {
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}`));
}
if (modulesWithComponents.modules.length || modulesWithComponents.standaloneComponents.length) {
for (const module of modulesWithComponents.modules) {
createNgModule(module.module.type, this.injector);
}
);
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;

60
ui-ngx/src/app/modules/common/modules-map.ts
View File

@ -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 { getFlexLayout } from '@shared/legacy/flex-layout.models';
import { Observable, of } from 'rxjs';
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(
map((flexLayout) => {
this.modulesMap['@angular/flex-layout'] = flexLayout;
this.modulesMap['@angular/flex-layout/flex'] = flexLayout;
this.modulesMap['@angular/flex-layout/grid'] = flexLayout;
this.modulesMap['@angular/flex-layout/extended'] = flexLayout;
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.resolve = (id: string) => {
try {
if (this.modulesMap[id]) {
return 'app:' + id;
} else {
return id;
}
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) {
options.headers = { ...options.headers, ...options.meta.additionalHeaders };
}
return fetch(url, options);
};
this.initialized = true;
})
);
} else {
return of(null);
} 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);
System.constructor.prototype.fetch = (url: string, options: RequestInit & {meta?: any}) => {
if (options?.meta?.additionalHeaders) {
options.headers = { ...options.headers, ...options.meta.additionalHeaders };
}
return fetch(url, options);
};
this.initialized = true;
}
return of(null);
}
}

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

@ -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)
);
}

7
ui-ngx/yarn.lock
View File

@ -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"