- 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)
-
0
Hi support,
Do you have an opinion on the subject?
Thanks.
-
0
Hello,
Do you want to change BookComponent's providers(Example: BookService)?
-
0
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, }, }, ], },
-
0
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 belowimport { 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 {}
-
0
Hi @muhammed, I can't see angular template on suite for microservice projects
-
1
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. -
0
Thanks