modernization ( Angular Update ) : #33573 Migrate Angular Components from Modules to Standalone

core-web/apps/dotcdn/src/app/app.module.ts

@@ -24,7 +24,7 @@ import {
     SiteService,
     StringUtils
 } from '@dotcms/dotcms-js';
-import { DotIconModule, DotSpinnerModule } from '@dotcms/ui';
+import { DotIconComponent, DotSpinnerComponent } from '@dotcms/ui';
 
 import { AppComponent } from './app.component';
 import { DotCDNStore } from './dotcdn.component.store';
@@ -49,10 +49,10 @@ const dotEventSocketURLFactory = () => {
         ChartModule,
         InputTextareaModule,
         ButtonModule,
-        DotIconModule,
+        DotIconComponent,
         FormsModule,
         SkeletonModule,
-        DotSpinnerModule,
+        DotSpinnerComponent,
         ReactiveFormsModule
     ],
     providers: [

core-web/apps/dotcms-block-editor/src/app/app.module.ts

@@ -10,11 +10,7 @@ import { ListboxModule } from 'primeng/listbox';
 import { OrderListModule } from 'primeng/orderlist';
 
 import { BlockEditorModule, DotBlockEditorComponent } from '@dotcms/block-editor';
-import {
-    DotPropertiesService,
-    DotContentSearchService,
-    DotLanguagesService
-} from '@dotcms/data-access';
+import { DotPropertiesService, DotContentSearchService } from '@dotcms/data-access';
 import { DotAssetSearchComponent } from '@dotcms/ui';
 
 import { AppComponent } from './app.component';
@@ -32,7 +28,7 @@ import { AppComponent } from './app.component';
         HttpClientModule,
         DotAssetSearchComponent
     ],
-    providers: [DotPropertiesService, DotContentSearchService, DotLanguagesService]
+    providers: [DotPropertiesService, DotContentSearchService]
 })
 export class AppModule implements DoBootstrap {
     constructor(private injector: Injector) {}

core-web/apps/dotcms-ui-e2e/playwright.config.ts

@@ -50,21 +50,21 @@ export default defineConfig({
         // Uncomment for mobile browsers support
         /* {
       name: 'Mobile Chrome',
-      use: { ...devices['Pixel 5'] },
-    },
+      use: { ...devices['Pixel 5'] }
+},
     {
       name: 'Mobile Safari',
-      use: { ...devices['iPhone 12'] },
-    }, */
+      use: { ...devices['iPhone 12'] }
+}, */
 
         // Uncomment for branded browsers
         /* {
       name: 'Microsoft Edge',
-      use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    },
+      use: { ...devices['Desktop Edge'], channel: 'msedge' }
+},
     {
       name: 'Google Chrome',
-      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    } */
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' }
+} */
     ]
 });

core-web/apps/dotcms-ui/jest.config.ts

@@ -23,7 +23,9 @@ export default {
             }
         ]
     },
