Tests started to fail moving a class into its own file

Question

I had two classes that were on the same file and implemented same methods so I decided to split them in two files and have the base class implement an interface

The base class looks like this

@Injectable({providedIn: 'root'})
export class PlatformItemHandler implements ItemHandler<PlatformSwimlaneItem> {

The class that inherists from that class looks like this

@Injectable({providedIn: 'root'})
export class PlatformTemplateItemHandler extends PlatformItemHandler {

When the tests run and fail, the error is

Error: This constructor is not compatible with Angular Dependency Injection because its dependency at index 16 of the parameter list is invalid.

22:22:54    Error: This constructor is not compatible with Angular Dependency Injection because its dependency at index 16 of the parameter list is invalid.
22:22:54    This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.
22:22:54    
22:22:54    Please check that 1) the type for the parameter at index 16 is correct and 2) the correct Angular decorators are defined for this class and its ancestors.
22:22:54        at <Jasmine>
22:22:54        at ɵɵinvalidFactoryDep (/bazel-out/k8-fastbuild/bin/cake/node_modules/@angular/core/fesm5/core.goog.js:861:11)
22:22:54        at NodeInjectorFactory.TemplateListComponent_Factory [as factory] (ng:///TemplateListComponent/ɵfac.js:13:66)
22:22:54        at getNodeInjectable (/bazel-out/k8-fastbuild/bin/cake/node_modules/@angular/core/fesm5/core.goog.js:3944:44)
22:22:54        at instantiateAllDirectives (/bazel-out/k8-fastbuild/bin/cake/node_modules/@angular/core/fesm5/core.goog.js:8333:25)
22:22:54        at createDirectivesInstances (/bazel-out/k8-fastbuild/bin/cake/node_modules/@angular/core/fesm5/core.goog.js:7723:5)
22:22:54        at ɵɵelementStart (/bazel-out/k8-fastbuild/bin/cake/node_modules/@angular/core/fesm5/core.goog.js:14479:9)
22:22:54        at BrandTemplateComponent_ng_container_7_ng_template_12_lucid_template_list_3_Template (ng:///BrandTemplateComponent.js:214:5)
22:22:54        at executeTemplate (/bazel-out/k8-fastbuild/bin/cake/node_modules/@angular/core/fesm5/core.goog.js:7696:9)
22:22:54        at renderView (/bazel-out/k8-fastbuild/bin/cake/node_modules/@angular/core/fesm5/core.goog.js:7521:13)
22:22:54        at TemplateRef.createEmbeddedView (/bazel-out/k8-fastbuild/bin/cake/node_modules/@angular/core/fesm5/core.goog.js:10364:17)
22:22:54 HeadlessChrome 86.0.4240 (Linux 0.0.0): Executed 24 of 28 (4 FAILED) (skipped 3) (0 secs / 18.19 secs)

Taking at look at the the *.spec.ts" file the constructor has this parameters, the parameter at index 16, starting from 0, is

    constructor(
        zone: NgZone,
        changeDetectorRef: ChangeDetectorRef,
        private user: User,
        private templateCategoryList: TemplateCategoryList,
        private sectionSelection: TemplateSectionSelection,
        private sectionTemplateList: SectionTemplateList,
        private valueSelection: TemplateCategoryValueSelection,
        private _lastSelectedDocument: LastSelectedDocument,
        private _infoPanelVisible: InfoPanelVisible,
        public starredTemplates: StarredTemplates,
        public unsharedTemplates: UnsharedTemplates,
        public brokenTemplates: BrokenTemplates,
        public smartTemplates: SmartTemplates,
        public popularTemplates: PopularTemplates,
        private managingCategories: ManagingCategories,
        public templatePreview: TemplatePreview,
        private visibleTemplateList: VisibleTemplateList,
        @Inject(Router) router: Router,
        @Inject(ActivatedRoute) route: ActivatedRoute,
        public documentListLoadStatus: DocumentListLoadStatus,
        private paywallManager: PaywallManager,
        private analytics: Analytics,
        private selectedCategoryValue: SelectedCategoryValue,
        public testManager: TestManager,
        private readonly amplitudeClient: AmplitudeClient,
        private readonly templateSectionLabels: TemplateSectionLabels,

That parameter is also injectable.

@Injectable({providedIn: 'root'})
export class VisibleTemplateList extends Pipe<TemplateWithValues[]> {

I have tried

using abstract class instead of interface
removing @Inject() to the base class
Also have tried all the answers mention here

But the problem continues, what can be causing this error, especially since the error being reported does not seem related to my change in code.

Why is the base class marked as `@Injectable`? That is not required if the class is only used as a base class. — rveerd, Oct 13 '22 at 14:48
I have tried without the `injectable` and it also fails, in some discussions people menition that it worked setting injectable on both classes — Mauricio Gracia Gutierrez, Oct 13 '22 at 15:08
For the person that choose to "Close question because it does not follow the SO guidelines" ? what is missing from my question ? it has: What is the problem, what have I tried, detailed errors, correct tags... — Mauricio Gracia Gutierrez, Oct 13 '22 at 15:16

score 0 · Answer 1 · answered Oct 13 '22 at 15:50

The issue was that a class was importing the previous file

Before

import {PlatformTemplateItemHandler} from '../../platformitemhandler';

After

import {PlatformTemplateItemHandler} from '../../platformtemplateitemhandler';

And yes the Injectable is needed in the base class

Tests started to fail moving a class into its own file

1 Answers1