Abp: How to customize predefined components and modules in angular template

[AhmadAlMunajjed]

How to customize the predefined components and modules in angular template such as

• how to customize the layout ApplicationLayoutComponent and access its properties or use them
• how to customize the login page (I want to hide selecting tenant block and disabled multi-tenancy)

Thanks in advance

[hitaspdotnet]

copy installed module's folder from /node_modules to your project and edit them directly. then remove cli dependencies in angular and declaration/import customized components/modules.

[AhmadAlMunajjed]

Thanks, I will try it.

[AhmadAlMunajjed]

/node_modules folder doesn't have the source code the components/modules to be copied from there, so could elaborate on that @hitaspdotnet , please.
Btw, I'm wondering, these libs were built to be used as libraries or to let us copy them?

[KidoPlay]

/node_modules folder doesn't have the source code the components/modules to be copied from there, so could elaborate on that @hitaspdotnet , please.
Btw, I'm wondering, these libs were built to be used as libraries or to let us copy them?

I rewrote the whole thing.....
Try find your sources in

npm/ng-packs/packages/account/src/lib

[AhmadAlMunajjed]

@KidoPlay thanks for your response. I've done this:

• downloaded a project from https://abp.io/get-started
• downloaded (from master branch) and copied the source code files of the modules to the project as you've mentioned.
• installed the dependencies libraries.
• replaced the imports from abp npm to my local paths.

When run ng serve, the project builds successfully but when I open login page I get two errors:

• Cannot read property 'ngInjectableDef' of undefined
• Outlet is not activated

[yinchang0626]

@AhmadAlMunajjed i also meet two error that you say:
although i don't know root cause but i think the problem is relation to @abp/ng.theme.shared package.
try to install "@abp/ng.theme.shared" by npm or
build @abp/ng.core, @abp/ng.theme.shared first ,then ref path "@abp/ng.theme.shared": ["dist/theme-shared"] in tsconfig.app.json,
i did it in my repository and you can reference it https://github.com/yinchang0626/abp.ng?files=1

[mehmet-erim]

I don't recommend that you copy the source codes in your own repo. If you do this, new version updates will waste of time.

how to customize the login page (I want to hide selecting tenant block and disabled multi-tenancy)

Temporary solution:
Open the app.component.ts and replace constructor with the following codes:

  constructor(
   ...,
    private router: Router,
    private renderer: Renderer2,
    private elRef: ElementRef,
  ) {
    this.router.events
      .pipe(
        filter(event => event instanceof NavigationEnd && event.url.indexOf('/account/login') > -1),
      )
      .subscribe(() => {
        setTimeout(() => {
          // to execute after view initialization
          const tenantBox = this.elRef.nativeElement.querySelector('abp-tenant-box') as HTMLElement;
          this.renderer.removeChild(tenantBox.parentElement, tenantBox);
        }, 0);
      });
  }

I know this solution is not good. But I will work for customizable components.

[mehmet-erim]

You can follow up this issue: #2404