I'm facing this pretty common issue. Trying to inject a service to a component. But getting this Can't resolve all parameters for VehicleComponent error. Don't know why it's happening. Tried to put @Inject on dependency parameter, tried to provide in other modules, provide in component itself but didnt work. Trying to inject NavigationControllerService. By the way i can inject the service to my app component.
here is my app module. the service is provided here
import { AppComponent } from "./app.component";
import { AppRoutingModule } from './app.routing.module';
import HomeComponent from './ngComponents/home/home.component';
import { VehicleModule } from './ngComponents/vehicle/vehicle.module';
import { DataTableComponent } from './uiComponents/datatable/datatable.component';
import { AppConfigService } from './services/appConfig.service';
import { VehicleHTTPService } from './services/http/vehicleHTTP.service';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from "@angular/common";
import { TabComponent } from "./uiComponents/tab/tab.component";
import { NavigationControllerService } from "./services/navigation/navigationController.service";
@NgModule({
declarations: [AppComponent, HomeComponent],
imports: [BrowserModule, CommonModule, AppRoutingModule, HttpClientModule, VehicleModule],
providers: [AppConfigService, VehicleHTTPService, NavigationControllerService],
bootstrap: [AppComponent],
entryComponents: [TabComponent]
})
export class AppModule {
}
VehicleModule
import { NgModule } from "@angular/core";
import { VehicleRoutingModule } from "./vehicle.routing.module";
import { VehicleListComponent } from "./vehicleList/vehicleList.component";
import { VehicleComponent } from "./vehicle.component";
import { VehicleFormComponent } from "./vehicleForm/vehicleForm.component";
import { VehicleHTTPService } from "../../services/http/vehicleHTTP.service";
import { HttpClientModule } from "@angular/common/http";
import { DataTableComponent } from "../../uiComponents/datatable/datatable.component";
import { CommonModule } from "@angular/common";
@NgModule({
imports: [CommonModule, VehicleRoutingModule],
declarations: [VehicleComponent, VehicleListComponent, VehicleFormComponent, DataTableComponent],
})
export class VehicleModule {
}
and the vehicle component which i'm trying to inject in.
import { NavigationControllerService } from "../../services/navigation/navigationController.service";
import { Component } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
@Component({
selector: "vehicle",
templateUrl: 'vehicle.component.html',
styleUrls: ['vehicle.component.css']
})
export class VehicleComponent {
constructor(public navigationControllerService: NavigationControllerService) {
}
}
You can access to full project from here https://github.com/aliemre1990/dokuzisik-mean Thanks for help.
Edit: The problem is causing from NavigationControllerService cant be resolved in my opinion. I created an empty service class and provided it on my AppModule to make same instance of service available across the app. On vehicle component this emtpty service injected as expected. But navigationcontrollerservice again in my opinion could not be created and could not be injected. I should invesgtigate why it cannot create the instance of navigationcontroller service. Maybe its about the dependencies provided inside its constructor. I'm putting my navigation controller service too.
import { EventEmitter, Injectable, Injector, ApplicationRef, ComponentFactoryResolver, EmbeddedViewRef, ComponentRef } from "@angular/core";
import { TabComponent } from "../../uiComponents/tab/tab.component";
import { VehicleComponent } from "../../ngComponents/vehicle/vehicle.component";
import { VehicleFormComponent } from "../../ngComponents/vehicle/vehicleForm/vehicleForm.component";
@Injectable()
export class NavigationControllerService {
readonly tabContentContainerClass = "tab-content-container";
readonly tabNavigationContainerClass = "tab-navigation-container";
public openComponents: Array<ComponentRef<TabComponent>>;
constructor(private componentFactoryResolver: ComponentFactoryResolver,
private appRef: ApplicationRef,
private injector: Injector) {
this.openComponents = [];
}
public closeCurrent() {
}
private deActiveAll() {
this.openComponents.forEach(x => x.instance.active = false);
}
private navigate(component: any) {
var compRef = this.openComponents.find(x => x.instance.component === component);
if (compRef) {
this.deActiveAll();
compRef.instance.active = true;
}
else {
this.add(VehicleComponent);
}
var compRef = this.openComponents.find(x => x.instance.component === component);
switch (compRef.instance.component) {
case VehicleComponent:
compRef.instance.title = "Araç Listesi";
break;
default:
compRef.instance.title = "Default";
break;
}
}
private add(component: any) {
const componentRef = this.componentFactoryResolver
.resolveComponentFactory(TabComponent)
.create(this.injector);
// 2. Attach component to the appRef so that it's inside the ng component tree
this.appRef.attachView(componentRef.hostView);
// 3. Get DOM element from component
const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
.rootNodes[0] as HTMLElement;
// 4. Append DOM element to the body
document.querySelector("." + this.tabContentContainerClass).appendChild(domElem);
if (componentRef.instance.navigateComponent)
componentRef.instance.navigateComponent(component);
componentRef.instance.active = true;
this.openComponents.push(componentRef);
}
public navigateVehicleComponent() {
this.navigate(VehicleComponent);
}
public navigateVehicleFormComponent() {
this.navigate(VehicleFormComponent);
}
}
Edit again: I transfered my project to angular-cli and it gave circular dependcy warning. My vehicleCompnent depends on navigationController and navigationController uses vehicleComponent. Removing vehicleComponent from navigation controller solved the problem.
