未捕获的错误：无法解析组件的所有参数：（[对象对象]？）

Question

因此，在阅读整个错误堆栈之前，请记住，此时我无法查明导致问题的确切原因。但是，我将释放错误堆栈下面的代码。因此，我唯一的问题是：我在这里遇到此错误的根源是什么？

如果愿意，您可以自己测试我的应用程序。这是一个简单的默认angular 6应用程序，具有您从

获得的所有默认设置

ng new app-name

让我们从错误开始。该应用程序正常启动。当我尝试运行代码时，会弹出此错误。

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 (<anonymous>)
    at compiler.js:23864
    at Array.forEach (<anonymous>)
    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

如您所见，没有简单的方法来判断我的打字稿的哪一部分引起了问题。但是，如果没有以下代码，该应用程序将运行良好。所以，我的打字稿组件肯定有问题

component.ts如下所示

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<string>;
  @Input() table : Array<string>;

  submitted = false;
  @Input() businessRuleType : Array<string>;
  ruletypes : Array<string>;
  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 "AttributeRange" : {
        this.saveAttributeRangeRule();
        break;
      };
      case "AttributeCompare" : {
        this.saveAttributeCompareRule();
        break;
      };
    }
  }



}

感谢阅读！如果您像我一样以视觉为导向，那么此表单可以帮助您理解此代码应具有的功能。但是，由于无法确定它不会在角度上引起操作问题，因此这是没有主题的。记住这一点！

相关的html格式如下所示

<br>
<br>

<main role="main" class="container">
  <div class="container">
    <h1>Define Business Rule</h1>
    <form (ngSubmit)="onSubmit()" #defineBusinessRuleForm="ngForm">
    <div class="form-group">
        <label for="minValue">Minimum Value</label>
        <input type="text" class="form-control" id="minValue">
      </div>

      <div class="form-group">
        <label for="maxValue">Maximum Value</label>
          <input type="text" class="form-control" id="maxValue">
      </div>

      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name"
               #name="ngModel">
        <div [hidden]="name.valid || name.pristine"
        class="alert alert-danger">
        Name is required
      </div>
      </div>

      <div class="form-group">
        <label for="description">Description</label>
        <input type="text" class="form-control" id="description" required>
      </div>

      <div class="form-group">
        <label for="table">Table</label>
        <select class="form-control" id="table" required>
          <option *ngFor="let tbl of table" [value]="table">{{tbl}}</option>
        </select>
      </div>

      <div class="form-group">
        <label for="attribute">Attribute</label>
        <select class="form-control" id="attribute" required>
          <option *ngFor="let attr of attribute" [value]="attribute">{{attr}}</option>
        </select>
      </div>

      <div class="form-group">
        <label for="errorMsg">Error Message</label>
        <input type="text" class="form-control" id="errorMsg" required>
      </div>

      <button type="submit" class="btn btn-success" [disabled]="!defineBusinessRuleForm.form.valid">Submit</button>
      <button type="button" class="btn btn-default" (click)="defineNewBusinessRule(); defineBusinessRuleForm.reset()">Define New BR</button>
    </form>
  </div>
</main>

Answer 1

以下代码似乎引起了问题。我不知道为什么，但是在禁用下面的代码后，错误不会再出现。

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 {
  constructor(
    private model : any
  ) {
     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, '', '', '', '', '');
  }
 }
}

请注意，我已经省略了用于将DefineBusinessRuleService耦合到我的component.ts的代码，这使我们有了模型。看来这是有问题的。随意评论我犯的错误。否则，我很快会将自己的答案标记为可接受的答案。

Answer 2

该错误位于模型定义位置。

private model: any应该定义为构造函数之外的参数。 通过将其放置在构造函数中，编译器将尝试解析any类，自然无法做到这一点。

以这种方式修改代码：

export class DefineBusinessRuleComponent implements OnInit {
  private model : any

  constructor() {
    this.model = {
      // your model definition
    };
  }

  // rest of the code
}