refactoring

npm/ng-packs/apps/dev-app/src/server.ts

@@ -9,12 +9,11 @@ import cookieParser from 'cookie-parser';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import {environment} from './environments/environment';
-
-// ESM import
 import * as oidc from 'openid-client';
 
-//TODO: Remove this line in production
+if (environment.production === false) {
-process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";
+  process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";
+}
 
 const serverDistFolder = dirname(fileURLToPath(import.meta.url));
 const browserDistFolder = resolve(serverDistFolder, '../browser');

npm/ng-packs/apps/dev-app/src/server_legacy.ts

@@ -1,78 +0,0 @@
-import { environment } from './environments/environment';
-if (environment.production === false) {
-  process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0';
-}
-import 'zone.js/node';
-import { APP_BASE_HREF } from '@angular/common';
-import { CommonEngine } from '@angular/ssr/node';
-import express from 'express';
-import { existsSync } from 'node:fs';
-import { join } from 'node:path';
-import bootstrap from './main.server';
-
-// The Express app is exported so that it can be used by serverless Functions.
-export function app(): express.Express {
-  const server = express();
-  const distFolder = join(process.cwd(), 'dist/dev-app/browser');
-  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
-    ? join(distFolder, 'index.original.html')
-    : join(distFolder, 'index.html');
-
-  const commonEngine = new CommonEngine();
-
-  server.set('view engine', 'html');
-  server.set('views', distFolder);
-
-  // Example Express Rest API endpoints
-  // server.get('/api/**', (req, res) => { });
-  // Serve static files from /browser
-  server.get('/.well-known/*', (_, res) => res.sendStatus(404));
-  server.get(
-    '*.*',
-    express.static(distFolder, {
-      maxAge: '1y',
-    }),
-  );
-
-  // All regular routes use the Angular engine
-  server.get('*', (req, res, next) => {
-    const { protocol, originalUrl, baseUrl, headers } = req;
-    commonEngine
-      .render({
-        bootstrap,
-        documentFilePath: indexHtml,
-        url: `${protocol}://${headers.host}${originalUrl}`,
-        publicPath: distFolder,
-        providers: [
-          { provide: APP_BASE_HREF, useValue: baseUrl },
-          { provide: 'cookies', useValue: JSON.stringify(req.headers.cookie) },
-        ],
-      })
-      .then(html => res.send(html))
-      .catch(err => next(err));
-  });
-
-  return server;
-}
-
-function run(): void {
-  const port = process.env['PORT'] || 4000;
-
-  // Start up the Node server
-  const server = app();
-  server.listen(port, () => {
-    console.log(`Node Express server listening on http://localhost:${port}`);
-  });
-}
-
-// Webpack will replace 'require' with '__webpack_require__'
-// '__non_webpack_require__' is a proxy to Node 'require'
-// The below code is to ensure that the server is run only when not requiring the bundle.
-declare const __non_webpack_require__: NodeRequire;
-const mainModule = __non_webpack_require__.main;
-const moduleFilename = (mainModule && mainModule.filename) || '';
-if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
-  run();
-}
-
-export default bootstrap;

npm/ng-packs/packages/core/src/lib/services/index.ts

@@ -27,3 +27,4 @@ export * from './timezone.service';
 export * from './time.service';
 export * from './ssr.service';
 export * from './cookie-storage.service';
+export * from './dom-strategy.service';

npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
+import { Component, EventEmitter, Input, Output, inject, DOCUMENT } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ConfigStateService, LocalizationPipe, TrackByService } from '@abp/ng.core';
@@ -55,6 +55,7 @@ export class FeatureManagementComponent
   protected readonly service = inject(FeaturesService);
   protected readonly configState = inject(ConfigStateService);
   protected readonly confirmationService = inject(ConfirmationService);
+  private document = inject(DOCUMENT);
 
   @Input()
   providerKey: string;
@@ -118,7 +119,7 @@ export class FeatureManagementComponent
       this.features = res.groups.reduce(
         (acc, val) => ({
           ...acc,
-          [val.name]: mapFeatures(val.features, document.body.dir as LocaleDirection),
+          [val.name]: mapFeatures(val.features, this.document.body?.dir as LocaleDirection),
         }),
         {},
       );

npm/ng-packs/packages/oauth/src/lib/services/index.ts

@@ -2,3 +2,4 @@ export * from './oauth.service';
 export * from './oauth-error-filter.service';
 export * from './remember-me.service';
 export * from './browser-token-storage.service';
+export * from './server-token-storage.service';

npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts

@@ -17,6 +17,7 @@ import {
 import {
   Component,
   computed,
+  DOCUMENT,
   ElementRef,
   EventEmitter,
   inject,
@@ -109,6 +110,7 @@ export class PermissionManagementComponent
   protected readonly service = inject(PermissionsService);
   protected readonly configState = inject(ConfigStateService);
   protected readonly toasterService = inject(ToasterService);
+  private document = inject(DOCUMENT);
 
   @Input()
   readonly providerName!: string;
@@ -220,7 +222,7 @@ export class PermissionManagementComponent
     }
 
     const margin = `margin-${
-      (document.body.dir as LocaleDirection) === 'rtl' ? 'right' : 'left'
+      (this.document.body?.dir as LocaleDirection) === 'rtl' ? 'right' : 'left'
     }.px`;
 
     const permissions =
@@ -344,7 +346,7 @@ export class PermissionManagementComponent
     );
 
     const selectedPermissions = selectablePermissions.filter(per => per.isGranted);
