update: some upgrade enhancements for the core

npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts

@@ -1,8 +1,9 @@
-import { ChangeDetectorRef, Component, inject, input } from '@angular/core';
+import {ChangeDetectorRef, Component, inject, input, ChangeDetectionStrategy,} from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
 // Not an abstract class on purpose. Do not change!
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: '',
 })
 export class AbstractNgModelComponent<T = any, U = T> implements ControlValueAccessor {

npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, input, isDevMode, Type } from '@angular/core';
+import {Component, inject, input, isDevMode, Type, ChangeDetectionStrategy, signal,} from '@angular/core';
 import { NgComponentOutlet } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { startWith } from 'rxjs/operators';
@@ -20,20 +20,21 @@ import { TreeNode } from '../utils/tree-utils';
 import { DYNAMIC_LAYOUTS_TOKEN } from '../tokens/dynamic-layout.token';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-dynamic-layout',
   template: `
-    @if (isLayoutVisible) {
+    @if (isLayoutVisible()) {
-      <ng-container [ngComponentOutlet]="layout" />
+      <ng-container [ngComponentOutlet]="layout()" />
     }
   `,
   providers: [SubscriptionService],
   imports: [NgComponentOutlet],
 })
 export class DynamicLayoutComponent {
-  layout?: Type<any>;
+  readonly layout = signal<Type<any> | undefined>(undefined);
-  layoutKey?: eLayoutType;
+  readonly layoutKey = signal<eLayoutType | undefined>(undefined);
   readonly layouts = inject(DYNAMIC_LAYOUTS_TOKEN);
-  isLayoutVisible = true;
+  readonly isLayoutVisible = signal(true);
   readonly defaultLayout = input<eLayoutType>(undefined);
 
   protected readonly router = inject(Router);
@@ -69,14 +70,14 @@ export class DynamicLayoutComponent {
 
     if (!expectedLayout) expectedLayout = eLayoutType.empty;
 
-    if (this.layoutKey === expectedLayout) return;
+    if (this.layoutKey() === expectedLayout) return;
 
     const key = this.layouts.get(expectedLayout);
     if (key) {
-      this.layout = this.getComponent(key)?.component;
+      this.layout.set(this.getComponent(key)?.component);
-      this.layoutKey = expectedLayout;
+      this.layoutKey.set(expectedLayout);
     }
-    if (!this.layout) {
+    if (!this.layout()) {
       this.showLayoutNotFoundError(expectedLayout);
     }
   }
@@ -110,8 +111,8 @@ export class DynamicLayoutComponent {
 
   private listenToLanguageChange() {
     this.subscription.addOne(this.localizationService.languageChange$, () => {
-      this.isLayoutVisible = false;
+      this.isLayoutVisible.set(false);
-      setTimeout(() => (this.isLayoutVisible = true), 0);
+      setTimeout(() => this.isLayoutVisible.set(true), 0);
     });
   }
 

npm/ng-packs/packages/core/src/lib/components/replaceable-route-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Type, inject } from '@angular/core';
+import { Component, OnInit, Type, inject, ChangeDetectionStrategy, signal } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { ReplaceableComponents } from '../models/replaceable-components';
@@ -7,10 +7,9 @@ import { SubscriptionService } from '../services/subscription.service';
 import { NgComponentOutlet } from '@angular/common';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-replaceable-route-container',
-  template: `
+  template: ` <ng-container *ngComponentOutlet="externalComponent() || defaultComponent" /> `,
-    <ng-container *ngComponentOutlet="externalComponent || defaultComponent"></ng-container>
-  `,
   providers: [SubscriptionService],
   imports: [NgComponentOutlet],
 })
@@ -23,7 +22,7 @@ export class ReplaceableRouteContainerComponent implements OnInit {
 
   componentKey!: string;
 
-  externalComponent?: Type<any>;
+  readonly externalComponent = signal<Type<any> | undefined>(undefined);
 
   ngOnInit() {
     this.defaultComponent = this.route.snapshot.data.replaceableComponent.defaultComponent;
@@ -38,7 +37,7 @@ export class ReplaceableRouteContainerComponent implements OnInit {
     this.subscription.addOne(
       component$,
       (res = {} as ReplaceableComponents.ReplaceableComponent) => {
-        this.externalComponent = res.component;
+        this.externalComponent.set(res.component);
       },
     );
   }

npm/ng-packs/packages/core/src/lib/components/router-outlet.component.ts

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-router-outlet',
   template: ` <router-outlet></router-outlet> `,
   imports: [RouterOutlet],

npm/ng-packs/packages/core/src/lib/services/title-strategy.service.ts

@@ -25,7 +25,7 @@ export class AbpTitleStrategy extends TitleStrategy {
     });
   }
 
-  override updateTitle(routerState: RouterStateSnapshot) {
+  override updateTitle(routerState: RouterStateSnapshot): void {
     this.routerState = routerState;
     if (!routerState?.root) {
       return;
@@ -41,7 +41,7 @@ export class AbpTitleStrategy extends TitleStrategy {
     if (!title) {
       return this.title.setTitle(projectName);
     }
-    
+
     let localizedText = this.localizationService.instant({ key: title, defaultValue: title });
     if (!this.disableProjectName) {
       localizedText += ` | ${projectName}`;