update: core package for the latest upgrade (state management and html properties)

npm/ng-packs/packages/core/project.json

@@ -30,7 +30,7 @@
       "executor": "@nx/vitest:test",
       "outputs": ["{options.reportsDirectory}"],
       "options": {
-        "reportsDirectory": "../../coverage/packages/core"
+        "reportsDirectory": "{projectRoot}/../../coverage/packages/core"
       }
     }
   }

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

@@ -1,32 +1,29 @@
-import {
+import { Component, inject, input, isDevMode, Type } from '@angular/core';
-  Component,
+import { NgComponentOutlet } from '@angular/common';
-  inject,
-  input,
-  isDevMode,
-  Type,
-} from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { startWith } from 'rxjs/operators';
+
 import { eLayoutType } from '../enums/common';
 import { ABP } from '../models';
 import { ReplaceableComponents } from '../models/replaceable-components';
+
 import { LocalizationService } from '../services/localization.service';
 import { ReplaceableComponentsService } from '../services/replaceable-components.service';
 import { RouterEvents } from '../services/router-events.service';
 import { RoutesService } from '../services/routes.service';
 import { SubscriptionService } from '../services/subscription.service';
+
 import { RouteBasedCultureUrlService } from '../services/route-based-culture-url.service';
 import { findRoute } from '../utils/route-utils';
 import { TreeNode } from '../utils/tree-utils';
+
 import { DYNAMIC_LAYOUTS_TOKEN } from '../tokens/dynamic-layout.token';
