Activities of "muhammedaltug"

Hello,

Yes, your notes are correct. What is the last status of the process of the generation proxies ? Can we close the question?

Hello,

If you added 3rd party style files directly to the angular.json file it will increase the main style bundle file size. You can separate different bundles by configuring these style files.

Example

// angular.json
{
  //other props
  "projects": {
    "YourApp": {
      //other props
      "architect": {
        "build": {
          //other props
          "options": {
            //other props
            "styles": [
               "node_modules/lib/style.css", // Replace this line with next line
              {
                "input": "node_modules/lib/style.css",
                "inject": true,
                "bundleName": "lib-style"
              }
            ]          
          }
        }
      }
    }
  }
}

You can use webpack-bundle-analyzer to investigate which libs are included in the main js bundle. By the way, if the components are in the AppModule's declarations array and If the modules are imported directly to AppModule, the main js bundle size will increase. You can consider using the SCAM (Single Component Angular Module) pattern.

Note: You can use gzip encoding to decrease the size of bundles.

Hello,

The release date of the next version of 5.3 is not certain. I will notify you when the version is released.

Hello,

The components under custom pages are not implemented in lepton x angular, blazor, and MVC UIs yet. We have plans to implement these components in the future.

Hello,

When we examine the logs we noticed another bug in the abp suite. We opened an issue for this bug. We will notify you when the fix is available. For now, you can create entities with the following steps below

1. Create a new module with the same name(module name should be PurchaseOrder in your case) placed out of your application
2. Generate the same entity in the created module
3. Copy files from module-name/angular/projects/module-name to your-application/angular/projects/module-name

Your credit refunded

Hello,

I was able to reproduce the issue when I created a project in version 5.2 and generated entities and updated the project version to 5.3 We fixed the issue. The fix will available in the next 5.3 version. Is the same situation for your project?

Can you try to regenerate after removing 'angular/.suite' folder?

Is there any error in your terminal? Can you send suite logs to understand your case?

Suite logs placed under Windows: %UserProfile%\.abp\suite\logs Mac: ~/.abp/suite/logs

Hello,

The fix will available in the next version of 5.3. There is a workaround for this bug below:

import { PermissionDirective } from '@abp/ng.core';
import { Component } from '@angular/core';
import { distinctUntilChanged, take } from 'rxjs/operators';
import { ReplaySubject } from 'rxjs';
@Component({
  selector: 'app-root',
  template: `
    <abp-loader-bar></abp-loader-bar>
    <abp-dynamic-layout></abp-dynamic-layout>
  `,
})
export class AppComponent {}

function checkCustom() {
  if (this.subscription) {
    this.subscription.unsubscribe();
  }

  this.subscription = this.permissionService
    .getGrantedPolicy$(this.condition || '')
    .pipe(distinctUntilChanged())
    .subscribe(isGranted => {
      this.vcRef.clear();
      if (isGranted) this.vcRef.createEmbeddedView(this.templateRef);
      if (this.runChangeDetection) {
        if (!this.rendered) {
          this.cdrSubject.next();
        } else {
          this.cdRef.detectChanges();
        }
      } else {
        this.cdRef.markForCheck();
      }
    });
}

function after() {
  this.cdrSubject.pipe(take(1)).subscribe(() => this.cdRef.detectChanges());
  this.rendered = true;
}
PermissionDirective.prototype['check'] = checkCustom;
PermissionDirective.prototype['ngAfterViewInit'] = after;

PermissionDirective.prototype['cdrSubject'] = new ReplaySubject();
PermissionDirective.prototype['rendered'] = false;

Hello,

You can do it by downloading the source code. After downloading the source code you can follow the steps below for adding a new option.

1. Yarn install Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton

2. Create lepton7.scss under modules/Volo.LeptonTheme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton/Themes/Lepton/Global/styles and modify like other lepton scss files.

3. Run gulp command under modules/Volo.LeptonTheme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton/

4. Copy lepton7.min.css and lepton7.rtl.min.css to projects/theme-lepton/dist/styles

5. Create lepton7.js and lepton7.rlt.js under projects/theme-lepton/dist/styles, File contents should equal below;

   //lepton7.js

   import css from './lepton7.min.css';
   
   export default css;
   

   //lepton7.rtl.js
   import css from './lepton7.rtl.min.css';
   
   export default css;
   

