Open Closed

How to implement angular breaking changes in abp version upgrade #1062


User avatar
0
kaustubh.kale@ness.com created

Check the docs before asking a question: https://docs.abp.io/en/commercial/latest/ Check the samples, to see the basic tasks: https://docs.abp.io/en/commercial/latest/samples/index The exact solution to your question may have been answered before, please use the search on the homepage.

ABP Framework version: v4.2.2 UI type: Angular DB provider: EF Core Tiered (MVC) or Identity Server Seperated (Angular): no / yes Exception message and stack trace: Steps to reproduce the issue:

Using Permissionservice and Statesession service we resolved some of the issue but we are facing some challenges in below issue . How to implement those changes in custom component.

1)

this.authService.login(this.form.get('username').value, this.form.get('password').value)
      .pipe(
        catchError((err) => {
          this._snackBar
            .open(err.error.error_description, 'Close', {
              panelClass: 'snackbar_login',
              duration: 6000,
            })
            .afterOpened()
            .subscribe(() => {
              const elementall = document.getElementsByClassName('snackbar_login');
              const elem0 = elementall[0] as HTMLInputElement;
              const elem1 = elementall[0].parentElement;
              elem1.style.cssText = 'width:96% !important';
              elem0.style.cssText = 'display:inline-block !important';
            });
          this.inProgress = false;
          return err;
        }),
        finalize(() => (this.inProgress = false))
      )
      .subscribe(() => {
        this.store.dispatch(new SetRemember(this.form.get('remember').value));
        localStorage.setItem('thresholdLimitChecked', 'false');
      });
  }
}

for login method is giving error.

2)

this.store.dispatch(new SetRemember(this.form.get('remember').value));

for setRemember is giving error.

3)

  // this.store.dispatch(
    //   new AddReplaceableComponent({ component: AccountComponent, key: eAccountComponents.Account }),
    // ); -- previous code
    this.replaceableComponents.add({
      component: AccountComponent,
      key: eAccountComponents.Account,
    });  --new code

for the new code for key is giving error

Kindly let us know how to implement fixes.


11 Answer(s)
  • User Avatar
    0
    Repunjay created

    Hi ABP team,

    Could you please review this issue and advise on resolution steps? This is blocker for us and we are not able to proceed further. Our app (.Net and Angular) was upgraded from ABP 3.0 to latest 4.2 and we are trying to implement CATCHA and 2FA into the application but not able to proceed due to compilation errors of Angular project, please advise.

    Thanks,

  • User Avatar
    0
    Mehmet created

    Hi

    AccountPublicModule have been removed in v4.0. But the module will be available in v4.3.

    For now, you should comment out these lines to avoid errors. In v4.2, you can use the authorization code flow. See this blog post to learn how to use the authorization code flow. You can also see the Angular UI v4.0 migration guide.

    When v4.3 is released, you can replace the AccountComponent again and use the resource owner password flow. But there are a few difference. AuthService's login method parameters has been changed. See the login method. SetRemember action has been removed, you can totally remove this. AccountModule renamed to AccountPublicModule, you shoud see v4.3 blog post when it is published to learn the AccountPublicModule implementation.

    I'd like to ask you a question, why do you use @abp/ng.identity package instead of @volo/abp.ng.identity (commercial identity package)?

    You can find out the eIdentityComponents enum in the config entrypoint. Change the import as shown below:

    import { eIdentityComponents } from '@volo/abp.ng.identity/config';

    or

    import { eIdentityComponents } from '@abp/ng.identity/config';

  • User Avatar
    0
    Repunjay created

    Thanks Mehmet. We will look into your suggestions. Few questions -

    1. When will ABP version 4.3 be available for us?
    2. If we upgrade to 4.3, will we be able to re-use our AccountComponent as-is and integrate CAPTCHA and 2FA?

    Thanks,

  • User Avatar
    0
    Mehmet created

    See this page for the release dates.

    Unfortunately, you cannot use the 2FA. It is not supported in resource owner password flow.

    CAPTCHA feature is not implemented yet for Angular UI AccountPublicModule. But you can implement it by replacing the AccountComponent.

  • User Avatar
    0
    Repunjay created

    Thanks Mehmet. I'm bit confused, please clarify below points as CAPTCHA and 2FA will be important features for our application -

    1. Do you mean 2FA and CAPTCHA features are not supported in Angular UI and even after upgrading to v4.3, these features cannot be integrated to Angular UI?
    2. How can we implement 2FA and CAPTCHA features provided within ABP framework into our existing Angular application (ABP version 3.0)? Please note, we have done some customization to AccountComponent so cannot remove it or replace it with MVC UI.
  • User Avatar
    0
    Mehmet created

    Do you mean 2FA and CAPTCHA features are not supported in Angular UI and even after upgrading to v4.3.

    Yes. But these feature can be integrated by replacing some components in Angular UI account public module (login, register, etc. so what you need). Of course,will be need to do something on the backend side.

    We're considering the CAPTCHA implementation for Angular UI. We've created an internal issue about that.

    Actually, I don't know how you can implement 2FA for resource owner password flow. We will discuss this and let you know the outcome of the discussion.

  • User Avatar
    0
    Mehmet created

    Hi,

    We've implemented the reCAPTCHA to account public module. It can be used in v4.3. You can enable it by adding your configuration in Settings > Account > Captcha.

  • User Avatar
    0
    Repunjay created

    Thanks for the update. Would you also refer us some guideline/help to implement 2FA in Angular UI. We have an urgent requirement to implement 2FA into our application.

  • User Avatar
    0
    Mehmet created

    We are still considering this. I will inform you about the progress as soon as possible.

  • User Avatar
    0
    Repunjay created

    Thanks for the update.
    Would you also refer us some guideline/help to implement 2FA in Angular UI. We have an urgent requirement to implement 2FA into our application.

    hi, Is there any update to this requirement? Please advise to implement 2FA in Angular UI.

  • User Avatar
    0
    Mehmet created

    Hi,

    We've added 2FA feature to Angular UI. It will be available in v4.4.

    Thanks.

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