refactoring

npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts

@@ -9,7 +9,7 @@ const routes: Routes = [
   },
   {
     path: 'account',
-    loadChildren: () => import('@abp/ng.account').then(m => m.AccountModule.forLazy()),
+    loadChildren: () => import('@abp/ng.account').then(m => m.accountRoutes),
   },
   {
     path: 'identity',

npm/ng-packs/packages/account/src/lib/account.routes.ts

@@ -2,7 +2,8 @@ import {
   authGuard,
   ReplaceableComponents,
   ReplaceableRouteContainerComponent,
-  RouterOutletComponent,
+  ReplaceableRouteContainerStandaloneComponent,
+  RouterOutletStandaloneComponent,
 } from '@abp/ng.core';
 
 import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
@@ -13,20 +14,21 @@ import { ResetPasswordComponent } from './components/reset-password/reset-passwo
 import { eAccountComponents } from './enums/components';
 import { authenticationFlowGuard } from './guards';
 import { accountExtensionsResolver } from './resolvers';
+import { Routes } from '@angular/router';
 import { provideAccount } from './account';
 
 const canActivate = [authenticationFlowGuard];
 
-export const accountRoutes = [
+export const accountRoutes: Routes = [
   {
     path: '',
-    component: RouterOutletComponent,
+    component: RouterOutletStandaloneComponent,
     providers: [...provideAccount()],
     children: [
       { path: '', pathMatch: 'full', redirectTo: 'login' },
       {
         path: 'login',
-        component: ReplaceableRouteContainerComponent,
+        component: ReplaceableRouteContainerStandaloneComponent,
         canActivate,
         data: {
           replaceableComponent: {
@@ -38,7 +40,7 @@ export const accountRoutes = [
       },
       {
         path: 'register',
-        component: ReplaceableRouteContainerComponent,
+        component: ReplaceableRouteContainerStandaloneComponent,
         canActivate,
         data: {
           replaceableComponent: {
@@ -50,7 +52,7 @@ export const accountRoutes = [
       },
       {
         path: 'forgot-password',
-        component: ReplaceableRouteContainerComponent,
+        component: ReplaceableRouteContainerStandaloneComponent,
         canActivate,
 
         data: {
@@ -63,7 +65,7 @@ export const accountRoutes = [
       },
       {
         path: 'reset-password',
-        component: ReplaceableRouteContainerComponent,
+        component: ReplaceableRouteContainerStandaloneComponent,
         canActivate: [],
         data: {
           tenantBoxVisible: false,
@@ -76,7 +78,7 @@ export const accountRoutes = [
       },
       {
         path: 'manage',
-        component: ReplaceableRouteContainerComponent,
+        component: ReplaceableRouteContainerStandaloneComponent,
         canActivate: [authGuard],
         resolve: [accountExtensionsResolver],
         data: {

npm/ng-packs/packages/account/src/public-api.ts

@@ -7,3 +7,5 @@ export * from './lib/services';
 export * from './lib/tokens';
 export * from './lib/utils';
 export * from './lib/resolvers';
+export * from './lib/account.routes';
+export * from './lib/account';

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

@@ -1,3 +1,4 @@
 export * from './dynamic-layout.component';
 export * from './replaceable-route-container.component';
 export * from './router-outlet.component';
+export * from './replaceable-route-container-standalone.component';

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

@@ -0,0 +1,47 @@
+import { Component, OnInit, Type } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { distinctUntilChanged } from 'rxjs/operators';
+import { ReplaceableComponents } from '../models/replaceable-components';
+import { ReplaceableComponentsService } from '../services/replaceable-components.service';
+import { SubscriptionService } from '../services/subscription.service';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'abp-replaceable-route-container',
+  template: `
+    <ng-container *ngComponentOutlet="externalComponent || defaultComponent"></ng-container>
+  `,
+  imports: [CommonModule],
+  providers: [SubscriptionService],
+})
+export class ReplaceableRouteContainerStandaloneComponent implements OnInit {
+  defaultComponent!: Type<any>;
+
+  componentKey!: string;
+
+  externalComponent?: Type<any>;
+
+  constructor(
+    private route: ActivatedRoute,
+    private replaceableComponents: ReplaceableComponentsService,
+    private subscription: SubscriptionService,
+  ) {}
+
+  ngOnInit() {
+    this.defaultComponent = this.route.snapshot.data.replaceableComponent.defaultComponent;
+    this.componentKey = (
+      this.route.snapshot.data.replaceableComponent as ReplaceableComponents.RouteData
+    ).key;
+
+    const component$ = this.replaceableComponents
+      .get$(this.componentKey)
+      .pipe(distinctUntilChanged());
+
+    this.subscription.addOne(
+      component$,
+      (res = {} as ReplaceableComponents.ReplaceableComponent) => {
+        this.externalComponent = res.component;
+      },
+    );
+  }
+}

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

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 @Component({
   standalone: false,
@@ -6,3 +7,10 @@ import { Component } from '@angular/core';
   template: ` <router-outlet></router-outlet> `,
 })
 export class RouterOutletComponent {}
+
+@Component({
+  selector: 'abp-router-outlet',
+  template: ` <router-outlet></router-outlet> `,
+  imports: [RouterModule],
+})
+export class RouterOutletStandaloneComponent {}