-    const element = document.querySelector('#select-all-in-this-tabs') as any;
+    const element = this.document.querySelector('#select-all-in-this-tabs') as any;
     if (!element) {
       return;
     }
@@ -365,7 +367,7 @@ export class PermissionManagementComponent
       per.grantedProviders.every(p => p.providerName === this.providerName),
     );
     const selectedAllPermissions = selectablePermissions.filter(per => per.isGranted);
-    const checkboxElement = document.querySelector('#select-all-in-all-tabs') as any;
+    const checkboxElement = this.document.querySelector('#select-all-in-all-tabs') as any;
 
     if (selectedAllPermissions.length === selectablePermissions.length) {
       checkboxElement.indeterminate = false;

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts

@@ -24,7 +24,7 @@ import {
   FormPropData,
   generateFormFromProps,
 } from '@abp/ng.components/extensible';
-import { Component, inject, Injector, makeStateKey, OnInit } from '@angular/core';
+import { Component, DOCUMENT, inject, Injector, makeStateKey, OnInit } from '@angular/core';
 import {
   FormsModule,
   ReactiveFormsModule,
@@ -68,6 +68,7 @@ export class TenantsComponent implements OnInit {
   protected readonly toasterService = inject(ToasterService);
   private readonly fb = inject(UntypedFormBuilder);
   private readonly injector = inject(Injector);
+  private document = inject(DOCUMENT);
 
   data: PagedResultDto<TenantDto> = { items: [], totalCount: 0 };
 
@@ -165,7 +166,7 @@ export class TenantsComponent implements OnInit {
   onSharedDatabaseChange(value: boolean) {
     if (!value) {
       setTimeout(() => {
-        const defaultConnectionString = document.getElementById(
+        const defaultConnectionString = this.document.getElementById(
           'defaultConnectionString',
         ) as HTMLInputElement;
         if (defaultConnectionString) {

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts

@@ -12,7 +12,7 @@ import {
   output,
   viewChild,
 } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { SubscriptionService, uuid } from '@abp/ng.core';
 import { NgbModal, NgbModalOptions, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
@@ -41,6 +41,7 @@ export class ModalComponent implements OnInit, OnDestroy, DismissableModal {
     optional: true,
   });
   protected readonly destroyRef = inject(DestroyRef);
+  private document = inject(DOCUMENT);
 
   visible = model<boolean>(false);
 
@@ -80,7 +81,7 @@ export class ModalComponent implements OnInit, OnDestroy, DismissableModal {
   modalIdentifier = `modal-${uuid()}`;
 
   get modalWindowRef() {
-    return document.querySelector(`ngb-modal-window.${this.modalIdentifier}`);
+    return this.document.querySelector(`ngb-modal-window.${this.modalIdentifier}`);
   }
 
   get isFormDirty(): boolean {

npm/ng-packs/packages/theme-shared/src/lib/providers/tenant-not-found.provider.ts

@@ -2,11 +2,13 @@ import { TENANT_NOT_FOUND_BY_NAME } from '@abp/ng.core';
 import { inject, Provider } from '@angular/core';
 import { ConfirmationService } from '../services';
 import { HttpErrorResponse } from '@angular/common/http';
+import { DOCUMENT } from '@angular/common';
 
 export const tenantNotFoundProvider: Provider = {
   provide: TENANT_NOT_FOUND_BY_NAME,
   useFactory: function () {
     const confirm = inject(ConfirmationService);
+    const document = inject(DOCUMENT);
     return (response: HttpErrorResponse) => {
       const { error } = response.error;
       // hide loading donut

npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts

@@ -4,10 +4,12 @@ import { fromEvent, Observable, ReplaySubject, Subject } from 'rxjs';
 import { debounceTime, filter, takeUntil } from 'rxjs/operators';
 import { ConfirmationComponent } from '../components/confirmation/confirmation.component';
 import { Confirmation } from '../models/confirmation';
+import { DOCUMENT } from '@angular/common';
 
 @Injectable({ providedIn: 'root' })
 export class ConfirmationService {
   private contentProjectionService = inject(ContentProjectionService);
+  private document = inject(DOCUMENT);
 
   status$!: Subject<Confirmation.Status>;
   confirmation$ = new ReplaySubject<Confirmation.DialogData | null>(1);
@@ -87,7 +89,7 @@ export class ConfirmationService {
   }
 
   private listenToEscape() {
-    fromEvent<KeyboardEvent>(document, 'keyup')
+    fromEvent<KeyboardEvent>(this.document, 'keyup')
       .pipe(
         takeUntil(this.status$),
         debounceTime(150),