Open Closed

Replace component template with ABP suite #4218


User avatar
0
guven.uysall created
  • ABP Framework version: v5.3.3
  • UI type: Angular

Hi support, about three months ago I asked the following question. https://support.abp.io/QA/Questions/3667/Angular-Replace-Component

The answer was given below. https://support.abp.io/QA/Questions/3667/Angular-Replace-Component#answer-4cf80b67-c79f-0795-0aea-3a06349df410

{
    path: '',
    component: RouterOutletComponent,
    canActivate: [AuthGuard, PermissionGuard],
    children: [
      {
        path: '',
        component: ReplaceableRouteContainerComponent,
        data: {
          replaceableComponent: {
            key: 'YOUR_COMPONENT_KEY',
            defaultComponent: BookComponent,
          } as ReplaceableComponents.RouteData<BookComponent>,
        },
      },
    ],
  },

how can i set it as a template in ABP suite. I can edit the appcomponent side myself, but how can I replace the provider of the components with the template in suite.

Thanks your answer @muhammedaltug :)


7 Answer(s)
  • User Avatar
    0
    guven.uysall created

    Hi support,

    Do you have an opinion on the subject?

    Thanks.

  • User Avatar
    0
    muhammedaltug created

    Hello,

    Do you want to change BookComponent's providers(Example: BookService)?

  • User Avatar
    0
    guven.uysall created

    Hi @muhammed,

    Actually, I want to update the routing module suite template according to my own request.

    If I make the code below without using tepmlate, it will disappear the next time I generate code with suite.

    {
        path: '',
        component: RouterOutletComponent,
        canActivate: [AuthGuard, PermissionGuard],
        children: [
          {
            path: '',
            component: ReplaceableRouteContainerComponent,
            data: {
              replaceableComponent: {
                key: 'YOUR_COMPONENT_KEY',
                defaultComponent: BookComponent,
              } as ReplaceableComponents.RouteData,
            },
          },
        ],
      },
    
  • User Avatar
    0
    muhammedaltug created

    Hello,

    You can edit the template on ABP Suite. Click templates on the navbar and edit Frontend.Angular.__name@kebab__-routing.module.ts.template to edit the routing module. For your case, you can replace it with the content below

    import { AuthGuard, PermissionGuard, RouterOutletComponent, ReplaceableComponents } from '@abp/ng.core';
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { <%= name %>Component } from './components/<%= kebab(name) %>.component';
    
    const routes: Routes = [
    {
        path: '',
        component: RouterOutletComponent,
        canActivate: [AuthGuard, PermissionGuard],
        children: [
          {
            path: '',
            component: <%= name %>Component,
            data: {
              replaceableComponent: {
                key: '<%= name %>ComponentKey',
                defaultComponent: <%= name %>Component,
              } as ReplaceableComponents.RouteData,
            },
          },
        ],
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule],
    })
    export class <%= name %>RoutingModule {}
    
    
  • User Avatar
    0
    guven.uysall created

    Hi @muhammed, I can't see angular template on suite for microservice projects

  • User Avatar
    1
    muhammedaltug created

    Hello

    We created an internal issue about this problem.

    As a workaround, you can replace angular/.suite/schematics/commands/entity/files/__modulePath__/_name@kebab__-routing.module.ts.template file manually.

  • User Avatar
    0
    guven.uysall created

    Thanks

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11