Activities of "Mehmet"

It could be. I can't understand why it isn't working in your app. Please check the angular-oauth2-oidc library documentation out. Maybe you can find an answer.

What is your app version?

Hi,

With regards to the Angular specific styling, you mention that there is something coming in v4.2-preview that will make it easier to add our own custom styling to the Lepton themed Angular components. Are you able to provide further details on the feature and how it will work?

As you know, there are 6 styles for the Lepton. When the new feature available in the v4.2-preview, you can create your own style e.g "Style 7" by adding the lepton7.css file that you can create freely. You will be able to change all colors, border styles, etc. in your CSS file. In addition, the existing style change area shown below will be able to be customized.

In the meantime, before the new feature is available, if we had full access to the commercial module sourcecode (i.e business plan), would we be able to make our own styles for the Lepton themed Angular UI and put them into the application without too much trouble?

Yes, if you had the source code, you could load your own style and remove the style(s) what you want, by improving the code.

Is there a guide somewhere on how this can be done with the Angular UI?

We will provide a guide about this.

You can override the Lepton styles easily.

1- Find the target class name via the browser's dev-tools:

2- Add custom style to the src/styles.scss file like this:

// styles.scss

.user-avatar-big {
  border-radius: 3px;
  border: 1px solid red;
}

That's it, see the result:

For other customization in Angular UI, please refer to the below docs:

Modifying the Menu Component Replacement Custom Setting Page

Hi

I tried, it is working. See:

The code I placed to the app.component.ts:

import { Component } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { filter, tap } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `
    <abp-loader-bar></abp-loader-bar>
    <abp-dynamic-layout></abp-dynamic-layout>
  `,
})
export class AppComponent {
  constructor(private oAuthService: OAuthService) {
    this.oAuthService.events
      .pipe(
        tap(console.warn),
        filter(event => event?.type === 'logout'),
      )
      .subscribe(event => {
        // logout event fired
        alert('event type: ' + event.type);
      });
  }
}

Since the app redirects to the MVC after logout, you may not see the event result. Please add an alert and test again.

Hello Mohammad

As of v4.0, the AccountRoutingModule has been removed. So you have to remove the 'account' path from your app-routing.module.ts if you are using the v4.x packages. (remove below element)

{
path: 'account',
loadChildren: () => import(...
}

For your second question

You should run the HttpApi.Host project in the terminal via dotnet run command. VS blocks the external requests.

The versions of the Angular packages should be the same as the backend. Because there are breaking changes in the v4.0 backend. So Angular v4.x packages work exactly with the v4.x backend. You should install the v3.3.1 packages.

There is no any documentation, no need to setup the Lepton theme manually. Because the Lepton theme already configured in the app-pro template.

I suggest you download a new template and compare it with your application. Especially look at the styles array of angular.json and app.module.ts.

Could you upgrade your version to v4.1-rc.2 or v4.0.2 and try again?

Can you share the angular.json content with us?

One more thing, please generate a new app via ABP CLI, then test the Angular UI. Please let me know if you encounter the problem with new app.

What is your version?

Can you check the console of dev-tools? Do you see any errors?

What about the question 1?

Unfortunately, there is no way to achieve this for now. We created internal issues to improve the dynamic loading of lepton styles.

Hi @lalitChougule

Please change the navigating code as the following:

 this.router.navigate(['account'], {queryParams: accountType: 'supplier' });