-import { EnvironmentService } from '../services';
-import { NgComponentOutlet } from '@angular/common';
-import { filter, take } from 'rxjs';
 
 @Component({
   selector: 'abp-dynamic-layout',
   template: `
     @if (isLayoutVisible) {
-      <ng-container [ngComponentOutlet]="layout"></ng-container>
+      <ng-container [ngComponentOutlet]="layout" />
     }
   `,
   providers: [SubscriptionService],
@@ -46,24 +43,25 @@ export class DynamicLayoutComponent {
   protected readonly replaceableComponents = inject(ReplaceableComponentsService);
   protected readonly subscription = inject(SubscriptionService);
   protected readonly routerEvents = inject(RouterEvents);
-  protected readonly environment = inject(EnvironmentService);
   protected readonly routeCultureUrl = inject(RouteBasedCultureUrlService);
 
   constructor() {
-    const dynamicLayoutComponent = inject(DynamicLayoutComponent, { optional: true, skipSelf: true });
+    const dynamicLayoutComponent = inject(DynamicLayoutComponent, {
+      optional: true,
+      skipSelf: true,
+    });
 
     if (dynamicLayoutComponent) {
       if (isDevMode()) console.warn('DynamicLayoutComponent must be used only in AppComponent.');
       return;
     }
-    this.checkLayoutOnNavigationEnd();
+    this.listenToLayoutChanges();
     this.listenToLanguageChange();
-    this.listenToEnvironmentChange();
   }
 
-  private checkLayoutOnNavigationEnd() {
+  private listenToLayoutChanges() {
     const navigationEnd$ = this.routerEvents.getNavigationEvents('End');
-    this.subscription.addOne(navigationEnd$, () => this.getLayout());
+    this.subscription.addOne(navigationEnd$.pipe(startWith(null)), () => this.getLayout());
   }
 
   private getLayout() {
@@ -120,19 +118,4 @@ export class DynamicLayoutComponent {
   private getComponent(key: string): ReplaceableComponents.ReplaceableComponent | undefined {
     return this.replaceableComponents.get(key);
   }
-
-  private listenToEnvironmentChange() {
-    this.environment
-      .createOnUpdateStream(x => x.oAuthConfig)
-      .pipe(
-        take(1),
-        filter(config => config.responseType === 'code'),
-      )
-      .subscribe(() => {
-        if (this.layout) {
-          return;
-        }
-        this.getLayout();
-      });
-  }
 }

npm/ng-packs/packages/core/src/lib/guards/permission.guard.ts

@@ -34,7 +34,10 @@ export class PermissionGuard implements IAbpGuard {
   protected readonly configStateService = inject(ConfigStateService);
   protected readonly routeCultureUrl = inject(RouteBasedCultureUrlService);
 
-  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot,
+  ): Observable<boolean | UrlTree> {
     let { requiredPolicy } = route.data || {};
 
     if (!requiredPolicy) {
@@ -86,7 +89,10 @@ export const permissionGuard: CanActivateFn = (
   let { requiredPolicy } = route.data || {};
 
   if (!requiredPolicy) {
-    const routeFound = findRoute(routesService, routeCultureUrl.getRoutePathForMatching(router, state.url));
+    const routeFound = findRoute(
+      routesService,
+      routeCultureUrl.getRoutePathForMatching(router, state.url),
+    );
     requiredPolicy = routeFound?.requiredPolicy;
   }
 

npm/ng-packs/packages/core/src/lib/strategies/projection.strategy.ts

@@ -1,7 +1,7 @@
 import {
   ApplicationRef,
-  ComponentFactoryResolver,
   ComponentRef,
+  createComponent,
   EmbeddedViewRef,
   Injector,
   TemplateRef,
@@ -31,14 +31,10 @@ export class ComponentProjectionStrategy<T extends Type<any>> extends Projection
   injectContent(injector: Injector) {
     this.containerStrategy.prepare();
 
-    const resolver = injector.get(ComponentFactoryResolver) as ComponentFactoryResolver;
+    const componentRef = this.containerStrategy.containerRef.createComponent(this.content, {
-    const factory = resolver.resolveComponentFactory<InferredInstanceOf<T>>(this.content);
+      index: this.containerStrategy.getIndex(),
-
-    const componentRef = this.containerStrategy.containerRef.createComponent(
-      factory,
-      this.containerStrategy.getIndex(),
       injector,
-    );
+    });
     this.contextStrategy.setContext(componentRef);
 
     return componentRef as ComponentRefOrEmbeddedViewRef<T>;
@@ -56,10 +52,10 @@ export class RootComponentProjectionStrategy<T extends Type<any>> extends Projec
 
   injectContent(injector: Injector) {
     const appRef = injector.get(ApplicationRef);
-    const resolver = injector.get(ComponentFactoryResolver) as ComponentFactoryResolver;
+    const componentRef = createComponent(this.content, {
-    const componentRef = resolver
+      environmentInjector: appRef.injector,
-      .resolveComponentFactory<InferredInstanceOf<T>>(this.content)
+      elementInjector: injector,
-      .create(injector);
+    });
 
     this.contextStrategy.setContext(componentRef);
 
@@ -172,8 +168,9 @@ export const PROJECTION_STRATEGY = {
   },
 };
 
-type ComponentRefOrEmbeddedViewRef<T> = T extends Type<infer U>
+type ComponentRefOrEmbeddedViewRef<T> =
-  ? ComponentRef<U>
+  T extends Type<infer U>
-  : T extends TemplateRef<infer C>
+    ? ComponentRef<U>
-  ? EmbeddedViewRef<C>
+    : T extends TemplateRef<infer C>
-  : never;
+      ? EmbeddedViewRef<C>
+      : never;

npm/ng-packs/packages/core/testing/src/lib/core-testing.module.ts

@@ -15,7 +15,7 @@ import {
 import { APP_BASE_HREF } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { provideRoutes } from '@angular/router';
+import { provideRouter } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MockPermissionService } from './services/mock-permission.service';
 import { MockRestService } from './services/mock-rest.service';
@@ -77,7 +77,7 @@ export class CoreTestingModule {
           provide: SORT_COMPARE_FUNC,
           useFactory: compareFuncFactory,
         },
-        provideRoutes(routes),
+        provideRouter(routes),
       ],
     };
   }