Activities of "Chris.Didonna"

There's not much else to tell really.

1. Make a setting in appSettings.json for your HttpApi.Host project
2. Make a SettingsDefinitionProvider and retrieve the setting so you can set it's field 'IsVisibleToClients' to true.
3. Add ConfigStateService to a component in your Angular app.
4. Use getSetting to get the value of the setting.

This all worked with the pre-built ABP setting, 'Abp.Mailing.Smtp.Host' but not with one that I've defined.

Ok we did it!

I got MyAccount into Angular by following Account Module Implementation here: https://docs.abp.io/en/abp/5.3/UI/Angular/Account-Module#my-account-page

Then reimplementing my original replace component code in the question, the tab now shows my custom changes.

Hooray! Thanks for your patience and persistence Sumeyye. You're a saint.

Yes this was all set up before my time. No amount of overriding in the Angular code is going to effect a page served from a different endpoint. If I can't rearrange that then I reckon I'm stuffed.

Upgrading the ABP version is a whole set of other headaches as all the obsolete code in all the modules we are using will also need to be fixed just to get the site to load. I'm trying to avoid that.

I'm following the first link now to see if that works.

We have another project running ABP 7.3.2 and I have tested your changes there and it works first time. I also notice the MyAccount pages load from the Angular endpoint.

So we need to figure out the differences for the project that actually needs to change.

• Running ABP 5.3.0
• MyAccount loads a page from HttpApi.Host endpoint, not the Angular endpoint.

Hello again, I have produced the case by creating a custom component named change-password and configured the tabs as follows:

for manage-profile-tabs.provider.ts

// angular\src\app\change-password\providers\manage-profile-tabs.provider.ts 
import { APP_INITIALIZER } from '@angular/core'; 
import { 
  eAccountManageProfileTabNames, 
  ManageProfileTabsService, 
} from '@volo/abp.ng.account/public/config'; 
import { ChangePasswordComponent } from '../change-password.component'; 
 
export const MANAGE_PROFILE_TAB_PROVIDER = { 
  provide: APP_INITIALIZER, 
  useFactory: configureManageProfileTabs, 
  deps: [ManageProfileTabsService], 
  multi: true, 
}; 
 
export function configureManageProfileTabs(tabs: ManageProfileTabsService) { 
  return () => { 
    tabs.add([ 
      { 
        name: '::ChangePassword', 
        order: 2, 
        component: ChangePasswordComponent, 
      }, 
    ]); 
 
    tabs.remove([eAccountManageProfileTabNames.ChangePassword]); 
  }; 
} 
 

and then, added MANAGE_PROFILE_TAB_PROVIDER for the app module providers:

// angular\src\app\app.module.ts 
import { CoreModule } from '@abp/ng.core'; 
import { GdprConfigModule } from '@volo/abp.ng.gdpr/config'; 
import { SettingManagementConfigModule } from '@abp/ng.setting-management/config'; 
import { ThemeSharedModule } from '@abp/ng.theme.shared'; 
import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { CommercialUiConfigModule } from '@volo/abp.commercial.ng.ui/config'; 
import { AccountAdminConfigModule } from '@volo/abp.ng.account/admin/config'; 
import { AccountPublicConfigModule } from '@volo/abp.ng.account/public/config'; 
import { AuditLoggingConfigModule } from '@volo/abp.ng.audit-logging/config'; 
import { IdentityConfigModule } from '@volo/abp.ng.identity/config'; 
import { LanguageManagementConfigModule } from '@volo/abp.ng.language-management/config'; 
import { registerLocale } from '@volo/abp.ng.language-management/locale'; 
import { SaasConfigModule } from '@volo/abp.ng.saas/config'; 
import { TextTemplateManagementConfigModule } from '@volo/abp.ng.text-template-management/config'; 
import { environment } from '../environments/environment'; 
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { APP_ROUTE_PROVIDER } from './route.provider'; 
import { OpeniddictproConfigModule } from '@volo/abp.ng.openiddictpro/config'; 
import { FeatureManagementModule } from '@abp/ng.feature-management'; 
import { AbpOAuthModule } from '@abp/ng.oauth'; 
import { ThemeLeptonXModule } from '@volosoft/abp.ng.theme.lepton-x'; 
import { SideMenuLayoutModule } from '@volosoft/abp.ng.theme.lepton-x/layouts'; 
import { MANAGE_PROFILE_TAB_PROVIDER } from './change-password/providers/manage-profile-tabs.provider'; 
 
