I'm declaring a few editorFrameWork components for my ag-grid in my Angular 2 project. However, when I inject any services in the constructor of my editor component, TypeScript compiler throws the following error upon loading the webpage:
Uncaught Error: Can't resolve all parameters for MyOtherEditorFrameworkComponent: (?)
at CompileMetadataResolver.getDependenciesMetadata (http://<rooturl here>/main.bundle.js:39398:19)
at CompileMetadataResolver.getTypeMetadata (http://<rooturl here>/main.bundle.js:39299:26)
at CompileMetadataResolver.getDirectiveMetadata (http://<rooturl here>/main.bundle.js:39074:28)
at http://<rooturl here>/main.bundle.js:39167:49
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (http://<rooturl here>/main.bundle.js:39161:49)
at RuntimeCompiler._compileComponents (http://<rooturl here>/main.bundle.js:57492:47)
at RuntimeCompiler._compileModuleAndComponents (http://<rooturl here>/main.bundle.js:57430:37)
at RuntimeCompiler.compileModuleAsync (http://<rooturl here>/main.bundle.js:57421:21)
at PlatformRef_._bootstrapModuleWithZone (http://<rooturl here>/main.bundle.js:41293:25)
I've gotten around this problem for another editor component that required a service injected, by declaring a module for the component and including the module in app.module. However, this doesn't seem to work for the second editor component, if I add the second editor component module similarly defined below in app.module along with the first editor component module.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyOtherEditorFrameworkComponent} from './my-other-editor-framework.component';
@NgModule({
imports: [
CommonModule
],
declarations: [MyOtherEditorFrameworkComponent]
})
export class MyOtherEditorFrameworkModule{ }
src/app/components/.../mySecondEditorFrameworkComponent/my-second-editor-framework-component.ts:
import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { AgEditorComponent } from 'ag-grid-ng2/main';
import { MyInjectedService } from '../../../services/myinjectedservice/my-injected.service';
@Component({
selector: 'app-name-editor',
templateUrl: './name-editor.component.html',
styleUrls: ['./name-editor.component.sass']
})
export class mySecondEditorFrameworkComponent implements OnInit, AgEditorComponent {
@ViewChild('mySecondEditor', { read: ViewContainerRef }) mySecondEditor;
constructor(private myInjectedService : MyInjectedService ) { }
...}
src/app/app.module:
@NgModule({
imports: [
AgGridModule.withNg2ComponentSupport(),
MyOtherEditorFrameworkModule,
//MySecondEditorFrameworkModule, //<-- this throws the error
...],
...
providers: [ myInjectedService]
})