1

In my project there are many "base" component classes. Furthermore, the project is to be divided into several other modules, in which I simply wanted to use the share module as a base classes source.

I hoped that it would be possible to use just one simple import { SharedModule } declaration in app.module and avoid many imports of base component classes in component descendants, but error occured.

(I've edited this question to be more precise.)

Example:

// base.component.ts
@Component({ selector: 'app-base', ...})
export class BaseComponent {}

// shared.module.ts
import { CommonModule } from '@angular/common';
import { BaseComponent } from './base/base.component';

@NgModule({
  imports: [CommonModule],
  declarations: [BaseComponent],
  exports: [BaseComponent],
})
export class SharedModule {}

// app.module.ts
import { HelloComponent } from './hello.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
  imports: [..., SharedModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

I know that this works (but is not my intended use):

// hello.component.ts
@Component({ template: `<app-base></app-base>` })
export class HelloComponent {}

I thought it would work too, but it doesn't:

// hello.component.ts
@Component({...})
export class HelloComponent extends BaseComponent {} // <-- Cannot find name 'BaseComponent'

Does angular allow using the base class in the above simple way somehow? (i.e. without import { BaseComponent } in each component descendant)

user4662448
  • 41
  • 5
  • Try following [this](https://www.digitalocean.com/community/tutorials/angular-component-inheritance) tutorial – robert Jan 31 '23 at 02:07

2 Answers2

2

First of all, using a sharedModule is often an old bad practice, better to use SCAM (Single Component Angular Module) or Standalone Components.

Anyway, if you want to extend BaseComponent, you can do it, but you have to import it import { BaseComponent } from './base/base.component'; if you don't intend to use the BaseComponent itself, there is no need to declare it in any module, you just need to declare the HomeComponent

Zerotwelve
  • 2,087
  • 1
  • 9
  • 24
  • Why it is a bad practice to use a shared Module? – robert Jan 31 '23 at 18:44
  • basically if you have a big shared module, lazy-loading won't work as intended, and you end up with a big bundle size. The app can't be tree-shaken if you have a big Shared Module. As mentioned the SCAM architecture or Standalone Components are preferred. – Zerotwelve Feb 01 '23 at 12:36
  • Ok, thank you. Do you have any links, articles about this? – robert Feb 01 '23 at 21:56
  • you will find many if you google, but here is one about shared material module: https://indepth.dev/posts/1191/stop-using-shared-material-module – Zerotwelve Feb 02 '23 at 10:41
1

View this complete tutorial.

Use the component from the shared module as a base class in your child component:

In the “child.component.ts” file, extend the base component using the extends keyword:

import { Component } from '@angular/core';
import { BaseComponent } from '../shared/base/base.component';

@Component({
  selector: 'app-hello',
  template: `
    <app-base></app-base>
    <p>Hello Component works!</p>
  `
})
export class HelloComponent  extends BaseComponent {
  constructor() {
    super();
  }
}

Make sure that you are using the selector of the parent component in the appropriate template file.

Use the hello component anywhere in your template: In the template where you want to use the hello component, include the hello component using its selector:

<app-hello></app-hello>
Nishant Tamilselvan
  • 302
  • 2
  • 8