@NgModule({ 
  declarations: [AppComponent], 
  imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    AppRoutingModule, 
    CoreModule.forRoot({ 
      environment, 
      registerLocaleFn: registerLocale(), 
    }), 
    AbpOAuthModule.forRoot(), 
    ThemeSharedModule.forRoot(), 
    AccountAdminConfigModule.forRoot(), 
    AccountPublicConfigModule.forRoot(), 
    IdentityConfigModule.forRoot(), 
    LanguageManagementConfigModule.forRoot(), 
    SaasConfigModule.forRoot(), 
    AuditLoggingConfigModule.forRoot(), 
    OpeniddictproConfigModule.forRoot(), 
    TextTemplateManagementConfigModule.forRoot(), 
    SettingManagementConfigModule.forRoot(), 
 
    CommercialUiConfigModule.forRoot(), 
    FeatureManagementModule.forRoot(), 
    GdprConfigModule.forRoot({ 
      privacyPolicyUrl: 'gdpr-cookie-consent/privacy', 
      cookiePolicyUrl: 'gdpr-cookie-consent/cookie', 
    }), 
    ThemeLeptonXModule.forRoot(), 
    SideMenuLayoutModule.forRoot(), 
  ], 
  providers: [APP_ROUTE_PROVIDER, MANAGE_PROFILE_TAB_PROVIDER], //added MANAGE_PROFILE_TAB_PROVIDER here 
  bootstrap: [AppComponent], 
}) 
export class AppModule {} 
 

Normally, this should be enough to get the expected behavior. However, I suspect that something that has been configured in PasswordChangeModule may cause the injection error. That would be the best if you can provide a little more detail on this. Thank you for your cooperation.

Ah, I see you've imported OpenIddict here.

I'm running on ABP version 5.3 mate, no OpenIddict.

Try again using version 5.3.

Another detail that might help, when removing MANAGE_PROFILE_TAB_PROVIDER so I can get the site to load and open the MyAccount link, it goes to a page served directly from the HttpApi.Host (port 8443), not an Angular page (port 4200). I

Is that expected behaviour? Am I supposed to configure something in the host to let this work?

Also removing password change component from manage-profile-tabs.provider.ts altogether, I still get the same error.

Something about the way MANAGE_PROFILE_TAB_PROVIDER is handled by the framework isn't working.

Here's password change module, unchanged from the ng generate version:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PasswordChangeComponent } from './password-change.component';



@NgModule({
  declarations: [
    PasswordChangeComponent
  ],
  imports: [
    CommonModule
  ]
})
export class PasswordChangeModule { }

Here's the component also unchanged:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-password-change',
  templateUrl: './password-change.component.html',
  styleUrls: ['./password-change.component.scss']
})
export class PasswordChangeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Removing the reference to password change from app.module.ts leaves me with the same error:

NullInjectorError: R3InjectorError(AppModule)[ApplicationModule -> ApplicationRef -> ApplicationInitStatus -> InjectionToken Application Initializer -> [object Object] -> ManageProfileTabsService -> ManageProfileTabsService -> ManageProfileTabsService]: 

  NullInjectorError: No provider for ManageProfileTabsService!

Something else foundational is missing from the site implementation itself but I don't know where to look for it. What normally injects the ManageProfileTabsService into the stack? It isn't explicitly called in app.module.ts so what part of what file is doing it? I search the sites code base and only my manage-profile-tabs.provider.ts file references it, so the problem is in the framework somewhere. Did a later version of 5.3 get a bug fix to rectify this that I have to reproduce?

Setting that const MANAGE_PROFILE_TAB_PROVIDER is breaking some other validation or other.

Best I can guess, Angular isn't picking up that MANAGE_PROFILE_TAB_PROVIDER is standing in for ManageProfileTabsService. What can I look at, where is that supposed to happen, what's ABP.IO doing? Give me something to poke and I'll poke it, it's not my code base.

Adding ManageProfileTabsService to providers prevents the custom component page from showing

Removing it causes the error to occur.