Activities of "Mehmet"

Hi @lalitChougule

@abp/ng.theme-shared package loads the chart.js lazily. You should subscribe to the chartJsLoaded$ observable to catch the chart.js load event as shown below:

import { chartJsLoaded$ } from '@abp/ng.theme.shared';
import { Component, ElementRef, ViewChild } from '@angular/core';

declare const Chart;

@Component({
  template: `
    <canvas #canvas width="400" height="400"></canvas>
  `,
})
export class YourComponent {
  @ViewChild('canvas') canvas: ElementRef<HTMLCanvasElement>;
  chart: any;


  ngAfterViewInit() {
    chartJsLoaded$.subscribe(() => {
      setTimeout(() => {
        const ctx = this.canvas.nativeElement.getContext('2d');
        this.chart = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [
              {
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)',
                ],
                borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)',
                ],
                borderWidth: 1,
              },
            ],
          },
          options: {
            scales: {
              yAxes: [
                {
                  ticks: {
                    beginAtZero: true,
                  },
                },
              ],
            },
          },
        });
      }, 0);
    });
  }
}

I hope this helps you. We will create an article or doc about chart.js usage in the Angular UI.

Hi @vishalnikam

I can't reproduce the problem. How can I reproduce it? Can you describe the reproducing steps in detail?

Can you also update your app to v3.0.5 and try again? We have fixed some problems with v3.0.5.

1. You have to create a provider named setting-tab.provider.ts near to your-module-config.module.

You can create a folder named providers in the same folder as YourPackageConfigModule.

2. Fill the content of the new provider file like below:

import { SettingTabsService } from '@abp/ng.core';
import { APP_INITIALIZER } from '@angular/core';
import { YourSettingsComponent } from '../components/your-settings.component';

export const YOUR_MODULE_NAME_SETTING_TAB_PROVIDER = [
  {
    provide: APP_INITIALIZER,
    useFactory: configureSettingTabs,
    deps: [SettingTabsService],
    multi: true,
  },
];

export function configureSettingTabs(settingtabs: SettingTabsService) {
  return () => {
    settingtabs.add([
      {
        name: 'YourModuleName.YourSettings',
        order: 1,
        requiredPolicy: 'permission key here',
        component: YourSettingsComponent,
      },
    ]);
  };
}

3. Open the YourPackageConfigModule and add new provider to forRoot's providers array like below:

import { YOUR_MODULE_NAME_SETTING_TAB_PROVIDER } from './providers/setting-tab.provider';

@NgModule(/* module metadata */)
export class YourPackageConfigModule {
  static forRoot(): ModuleWithProviders<YourPackageConfigModule> {
    return {
      ngModule: YourPackageConfigModule,
      providers: [YOUR_MODULE_NAME_SETTING_TAB_PROVIDER],
    };
  }
}

The YourPackageConfigModule must be imported to the AppModule with calling the forRoot method

//app.module.ts

//...
imports: [
//...
YourPackageConfigModule.forRoot()
]
// ...

Do you have route.provider.ts or your-module-name-config.service?

Which template you are using, module or app-pro?

Hi @murat.kebabci

Your dev-app must include the @abp/ng.setting-management package.

How to install this package?

1. Run the following command to install NPM package:

yarn add @abp/ng.setting-management --tilde

2. Import SettingManagementConfigModule to app.module.ts as shown below:

import { SettingManagementConfigModule } from '@abp/ng.setting-management/config';

@NgModule({
  imports: [
    // ...
    SettingManagementConfigModule.forRoot(),
  ],
})
export class AppModule {}

3. Add following path to app-routing.module.ts:

const routes: Routes = [
  //...
  {
    path: 'setting-management',
    loadChildren: () =>
      import('@abp/ng.setting-management').then((m) => m.SettingManagementModule.forLazy()),
  },
];
// ...

Then you will access the setting-management page like below link:

http://localhost:4200/setting-management

If you cannot see the Setting Management navigation link on the menu, please check setting management page policy or make sure a custum setting page is registered.

Please let me know if your issue is resolved.

Hi @suraj.kumbhar

We developed the Angular UI to support Code Flow (PKCE). The Code Flow will be default authentication flow in the v3.1. In this flow, you will redirect to the Identity Server authentication page and be able to use all features of the Identity Server. If you can integrate the Azure AD to Razor Pages UI, you will be used the AD properly.

Hi @kirtik

We developed the Angular UI to support Code Flow (PKCE). The Code Flow will be default authentication flow in the next version (v3.1). In this flow, you will redirect to the Identity Server authentication page and be able to use all features of the Identity Server. If you can integrate the Azure AD to Identity Server project, you will get access token via Azure AD.

Please let me know if you will not use the Code Flow.

Hi @ninomartini

This feature will be available in v3.1. You can find the implementation this document. After the v3.1 release, the document will be available on docs.abp.io.

You can check the release date of v3.1 version here.

Hi Joe,

How can I reproduce the suite problem? Can you describe step by step?