0

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]
     })
jerryh91
  • 1,777
  • 10
  • 46
  • 77

1 Answers1

0

Component mySecondEditorFrameworkComponent is not a module, it should be placed in declarations instead of imports.

kemsky
  • 14,727
  • 3
  • 32
  • 51
  • That's what I had meant the first time, it was a typo. This is still causing the error – jerryh91 Feb 16 '17 at 15:46
  • It looks like you have to move `myInjectedService` to separate module and import into app module and MyOtherEditorFrameworkModule module. – kemsky Feb 16 '17 at 18:28
  • import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MyInjectedService } from './myinjected.service'; @NgModule({ imports: [ CommonModule ], declarations: [], providers: [MyInjectedService ] }) export class MyInjectedService { } – jerryh91 Feb 16 '17 at 21:24