Activities of "Mehmet"

Hi Michel,

The problem has been resolved. You can use it as of v4.1.1.

I am closing the question. Please let us know if you encounter any problems.

Thanks.

Hello,

abp update command only upgrades NPM and NuGet packages. React Native cannot be upgraded via ABP CLI. Because there are no RN packages. I suggest you; Create a new template and check the latest source code. The font loading problem has been resolved. You can find the solution in the latest template.

Sorry, it was an internal issue. I have updated the comment. Please check the link again.

Hi Michel,

You can follow this issue: https://github.com/abpframework/abp/issues/7087

We will probably fix the problem until the v4.2-preview is released. I will inform you when we solve the problem.

Sorry for the inconvenience.

Hi,

There is no problem in v4.0.0 default template. Please check the imports in AppModule. CoreModule must be imported like this:

//app.module.ts
import { registerLocale } from '@abp/ng.core/locale';
import { environment } from '../environments/environment';
//...

    CoreModule.forRoot({
      environment,
      registerLocaleFn: registerLocale(),
    }),

If the problem does not resolve, please share the app.module.ts content with us.

Hi

You can upgrade the version to the v4.1, this will not cause any problems. But the new functionality will be available in v4.2-preview. You can continue to use postbuild step until the v4.2 is released.

Hi Paul

1. The theme-lepton library gets style files from node_modules/@volo/abp.ng.theme.lepton/dist folder. You should overwrite the CSS files after building. So you can use a command to achieve this like the following:

yarn ng build theme-lepton && cp -r packages/theme-lepton/dist dist/theme-lepton

Then check the styles in dist/theme-lepton/dist/styles folder. You will see your edited styles there.

2. You should add a variable named appInfo. This custom footer component works:

import { EnvironmentService } from '@abp/ng.core';
import { Component } from '@angular/core';

@Component({
  selector: 'app-footer',
  template: `
    <footer class="lp-footer">
      <div class="d-flex">
        <div class="mr-auto">
          <span>2019 - {{ currentYear }} © {{ appInfo.name }}</span
          ><br />
        </div>
      </div>
    </footer>
  `,
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent {
  currentYear = new Date().getFullYear();

  get appInfo() {
    return this.environment.getEnvironment().application;
  }

  constructor(private environment: EnvironmentService) {}
}

3. Here is the tsconfig.prod.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "types": ["jest"]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

tsconfig.json:

{
  "extends": "./tsconfig.prod.json",
  "compilerOptions": {
    "paths": {
      "@volo/abp.commercial.ng.ui": ["packages/commercial-ui/src/public-api.ts"],
      "@volo/abp.ng.account": ["packages/account/src/public-api.ts"],
      "@volo/abp.ng.account/config": ["packages/account/config/src/public-api.ts"],
      "@volo/abp.ng.account/admin": ["packages/account/admin/src/public-api.ts"],
      "@volo/abp.ng.audit-logging": ["packages/audit-logging/src/public-api.ts"],
      "@volo/abp.ng.audit-logging/config": ["packages/audit-logging/config/src/public-api.ts"],
      "@volo/abp.ng.identity-server": ["packages/identity-server/src/public-api.ts"],
      "@volo/abp.ng.identity-server/config": ["packages/identity-server/config/src/public-api.ts"],
      "@volo/abp.ng.identity": ["packages/identity/src/public-api.ts"],
      "@volo/abp.ng.identity/config": ["packages/identity/config/src/public-api.ts"],
      "@volo/abp.ng.saas": ["packages/saas/src/public-api.ts"],
      "@volo/abp.ng.saas/config": ["packages/saas/config/src/public-api.ts"],
      "@volo/abp.ng.theme.lepton": ["packages/theme-lepton/src/public-api.ts"],
      "@volo/abp.ng.theme.lepton/*": ["packages/theme-lepton/src/lib/*"],
      "@volo/abp.ng.language-management": ["packages/language-management/src/public-api.ts"],
      "@volo/abp.ng.language-management/config": [
        "packages/language-management/config/src/public-api.ts"
      ],
      "@volo/abp.ng.language-management/locale": ["packages/language-management/locale/src/public-api.ts"],
      "@volo/abp.ng.text-template-management": [
        "packages/text-template-management/src/public-api.ts"
      ],
      "@volo/abp.ng.text-template-management/config": [
        "packages/text-template-management/config/src/public-api.ts"
      ]
    }
  }
}

Hi @MichelZ

We are working on this, thanks for the reporting.

I might have misunderstood. There are a few components, directives, etc. in ABP Angular UI. We've already documented some of these, and we have created issues to document the rest.

We use the NG Bootstrap library for the UI components we need. When we can not find a good component for the purpose, we develop for it. So you can use the NG Bootstrap components. The library is built-in, you do not have to install it.

Hi @boltth

You can find the Angular UI documentation under the User Interface > Angular section on the menu of the https://docs.abp.io

You can also check this: https://docs.abp.io/en/commercial/latest/guides/customizing-modules

The docs under the Customization topic are related to the themes (Basic and Lepton). You can apply the same steps for the Lepton theme. The only difference; You have to replace the @abp/ng.theme.basic with the @volo/abp.ng.theme.lepton in imports.