Activities of "Chris.Didonna"

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.

Sorry this is going round in circles mate.

SO I get "NullInjectorError: No provider for ManageProfileTabsService!" I add ManageProfileTabsService to app.module.ts providers and that goes away.

SO the code for MANAGE_PROFILE_TAB_PROVIDER and my PasswordChangeComponent/Module seems to be compiling. BUT the old profile screens are still there. Probably because I added ManageProfileTabsService to providers right?

I can't figure out how to solve that NullInjectorError properly.

MANAGE_PROFILE_TAB_PROVIDER

import { APP_INITIALIZER } from '@angular/core';
import { TwoFactorTabComponent } from '@volo/abp.ng.account/public';
import {
  eAccountManageProfileTabNames,
  ManageProfileTabsService,
} from '@volo/abp.ng.account/public/config';
import { PasswordChangeComponent } from './password-change.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: 'ChangePasswordNew',
        order: 5,
        component: PasswordChangeComponent,
      },
    ]);

    tabs.patch(eAccountManageProfileTabNames.TwoFactor, {
      name: 'Two factor authentication',
      component: TwoFactorTabComponent,
    });

    tabs.remove([eAccountManageProfileTabNames.ChangePassword]);

  };
}

app.module.ts

import { LOCALE_ID, NgModule } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import { OverlayModule } from '@angular/cdk/overlay';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import localeEnAu from '@angular/common/locales/en-AU';

import { CoreModule } from '@abp/ng.core';
import { registerLocale } from '@abp/ng.core/locale';
import { ThemeSharedModule } from '@abp/ng.theme.shared';
import { SettingManagementConfigModule } from '@abp/ng.setting-management/config';

import { SaasConfigModule } from '@volo/abp.ng.saas/config';
import { IdentityConfigModule } from '@volo/abp.ng.identity/config';
import { AccountAdminConfigModule } from '@volo/abp.ng.account/admin/config';
import { AuditLoggingConfigModule } from '@volo/abp.ng.audit-logging/config';
import { IdentityServerConfigModule } from '@volo/abp.ng.identity-server/config';
import { LanguageManagementConfigModule } from '@volo/abp.ng.language-management/config';
import { TextTemplateManagementConfigModule } from '@volo/abp.ng.text-template-management/config';
import { HttpErrorComponent, ThemeLeptonModule } from '@volo/abp.ng.theme.lepton';
import { CommercialUiConfigModule } from '@volo/abp.commercial.ng.ui/config';

import { NgxEchartsModule } from 'ngx-echarts';
import { NgxsModule } from '@ngxs/store';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { APP_ROUTE_PROVIDER } from './route.provider';
import { environment} from '../environments/environment';

import { REPORTS} from "./report/core/domain/report-plugin";
import { IOReportPlugin } from './report/io/IOReportPlugin';
import { HMAReportPlugin } from './report/hma/HMAReportPlugin';

import { REPORT_TYPES} from "./report-type/core/domain/report-type-plugin";
import { IOReportTypePlugin } from './report-type/io/IOReportTypePlugin';
import { HMAReportTypePlugin } from './report-type/hma/HMAReportTypePlugin';
import { PasswordChangeModule } from './password-change/password-change.module';
import { MANAGE_PROFILE_TAB_PROVIDER } from './password-change/manage-profile-tabs.provider';
// first part of setting local to au locale rather than
// the default en-us
registerLocaleData(localeEnAu);

const REPORT_PLUGINS = [
    {
      provide: REPORTS,
      multi: true,
      useClass: IOReportPlugin,
    },
    {
      provide: REPORTS,
      multi: true,
      useClass: HMAReportPlugin,
    },
];

const REPORT_TYPE_PLUGINS = [
  {
    provide: REPORT_TYPES,
    multi: true,
    useClass: IOReportTypePlugin,
  },
  {
    provide: REPORT_TYPES,
    multi: true,
    useClass: HMAReportTypePlugin,
  },
];

@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule,
    BrowserModule,
    BrowserAnimationsModule,
    NgbModule,
    NgMultiSelectDropDownModule.forRoot(),
    NgxEchartsModule.forRoot({
      echarts: () => import('echarts'),
    }),
    NgxsModule.forRoot([]),
    OverlayModule,

    CoreModule.forRoot({
      environment,
      registerLocaleFn: registerLocale(),
    }),
    ThemeSharedModule.forRoot({
      httpErrorConfig: {
        errorScreen: {
          component: HttpErrorComponent,
          forWhichErrors: [401, 403, 404, 500],
          hideCloseIcon: true,
        },
      },
    }),
    ThemeLeptonModule.forRoot(),
    CommercialUiConfigModule.forRoot(),
    SettingManagementConfigModule.forRoot(),
    AccountAdminConfigModule.forRoot(),
    IdentityConfigModule.forRoot(),
    LanguageManagementConfigModule.forRoot(),
    SaasConfigModule.forRoot(),
    AuditLoggingConfigModule.forRoot(),
    IdentityServerConfigModule.forRoot(),
    TextTemplateManagementConfigModule.forRoot(),
    PasswordChangeModule
  ],
  providers: [
    APP_ROUTE_PROVIDER,
    REPORT_PLUGINS,
    REPORT_TYPE_PLUGINS,
    // there has to be a better way to do this with the abp localization but
    // i couldn't work it out. For the timebeing set it to en-au so date/times
    // get converted correctly in the ui
    { provide: LOCALE_ID, useValue: 'en-AU' },
    MANAGE_PROFILE_TAB_PROVIDER
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

"Create new component my-awsome-tab-component with module"

the 'with module' part is missing from the instructions at https://docs.abp.io/en/commercial/5.3/ui/angular/manage-profile-page-tabs

Are there steps for that? Not having much success trying to do it manually

Adding in the MANAGE_PROFILE_TAB_PROVIDER prevents the site from loading, no idea what would be conflicting with it though.

Unfortunately, that appears to be for a different version of ABP. Some of that code simply isn't valid. But at least my approach is the same. Now only if it would work!

I was following this guide: https://docs.abp.io/en/abp/5.3/UI/Angular/Component-Replacement With this sample: https://docs.abp.io/en/abp/5.3/UI/Angular/Permission-Management-Component-Replacement