-    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$|y-protocols|lib0|@tiptap|y-prosemirror)'],
+    transformIgnorePatterns: [
+        'node_modules/(?!.*\\.mjs$|y-protocols|lib0|@tiptap|y-prosemirror|gridstack|uuid)'
+    ],
     snapshotSerializers: [
         'jest-preset-angular/build/serializers/no-ng-attributes',
         'jest-preset-angular/build/serializers/ng-snapshot',

core-web/apps/dotcms-ui/src/app/api/services/dot-custom-event-handler/dot-custom-event-handler.service.ts

@@ -31,7 +31,9 @@ export const COMPARE_CUSTOM_EVENT = 'compare-contentlet';
  * @export
  * @class DotCustomEventHandlerService
  */
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class DotCustomEventHandlerService {
     private dotLoadingIndicatorService = inject(DotLoadingIndicatorService);
     private dotRouterService = inject(DotRouterService);

core-web/apps/dotcms-ui/src/app/api/services/guards/auth-guard.service.spec.ts

@@ -34,10 +34,8 @@ describe('ValidAuthGuardService', () => {
         authGuardService = TestBed.inject(AuthGuardService);
         dotRouterService = TestBed.inject(DotRouterService);
         loginService = TestBed.inject(LoginService);
-        mockRouterStateSnapshot = jest.fn<RouterStateSnapshot>('RouterStateSnapshot', ['toString']);
-        mockActivatedRouteSnapshot = jest.fn<ActivatedRouteSnapshot>('ActivatedRouteSnapshot', [
-            'toString'
-        ]);
+        mockRouterStateSnapshot = { url: '/test' } as RouterStateSnapshot;
+        mockActivatedRouteSnapshot = {} as ActivatedRouteSnapshot;
     });
 
     it('should allow access to the requested route, User is logged in', () => {

core-web/apps/dotcms-ui/src/app/app-routing.module.ts

@@ -33,23 +33,23 @@ const PORTLETS_ANGULAR: Route[] = [
     {
         path: 'containers',
         loadChildren: () =>
-            import('@dotcms/app/portlets/dot-containers/dot-containers.module').then(
-                (m) => m.DotContainersModule
+            import('@dotcms/app/portlets/dot-containers/dot-containers.routes').then(
+                (m) => m.dotContainersRoutes
             )
     },
     {
         path: 'categories',
         loadChildren: () =>
-            import('@dotcms/app/portlets/dot-categories/dot-categories.module').then(
-                (m) => m.DotCategoriesModule
+            import('@dotcms/app/portlets/dot-categories/dot-categories.routes').then(
+                (m) => m.dotCategoriesRoutes
             )
     },
     {
         path: 'templates',
         canActivate: [MenuGuardService],
         canActivateChild: [MenuGuardService],
         loadChildren: () =>
-            import('@portlets/dot-templates/dot-templates.module').then((m) => m.DotTemplatesModule)
+            import('@portlets/dot-templates/dot-templates.routes').then((m) => m.DotTemplatesRoutes)
     },
     {
         path: 'content-types-angular',
@@ -59,8 +59,8 @@ const PORTLETS_ANGULAR: Route[] = [
             reuseRoute: false
         },
         loadChildren: () =>
-            import('@portlets/dot-content-types/dot-content-types.module').then(
-                (m) => m.DotContentTypesModule
+            import('@portlets/dot-content-types/dot-content-types.routes').then(
+                (m) => m.dotContentTypesRoutes
             )
     },
     {
@@ -99,8 +99,8 @@ const PORTLETS_ANGULAR: Route[] = [
         canActivate: [MenuGuardService],
         canActivateChild: [MenuGuardService],
         loadChildren: () =>
-            import('@portlets/dot-form-builder/dot-form-builder.module').then(
-                (m) => m.DotFormBuilderModule
+            import('@portlets/dot-form-builder/dot-form-builder.routes').then(
+                (m) => m.dotFormBuilderRoutes
             ),
         data: {
             filterBy: 'FORM'
@@ -122,7 +122,7 @@ const PORTLETS_ANGULAR: Route[] = [
         canActivateChild: [MenuGuardService],
         path: 'apps',
         loadChildren: () =>
-            import('@portlets/dot-apps/dot-apps.module').then((m) => m.DotAppsModule)
+            import('./portlets/dot-apps/dot-apps.routes').then((m) => m.dotAppsRoutes)
     },
     {
         path: 'edit-page',
@@ -154,7 +154,7 @@ const PORTLETS_ANGULAR: Route[] = [
         canActivate: [MenuGuardService, PagesGuardService],
         path: 'pages',
         loadChildren: () =>
-            import('@portlets/dot-pages/dot-pages.module').then((m) => m.DotPagesModule)
+            import('@portlets/dot-pages/dot-pages.routes').then((m) => m.dotPagesRoutes)
     },
     {
         canActivate: [MenuGuardService],
@@ -181,14 +181,14 @@ const PORTLETS_IFRAME = [
                     {
                         loadChildren: () =>
                             import(
-                                '@components/dot-contentlet-editor/dot-contentlet-editor.routing.module'
-                            ).then((m) => m.DotContentletEditorRoutingModule),
+                                '@components/dot-contentlet-editor/dot-contentlet-editor.routes'
+                            ).then((m) => m.dotContentletEditorRoutes),
                         path: 'new'
                     },
                     {
-                        loadChildren: () =>
-                            import('@portlets/dot-porlet-detail/dot-portlet-detail.module').then(
-                                (m) => m.DotPortletDetailModule
+                        loadComponent: () =>
+                            import('@portlets/dot-porlet-detail/dot-portlet-detail.component').then(
+                                (m) => m.DotPortletDetailComponent
                             ),
                         path: ':asset',
                         data: {
@@ -231,7 +231,7 @@ const appRoutes: Routes = [
             loginFormInfo: DotLoginPageResolver
         },
         loadChildren: () =>
-            import('@components/login/dot-login-page.module').then((m) => m.DotLoginPageModule)
+            import('@components/login/dot-login-page.routes').then((m) => m.dotLoginPageRoutes)
     },
     {
         path: 'fromCore',
@@ -270,6 +270,9 @@ const appRoutes: Routes = [
             onSameUrlNavigation: 'reload'
         })
     ],
-    providers: [{ provide: RouteReuseStrategy, useClass: DotCustomReuseStrategyService }]
+    providers: [
+        { provide: RouteReuseStrategy, useClass: DotCustomReuseStrategyService },
+        DotLoginPageResolver
+    ]
 })
 export class AppRoutingModule {}

core-web/apps/dotcms-ui/src/app/app.component.spec.ts

@@ -31,8 +31,7 @@ describe('AppComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [AppComponent],
-            imports: [RouterTestingModule, HttpClientTestingModule],
+            imports: [AppComponent, RouterTestingModule, HttpClientTestingModule],
             providers: [
                 { provide: CoreWebService, useClass: CoreWebServiceMock },
                 DotUiColorsService,

core-web/apps/dotcms-ui/src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component, inject, OnInit } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 
 import { map, take } from 'rxjs/operators';
 
@@ -12,7 +13,7 @@ import { DotNavLogoService } from './api/services/dot-nav-logo/dot-nav-logo.serv
     selector: 'dot-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
-    standalone: false
+    imports: [RouterOutlet]
 })
 export class AppComponent implements OnInit {
     private dotCmsConfigService = inject(DotcmsConfigService);

core-web/apps/dotcms-ui/src/app/app.module.ts

@@ -12,19 +12,17 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 
 import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { COMPONENTS } from './components';
-import { CUSTOM_MODULES, NGFACES_MODULES } from './modules';
+import { COMPONENTS, STANDALONE_COMPONENTS } from './components';
+import { NGFACES_MODULES } from './modules';
 import { ENV_PROVIDERS } from './providers';
 import { DotDirectivesModule } from './shared/dot-directives.module';
 import { SharedModule } from './shared/shared.module';
 
 @NgModule({
-    bootstrap: [AppComponent],
-    declarations: [AppComponent, ...COMPONENTS],
+    declarations: [...COMPONENTS],
     imports: [
-        ...CUSTOM_MODULES,
         ...NGFACES_MODULES,
+        ...STANDALONE_COMPONENTS,
         CommonModule,
         BrowserAnimationsModule,
         BrowserModule,

core-web/apps/dotcms-ui/src/app/components.ts

@@ -1,15 +1,64 @@
+import { DotContentCompareComponent } from '@dotcms/portlets/dot-ema/ui';
+import { DotDialogComponent, DotIconComponent } from '@dotcms/ui';
+
+import { AppComponent } from './app.component';
+import { DotActionButtonComponent } from './view/components/_common/dot-action-button/dot-action-button.component';
 import { DotAlertConfirmComponent } from './view/components/_common/dot-alert-confirm/dot-alert-confirm';
+import { DotDownloadBundleDialogComponent } from './view/components/_common/dot-download-bundle-dialog/dot-download-bundle-dialog.component';
+import { DotGenerateSecurePasswordComponent } from './view/components/_common/dot-generate-secure-password/dot-generate-secure-password.component';
+import { DotPushPublishDialogComponent } from './view/components/_common/dot-push-publish-dialog/dot-push-publish-dialog.component';
+import { DotSiteSelectorComponent } from './view/components/_common/dot-site-selector/dot-site-selector.component';
+import { DotTextareaContentComponent } from './view/components/_common/dot-textarea-content/dot-textarea-content.component';
+import { DotWizardComponent } from './view/components/_common/dot-wizard/dot-wizard.component';
+import { IframeComponent } from './view/components/_common/iframe/iframe-component/iframe.component';
+import { IframePortletLegacyComponent } from './view/components/_common/iframe/iframe-porlet-legacy/iframe-porlet-legacy.component';
+import { SearchableDropdownComponent } from './view/components/_common/searchable-dropdown/component/searchable-dropdown.component';
+import { DotEditContentletComponent } from './view/components/dot-contentlet-editor/components/dot-edit-contentlet/dot-edit-contentlet.component';
+import { DotCrumbtrailComponent } from './view/components/dot-crumbtrail/dot-crumbtrail.component';
+import { DotLargeMessageDisplayComponent } from './view/components/dot-large-message-display/dot-large-message-display.component';
+import { DotListingDataTableComponent } from './view/components/dot-listing-data-table/dot-listing-data-table.component';
+import { DotMessageDisplayComponent } from './view/components/dot-message-display/dot-message-display.component';
+import { DotThemeSelectorDropdownComponent } from './view/components/dot-theme-selector-dropdown/dot-theme-selector-dropdown.component';
+import { DotToolbarComponent } from './view/components/dot-toolbar/dot-toolbar.component';
+import { DotWorkflowTaskDetailComponent } from './view/components/dot-workflow-task-detail/dot-workflow-task-detail.component';
 import { GlobalSearchComponent } from './view/components/global-search/global-search';
 import { DotLogOutContainerComponent } from './view/components/login/dot-logout-container-component/dot-log-out-container';
 import { DotLoginPageComponent } from './view/components/login/main/dot-login-page.component';
 import { MainCoreLegacyComponent } from './view/components/main-core-legacy/main-core-legacy-component';
 import { MainComponentLegacyComponent } from './view/components/main-legacy/main-legacy.component';
 
+// Non-standalone components (traditional NgModule components)
 export const COMPONENTS = [
     MainCoreLegacyComponent,
+    DotLogOutContainerComponent,
+    GlobalSearchComponent
+];
+
+// Standalone components (migrated to standalone)
+export const STANDALONE_COMPONENTS = [
+    AppComponent,
     MainComponentLegacyComponent,
+    DotAlertConfirmComponent,
     DotLoginPageComponent,
-    DotLogOutContainerComponent,
-    GlobalSearchComponent,
-    DotAlertConfirmComponent
+    DotToolbarComponent,
+    DotActionButtonComponent,
+    DotEditContentletComponent,
+    DotDialogComponent,
+    DotIconComponent,
+    DotTextareaContentComponent,
+    DotWorkflowTaskDetailComponent,
+    DotMessageDisplayComponent,
+    IframeComponent,
+    IframePortletLegacyComponent,
+    DotListingDataTableComponent,
+    SearchableDropdownComponent,
+    DotSiteSelectorComponent,
+    DotLargeMessageDisplayComponent,
+    DotPushPublishDialogComponent,
+    DotContentCompareComponent,
+    DotDownloadBundleDialogComponent,
+    DotWizardComponent,
+    DotGenerateSecurePasswordComponent,
+    DotThemeSelectorDropdownComponent,
+    DotCrumbtrailComponent
 ];

core-web/apps/dotcms-ui/src/app/modules.ts

@@ -1,4 +1,5 @@
-// CUSTOM MDOULES
+// PRIMENG MODULES
+// Note: CUSTOM_MODULES has been removed - all standalone components are now in components.ts
 
 import { SharedModule } from 'primeng/api';
 import { AutoCompleteModule } from 'primeng/autocomplete';
@@ -21,46 +22,6 @@ import { TabViewModule } from 'primeng/tabview';
 import { ToolbarModule } from 'primeng/toolbar';
 import { TreeTableModule } from 'primeng/treetable';
 
-import { DotContentCompareModule } from '@dotcms/portlets/dot-ema/ui';
-import { DotDialogModule, DotIconModule } from '@dotcms/ui';
-
-import { DotActionButtonModule } from './view/components/_common/dot-action-button/dot-action-button.module';
-import { DotDownloadBundleDialogModule } from './view/components/_common/dot-download-bundle-dialog/dot-download-bundle-dialog.module';
-import { DotGenerateSecurePasswordModule } from './view/components/_common/dot-generate-secure-password/dot-generate-secure-password.module';
-import { DotPushPublishDialogModule } from './view/components/_common/dot-push-publish-dialog/dot-push-publish-dialog.module';
-import { DotSiteSelectorModule } from './view/components/_common/dot-site-selector/dot-site-selector.module';
-import { DotTextareaContentModule } from './view/components/_common/dot-textarea-content/dot-textarea-content.module';
-import { DotWizardModule } from './view/components/_common/dot-wizard/dot-wizard.module';
-import { IFrameModule } from './view/components/_common/iframe';
-import { SearchableDropDownModule } from './view/components/_common/searchable-dropdown';
-import { DotContentletEditorModule } from './view/components/dot-contentlet-editor/dot-contentlet-editor.module';
-import { DotLargeMessageDisplayModule } from './view/components/dot-large-message-display/dot-large-message-display.module';
-import { DotListingDataTableModule } from './view/components/dot-listing-data-table/dot-listing-data-table.module';
-import { DotMessageDisplayModule } from './view/components/dot-message-display/dot-message-display.module';
-import { DotToolbarModule } from './view/components/dot-toolbar/dot-toolbar.module';
-import { DotWorkflowTaskDetailModule } from './view/components/dot-workflow-task-detail/dot-workflow-task-detail.module';
-
-export const CUSTOM_MODULES = [
-    DotToolbarModule,
-    DotActionButtonModule,
-    DotContentletEditorModule,
-    DotDialogModule,
-    DotIconModule,
-    DotTextareaContentModule,
-    DotWorkflowTaskDetailModule,
-    DotMessageDisplayModule,
-    IFrameModule,
-    DotListingDataTableModule,
-    SearchableDropDownModule,
-    DotSiteSelectorModule,
-    DotLargeMessageDisplayModule,
-    DotPushPublishDialogModule,
-    DotContentCompareModule,
-    DotDownloadBundleDialogModule,
-    DotWizardModule,
-    DotGenerateSecurePasswordModule
-];
-
 export const NGFACES_MODULES = [
     AutoCompleteModule,
     BreadcrumbModule,