Angular组件继承引发构建错误问题求助

Hey there, let's work through this problem step by step. I've run into similar issues with Angular base components used only for inheritance, so I know exactly where to look.

The Root of Your Problem #

You've got two conflicting issues here:

1. When you add ParentComponent to your module's declarations, Angular's compiler (even with --no-aot in prod mode) tries to process it as a full component—even though its template is empty and you never use it directly. This triggers excessive memory usage during build, leading to the heap overflow error.
2. If you remove it from declarations, Angular throws an error because the @Component decorator on ParentComponent marks it as an Angular component, which must be registered to a module.

The fix is to redefine ParentComponent as a pure base class, not an Angular component.

Step-by-Step Fixes #

1. Turn ParentComponent into an Abstract Base Class (Remove @Component)

Since you only use ParentComponent for inheritance and never render it directly, you don't need the @Component decorator at all. Convert it to an abstract class so TypeScript knows it's not meant to be instantiated:

// No need for @Component here!
export abstract class ParentComponent {
  constructor(protected service) {
    service.doSomething();
  }
}

This tells Angular that this isn't a component that needs compilation or module registration.

2. Clean Up Your NgModule

Remove ParentComponent from main.module.ts entirely—you don't need to import or declare it anymore:

import { NgModule } from '@angular/core';
import { ChildComponent } from './components'; // Only import the child

@NgModule({
  imports: [ ... ],
  declarations: [ ChildComponent, ... ], // Only declare the child component
  providers: [ ... ]
})
export class MainModule { }

3. Fix Heap Overflow (If Still Needed)

If you still hit the memory error after the above changes, it's likely due to your project's size. Increase Node's memory limit by updating your package.json build script:

{
  "scripts": {
    "build": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --aot --prod --stats-json"
  }
}

Adjust the 8192 value (in MB) based on your machine's available RAM—4096 (4GB) is a safe default if 8GB is overkill.

Why This Works #

• By removing the @Component decorator, ParentComponent becomes a plain TypeScript class, so Angular doesn't require it to be registered in a module.
• The compiler no longer wastes resources processing a component you never use, eliminating the heap overflow.
• Your ChildComponent still correctly inherits the parent's logic and service injection—no changes needed there.

Test this with npm run build and you should see a successful build, while npm start continues to work as expected.

内容的提问来源于stack exchange，提问作者moshtaba morsali