How to properly annotate an abstract base component with life cycle hooks in Angular
I have an abstract base component with life cycle hooks:
export abstract class BaseComponent implements OnChanges, OnInit {
ngOnChanges(changes: SimpleChanges): void {
…
}
ngOnInit() {
…
}
}
And a child component:
@Component({
…
})
export class ChildComponent extends BaseComponent {
This will result in Can't resolve all parameters for BaseComponent: (?, ?, ?).
The parameter indeed has three parameters. All three values are listed in the providers section of the module containing the child component. Adding the base component to the module is not possible since it is not compatible with the type required for declarations.
If I add @Injectable() to the BaseComponent tslint will complain that In the class "BaseComponent" which have the "@Injectable" decorator, the "ngOnChanges()" hook method is not allowed. Please, drop it. (contextual-life-cycle). Everything works fine though.
Adding @Component() to the BaseComponent results in Webstorm complaning about Component 'BaseComponent' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration. Again, code runs fine.
Since I like to keep my code clear of any warnings: What is the correct way to implement this pattern?
angular
asked Nov 24 '18 at 0:22
Georg M. SorstGeorg M. Sorst
117111
add a comment |
I have an abstract base component with life cycle hooks:
export abstract class BaseComponent implements OnChanges, OnInit {
ngOnChanges(changes: SimpleChanges): void {
…
}
ngOnInit() {
…
}
}
And a child component:
@Component({
…
})
export class ChildComponent extends BaseComponent {
This will result in Can't resolve all parameters for BaseComponent: (?, ?, ?).
The parameter indeed has three parameters. All three values are listed in the providers section of the module containing the child component. Adding the base component to the module is not possible since it is not compatible with the type required for declarations.
If I add @Injectable() to the BaseComponent tslint will complain that In the class "BaseComponent" which have the "@Injectable" decorator, the "ngOnChanges()" hook method is not allowed. Please, drop it. (contextual-life-cycle). Everything works fine though.
Adding @Component() to the BaseComponent results in Webstorm complaning about Component 'BaseComponent' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration. Again, code runs fine.
Since I like to keep my code clear of any warnings: What is the correct way to implement this pattern?
angular
asked Nov 24 '18 at 0:22
Georg M. SorstGeorg M. Sorst
117111
3
Can't resolve all parameters for BaseComponent: (?, ?, ?)looks like an error related to the constructor. Can you update your question to show the constructors for the classes.
– cgTag
Nov 24 '18 at 0:29
Updated to included info about the constructor.
– Georg M. Sorst
Nov 26 '18 at 21:55
add a comment |
I have an abstract base component with life cycle hooks:
export abstract class BaseComponent implements OnChanges, OnInit {
ngOnChanges(changes: SimpleChanges): void {
…
}
ngOnInit() {
…
}
}
And a child component:
@Component({
…
})
export class ChildComponent extends BaseComponent {
This will result in Can't resolve all parameters for BaseComponent: (?, ?, ?).
The parameter indeed has three parameters. All three values are listed in the providers section of the module containing the child component. Adding the base component to the module is not possible since it is not compatible with the type required for declarations.
If I add @Injectable() to the BaseComponent tslint will complain that In the class "BaseComponent" which have the "@Injectable" decorator, the "ngOnChanges()" hook method is not allowed. Please, drop it. (contextual-life-cycle). Everything works fine though.
Adding @Component() to the BaseComponent results in Webstorm complaning about Component 'BaseComponent' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration. Again, code runs fine.
Since I like to keep my code clear of any warnings: What is the correct way to implement this pattern?
angular
asked Nov 24 '18 at 0:22
Georg M. SorstGeorg M. Sorst
117111
I have an abstract base component with life cycle hooks:
export abstract class BaseComponent implements OnChanges, OnInit {
ngOnChanges(changes: SimpleChanges): void {
…
}
ngOnInit() {
…
}
}
And a child component:
@Component({
…
})
export class ChildComponent extends BaseComponent {
This will result in Can't resolve all parameters for BaseComponent: (?, ?, ?).
The parameter indeed has three parameters. All three values are listed in the providers section of the module containing the child component. Adding the base component to the module is not possible since it is not compatible with the type required for declarations.
If I add @Injectable() to the BaseComponent tslint will complain that In the class "BaseComponent" which have the "@Injectable" decorator, the "ngOnChanges()" hook method is not allowed. Please, drop it. (contextual-life-cycle). Everything works fine though.
Adding @Component() to the BaseComponent results in Webstorm complaning about Component 'BaseComponent' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration. Again, code runs fine.
Since I like to keep my code clear of any warnings: What is the correct way to implement this pattern?
angular
angular
asked Nov 24 '18 at 0:22
Georg M. SorstGeorg M. Sorst
117111
asked Nov 24 '18 at 0:22
Georg M. SorstGeorg M. Sorst
117111
edited Nov 26 '18 at 21:55
Georg M. Sorst
asked Nov 24 '18 at 0:22
Georg M. SorstGeorg M. Sorst
117111
asked Nov 24 '18 at 0:22
Georg M. SorstGeorg M. Sorst
117111
asked Nov 24 '18 at 0:22
Georg M. SorstGeorg M. Sorst
117111
117111
3
Can't resolve all parameters for BaseComponent: (?, ?, ?)looks like an error related to the constructor. Can you update your question to show the constructors for the classes.
– cgTag
Nov 24 '18 at 0:29
Updated to included info about the constructor.
– Georg M. Sorst
Nov 26 '18 at 21:55
add a comment |
3
Can't resolve all parameters for BaseComponent: (?, ?, ?)looks like an error related to the constructor. Can you update your question to show the constructors for the classes.
– cgTag
Nov 24 '18 at 0:29
Updated to included info about the constructor.
– Georg M. Sorst
Nov 26 '18 at 21:55
3
3
Can't resolve all parameters for BaseComponent: (?, ?, ?) looks like an error related to the constructor. Can you update your question to show the constructors for the classes.– cgTag
Nov 24 '18 at 0:29
Can't resolve all parameters for BaseComponent: (?, ?, ?) looks like an error related to the constructor. Can you update your question to show the constructors for the classes.– cgTag
Nov 24 '18 at 0:29
Updated to included info about the constructor.
– Georg M. Sorst
Nov 26 '18 at 21:55
Updated to included info about the constructor.
– Georg M. Sorst
Nov 26 '18 at 21:55
add a comment |
1 Answer
1
active
oldest
votes
Not annotating the base component at all (neither @Injectable nor @Component) did the trick for me.
answered Feb 3 at 13:14
Georg M. SorstGeorg M. Sorst
117111
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454161%2fhow-to-properly-annotate-an-abstract-base-component-with-life-cycle-hooks-in-ang%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Not annotating the base component at all (neither @Injectable nor @Component) did the trick for me.
answered Feb 3 at 13:14
Georg M. SorstGeorg M. Sorst
117111
add a comment |
Not annotating the base component at all (neither @Injectable nor @Component) did the trick for me.
answered Feb 3 at 13:14
Georg M. SorstGeorg M. Sorst
117111
add a comment |
Not annotating the base component at all (neither @Injectable nor @Component) did the trick for me.
answered Feb 3 at 13:14
Georg M. SorstGeorg M. Sorst
117111
Not annotating the base component at all (neither @Injectable nor @Component) did the trick for me.
answered Feb 3 at 13:14
Georg M. SorstGeorg M. Sorst
117111
answered Feb 3 at 13:14
Georg M. SorstGeorg M. Sorst
117111
answered Feb 3 at 13:14
Georg M. SorstGeorg M. Sorst
117111
answered Feb 3 at 13:14
Georg M. SorstGeorg M. Sorst
117111
117111
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454161%2fhow-to-properly-annotate-an-abstract-base-component-with-life-cycle-hooks-in-ang%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
Can't resolve all parameters for BaseComponent: (?, ?, ?)looks like an error related to the constructor. Can you update your question to show the constructors for the classes.– cgTag
Nov 24 '18 at 0:29
Updated to included info about the constructor.
– Georg M. Sorst
Nov 26 '18 at 21:55