6. Add Style7 option to projects/theme-lepton/src/lib/components/settings/settings.component.html



   <!— Dashboard Style —>
   
   <div class="mb-3" *ngIf="!customStyle">
     <label for="Style" class="form-label">{{
       'LeptonThemeManagement::DisplayName:Style' | abpLocalization
     }}</label>
     <select
       class="form-select form-control valid"
       id="Style"
       name="Style"
       formControlName="style"
     >
       <option [ngValue]="0">Style1</option>
       <option [ngValue]="1">Style2</option>
       <option [ngValue]="2">Style3</option>
       <option [ngValue]="3">Style4</option>
       <option [ngValue]="4">Style5</option>
       <option [ngValue]="5">Style6</option>
       <option [ngValue]="6">Style7</option> <!— This line added —>
     </select>
   
     <span
       class="text-danger field-validation-valid"
       data-valmsg-for="Style"
       data-valmsg-replace="true"
     ></span>
   </div>
   
   <!— Dashboard Style End—>
   
   
   <!— Public Layout Style —>
   
   <div class="mb-3">
     <label for="PublicLayoutStyle" class="form-label">{{
       'LeptonThemeManagement::DisplayName:PublicLayoutStyle' | abpLocalization
     }}</label>
     <select
       class="form-select form-control valid"
       id="PublicLayoutStyle"
       name="PublicLayoutStyle"
       formControlName="publicLayoutStyle"
     >
       <option [ngValue]="0">Style1</option>
       <option [ngValue]="1">Style2</option>
       <option [ngValue]="2">Style3</option>
       <option [ngValue]="3">Style4</option>
       <option [ngValue]="4">Style5</option>
       <option [ngValue]="5">Style6</option>
       <option [ngValue]="6">Style7</option> <!— This line added —>
     </select>
   
     <span
       class="text-danger field-validation-valid"
       data-valmsg-for="PublicLayoutStyle"
       data-valmsg-replace="true"
     ></span>
   </div>
   
   <!— Public Layout Style End—>

   

7. Add Style7 to LeptonStyle enum which placed in modules/Volo.LeptonTheme/src/Volo.Abp.LeptonTheme.Management.Domain.Shared/Volo/Abp/LeptonTheme/Management/LeptonStyle.cs

8. Add below lines to GetStyleCssFileNameAsync metod of LeptonGlobalStyleContributor which placed in modules/Volo.LeptonTheme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton/Bundling/LeptonGlobalStyleContributor.cs

   else if (string.Equals(style, LeptonStyle.Style6.ToString(), StringComparison.OrdinalIgnoreCase))
   {
       return $"lepton6{rtlStringExtension}.css";
   }
   // this block added start
   else if (string.Equals(style, LeptonStyle.Style7.ToString(), StringComparison.OrdinalIgnoreCase))
   {
       return $"lepton7{rtlStringExtension}.css";
   }
   // this block added end
   return $"lepton1{rtlStringExtension}.css";
   
```
   
   

Hello,

Currently, abp proxy generation does not support direct generation in secondary entrypoints. But there is a way to generate in a secondary entrypoint. You can follow the steps below;

1. Create a secondary entrypoint named 'proxy' (you can look ng-packager doc)
2. Before running the proxy generation command open the angular.json folder and edit the sourceRoot property of your project's from 'projects/your-lib/src' to 'projects/your-lib/proxy/src'
3. Run proxy generation command
4. Revert sourceRoot change in angular.json
5. Create an index.ts near proxy/src/lib/proxy and export dirs directly. Do not export index.ts in the proxy folder (eg export * from proxy/identity ). Export index.ts where in proxy/src/lib/ in public-api.ts
6. Define paths in tsconfig.json near your modules path

//tsconfig.json
"paths": {
      "your-project": ["src/projects/your-project/src/public-api.ts"],
      "your-project/proxy": ["src/projects/your-project/proxy/src/public-api.ts*"] // this line added
    }

After these steps, you are available to import generated code from "your-project/proxy" entry point.

Also, I opened an issue for support generating in secondary entrypoints. You can follow the status of the issue.

Duplicate of https://support.abp.io/QA/Questions/3344/Code-is-generated-for-me-but-angular-UI-component-not-generated . Closed question and credit refunded