question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Inheritance In Components Makes Build Error

See original GitHub issue

I have a parent Component like this:


import { Component} from '@angular/core';

@Component({
    selector: 'app-main-parent',
    template: '',
})
export class ParentComponent {
    constructor(protected service) {
        service.doSomething();
    }
}

and a child Component that extends parent:


import { Component} from '@angular/core';
import { ChildService} from './services';

@Component({
    selector: 'app-main-child',
    templateUrl: './child.component.html',
})
export class ChildComponent extends ParentComponent{

    constructor(private _childService: ChildService) {
        super(_childService);
    }
}

and in main.module.ts added these components:


import { NgModule } from '@angular/core';
import { ParentComponent,
        ChildComponent } from './components'

@NgModule({
    imports: [
	...
    ],
    declarations: [
        ParentComponent,
        ChildComponent,
        ...
    ],
    providers: [
	...
    ]
})
export class MainModule { }

I build project with following command:

npm run build

And got this Error:

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory npm ERR! code ELIFECYCLE npm ERR! errno 3 npm ERR! proj.panel@0.0.0 build: ng build --aot --prod --stats-json npm ERR! Exit status 3 npm ERR! npm ERR! Failed at the proj.panel@0.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\user\AppData\Roaming\npm-cache_logs\2018-01-17T10_37_32_166Z-debug.log

If I remove ParentComponent from main.module.ts, then get this Error:

Cannot determine the module for class ParentComponent in C:/Users/user/source/repos/proj/web-panel/app/main/components.ts! Add ParentComponent to the NgModule to fix it.

Other Stuff:

if I run project with npm start command it works fine. only in build I got these Errors.

I ran build command with no aot (ng build --no-aot --prod) but errors are still there.

I dont use ParentComponent anywhere but for childs components to extend.

Angular version: 5.0.0

For Tooling issues:

  • Node version: 6.11.4
  • Platform: Windows 10
  • npm version: 5.6.0

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
chuckjazcommented, Feb 8, 2018

Thanks for reporting this issue. However this issue is a duplicate of an existing issue #16637. Please subscribe to that issue for future updates.

1reaction
trotylcommented, Feb 7, 2018
Read more comments on GitHub >

github_iconTop Results From Across the Web

Inheritance In Components Makes Build Error In Angular
This error is related to RAM consumption. FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory.
Read more >
Angular — Maintenance issue caused by component ...
Issue 2: Inheritance is not friendly to the Angular dependency injection engine. Another issue is about the dependency injection. Normally, we ...
Read more >
Component Inheritance in Angular - Bits and Pieces
The extending component will not see the router. We need to make it public: @Component({...}) class App { constructor(public router: Router) {
Read more >
How To Extend Classes with Angular Component Inheritance
This command will create a base.component.ts file and adds it as a declaration for the app module. Step 2 – Building the Base...
Read more >
Composition vs Inheritance - React
React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found