title: Uncaught Error: Can't resolve all parameters for Component: ([object Object]?)
body: <p>So, before You read the whole error stack, keep in mind that at this time I cant pinpoint the exact piece that causes the problem. However, I will disclose the code below the error stack. So, my only question is: <strong>what parameters can't be resolved?</strong></p>
  <p>If you like, you can test my application for yourself. It is a simple default angular 6 application with all the default settings you get from the following command below:</p>
  <pre><code>ng new app-name
  </code></pre>
  <p>let's begin with the error. The application starts like normal. When I try to run the code, this error pops up:  Uncaught Error: Can't resolve all parameters for Component: ([object Object]?). You can read the full error stack below.</p>
  <pre><code>Uncaught Error: Can't resolve all parameters for Component: ([object Object]?).
      at syntaxError (compiler.js:1016)
      at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:10917)
      at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:10810)
      at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:10429)
      at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.js:10291)
      at compiler.js:23865
      at Array.forEach (&lt;anonymous&gt;)
      at compiler.js:23864
      at Array.forEach (&lt;anonymous&gt;)
      at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:23861)
  syntaxError @ compiler.js:1016
  push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata @ compiler.js:10917
  push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata @ compiler.js:10810
  push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata @ compiler.js:10429
  push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata @ compiler.js:10291
  (anonymous) @ compiler.js:23865
  (anonymous) @ compiler.js:23864
  push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules @ compiler.js:23861
  push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:23839
  push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:23799
  push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
  push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4352
  ./src/main.ts @ main.ts:11
  __webpack_require__ @ bootstrap:76
  0 @ main.ts:12
  __webpack_require__ @ bootstrap:76
  checkDeferredModules @ bootstrap:43
  webpackJsonpCallback @ bootstrap:30
  (anonymous) @ main.js:1
  </code></pre>
  <p>As you see, there is no easy way of telling which part of my typescript is causing the problem. However, The application runs fine without the code in component.ts shown below. So, there is definitely something wrong with my typescript component.ts</p>
  <p>the component.ts is shown below:</p>
  <pre><code>import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, Directive} from '@angular/core';
  import { FormGroup } from '@angular/forms';
  import { DefineBusinessRuleService } from '../services/define/define-business-rule.service';
  import { DefineBusinessRuleNamespace } from '../model/business-rule-namespace';
  
  @Component({
    selector: 'app-define-business-rule',
    templateUrl: './define-business-rule.component.html',
    styleUrls: ['./define-business-rule.component.css']
  })
  export class DefineBusinessRuleComponent implements OnInit {
    // interfaces
    headers : Headers;
    output: any;
    @Input() minValue: string;
    @Input() maxValue: string;
    @Input() attribute : Array&lt;string&gt;;
    @Input() table : Array&lt;string&gt;;
  
    submitted = false;
    @Input() businessRuleType : Array&lt;string&gt;;
    ruletypes : Array&lt;string&gt;;
    ruletype : string;
  
    constructor(
      private defineBusinessRuleService: DefineBusinessRuleService
      ,private model : any
    ) {
      this.table = ['table1', 'table2', 'table3'];
      this.attribute = ['attribute1', 'attribute2', 'attribute3'];
      this.ruletypes = [
        // atrribute
        'AttributeRange',
        'AttributeCompare',
        'AttributeList',
        'AttributeOther',
        'TupleCompare',
        'TupleOther'
  
      ]
      model = {
        minValue : 5,
        maxValue : 10,
        name : 'RangeRule',
        description : 'This is a Range Rule',
        table1 : this.table[0],
        column1 : this.attribute[2],
        errorMsg : 'Error message'
      };
  }
  
    get diagnostic() { return JSON.stringify(this.model); }
  
    defineNewBusinessRule() {
      //this.model = new DefineBusinessRuleService(42, 50, '', '', '', '', '');
  
    }
  
    saveAttributeRangeRule(){
      this.output = {
        database_id : 1,
        minValue : this.minValue,
        maxValue : this.maxValue,
        table1 : this.table,
        column1 : this.attribute
      }
      this.output.stringify;
      this.defineBusinessRuleService.saveAttributeRangeRule(this.output);
    }
  
    saveAttributeCompareRule(){
      this.output = {
        database_id : 1,
        table1 : this.table,
        //table2 : this.table2,
        column1 : this.attribute,
        //column2 : this.attribute2,
        //value : this.value
      }
      this.output.stringify;
      //this.defineBusinessRuleService.saveAttributeCompareRule(this.output);
    }
  
    ngOnInit(){
  
    }
  
    onSelect(){
  
    }
  
    onSubmit() {
      this.submitted = true;
      this.ruletype = this.ruletypes[0];
      switch(this.ruletype){
        case &quot;AttributeRange&quot; : {
          this.saveAttributeRangeRule();
          break;
        };
        case &quot;AttributeCompare&quot; : {
          this.saveAttributeCompareRule();
          break;
        };
      }
    }
  
  
  
  }
  </code></pre>
  <p>Thanks for reading this! If you are visually orientated like me, then this form might help you understand what this code should do. However, it's off topic, since i'm certain enough that it doesn't cause operational problems in angular. keep that in mind!</p>
  <p>the related html form is shown below</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;br&gt;
  &lt;br&gt;
  
  &lt;main role="main" class="container"&gt;
    &lt;div class="container"&gt;
      &lt;h1&gt;Define Business Rule&lt;/h1&gt;
      &lt;form (ngSubmit)="onSubmit()" #defineBusinessRuleForm="ngForm"&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="minValue"&gt;Minimum Value&lt;/label&gt;
          &lt;input type="text" class="form-control" id="minValue"&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="maxValue"&gt;Maximum Value&lt;/label&gt;
            &lt;input type="text" class="form-control" id="maxValue"&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="name"&gt;Name&lt;/label&gt;
          &lt;input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name"
                 #name="ngModel"&gt;
          &lt;div [hidden]="name.valid || name.pristine"
          class="alert alert-danger"&gt;
          Name is required
        &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="description"&gt;Description&lt;/label&gt;
          &lt;input type="text" class="form-control" id="description" required&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="table"&gt;Table&lt;/label&gt;
          &lt;select class="form-control" id="table" required&gt;
            &lt;option *ngFor="let tbl of table" [value]="table"&gt;{{tbl}}&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="attribute"&gt;Attribute&lt;/label&gt;
          &lt;select class="form-control" id="attribute" required&gt;
            &lt;option *ngFor="let attr of attribute" [value]="attribute"&gt;{{attr}}&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="errorMsg"&gt;Error Message&lt;/label&gt;
          &lt;input type="text" class="form-control" id="errorMsg" required&gt;
        &lt;/div&gt;
  
        &lt;button type="submit" class="btn btn-success" [disabled]="!defineBusinessRuleForm.form.valid"&gt;Submit&lt;/button&gt;
        &lt;button type="button" class="btn btn-default" (click)="defineNewBusinessRule(); defineBusinessRuleForm.reset()"&gt;Define New BR&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>