Merge pull request #10864 from abpframework/fix/10781

Angular UI: Fixed a problem with component initialization

npm/ng-packs/packages/account/src/lib/account-routing.module.ts

@@ -1,8 +1,8 @@
 import {
   AuthGuard,
-  DynamicLayoutComponent,
   ReplaceableComponents,
   ReplaceableRouteContainerComponent,
+  RouterOutletComponent,
 } from '@abp/ng.core';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
@@ -18,7 +18,7 @@ const routes: Routes = [
   { path: '', pathMatch: 'full', redirectTo: 'login' },
   {
     path: '',
-    component: DynamicLayoutComponent,
+    component: RouterOutletComponent,
     children: [
       {
         path: 'login',

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

@@ -1,4 +1,4 @@
-import { Component, Injector, Optional, SkipSelf, Type } from '@angular/core';
+import { Component, Injector, isDevMode, Optional, SkipSelf, Type } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { eLayoutType } from '../enums/common';
 import { ABP } from '../models';
@@ -13,13 +13,7 @@ import { TreeNode } from '../utils/tree-utils';
 
 @Component({
   selector: 'abp-dynamic-layout',
-  template: `
+  template: ` <ng-container *ngIf="isLayoutVisible" [ngComponentOutlet]="layout"></ng-container> `,
-    <ng-container *ngTemplateOutlet="layout ? componentOutlet : routerOutlet"></ng-container>
-    <ng-template #routerOutlet><router-outlet></router-outlet></ng-template>
-    <ng-template #componentOutlet
-      ><ng-container *ngIf="isLayoutVisible" [ngComponentOutlet]="layout"></ng-container
-    ></ng-template>
-  `,
   providers: [SubscriptionService],
 })
 export class DynamicLayoutComponent {
@@ -47,7 +41,10 @@ export class DynamicLayoutComponent {
     private routerEvents: RouterEvents,
     @Optional() @SkipSelf() dynamicLayoutComponent: DynamicLayoutComponent,
   ) {
-    if (dynamicLayoutComponent) return;
+    if (dynamicLayoutComponent) {
+      if (isDevMode) console.warn('DynamicLayoutComponent must be used only in AppComponent.');
+      return;
+    }
     this.route = injector.get(ActivatedRoute);
     this.router = injector.get(Router);
     this.routes = injector.get(RoutesService);

npm/ng-packs/packages/identity/src/lib/identity-routing.module.ts

@@ -1,9 +1,7 @@
 import {
-  AuthGuard,
+  AuthGuard, PermissionGuard,
-  DynamicLayoutComponent,
-  PermissionGuard,
   ReplaceableComponents,
-  ReplaceableRouteContainerComponent,
+  ReplaceableRouteContainerComponent, RouterOutletComponent
 } from '@abp/ng.core';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
@@ -16,7 +14,7 @@ const routes: Routes = [
   { path: '', redirectTo: 'roles', pathMatch: 'full' },
   {
     path: '',
-    component: DynamicLayoutComponent,
+    component: RouterOutletComponent,
     canActivate: [AuthGuard, PermissionGuard, IdentityExtensionsGuard],
     children: [
       {

npm/ng-packs/packages/setting-management/src/lib/setting-management-routing.module.ts

@@ -1,8 +1,8 @@
 import {
-  DynamicLayoutComponent,
+  AuthGuard,
   ReplaceableComponents,
   ReplaceableRouteContainerComponent,
-  AuthGuard,
+  RouterOutletComponent,
 } from '@abp/ng.core';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
@@ -12,7 +12,7 @@ import { eSettingManagementComponents } from './enums/components';
 const routes: Routes = [
   {
     path: '',
-    component: DynamicLayoutComponent,
+    component: RouterOutletComponent,
     canActivate: [AuthGuard],
     children: [
       {

npm/ng-packs/packages/tenant-management/src/lib/tenant-management-routing.module.ts

@@ -1,9 +1,9 @@
 import {
   AuthGuard,
-  DynamicLayoutComponent,
   PermissionGuard,
   ReplaceableComponents,
   ReplaceableRouteContainerComponent,
+  RouterOutletComponent,
 } from '@abp/ng.core';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
@@ -15,7 +15,7 @@ const routes: Routes = [
   { path: '', redirectTo: 'tenants', pathMatch: 'full' },
   {
     path: '',
-    component: DynamicLayoutComponent,
+    component: RouterOutletComponent,
     canActivate: [AuthGuard, PermissionGuard, TenantManagementExtensionsGuard],
     children: [
       {