Angular2 webpack 构建 UserError

Question

我用 webpack seed 创建了一个应用程序，但现在我想在 aot 中编译产品，我得到了 UserError.Error 并且不知道如何修复它

这发生在 webpack 构建期间 angular 编译之后。

这是错误：

正在使用 angular 编译器开始编译。 Angular 编译完成，开始 webpack 打包。错误：D:/Projets/sites/brick_reader_front/compiled/src/app/set/set.component.ngfactory.ts:2848:52 处的错误：提供的参数与调用目标的任何签名都不匹配。在 UserError.Error（本地）在新的 UserError (D:\Projets\sites\brick_reader_front\node_modules\tools\@angular\tsc-wrapped\src\tsc.ts:33:25) 检查时 (D:\Projets\sites\brick_reader_front\node_modules\tools\@angular\tsc-wrapped\src\tsc.ts:69:11) 在 Tsc.typeCheck (D:\Projets\sites\brick_reader_front\node_modules\tools\@angular\tsc-wrapped\src\tsc.ts:152:5) 在 D:\Projets\sites\brick_reader_front\node_modules\tools\@angular\tsc-wrapped\src\main.ts:68:11 在 process._tickCallback (internal/process/next_tick.js:103:7)

如果需要任何帮助我修复它，请告诉我

谢谢！

编辑：

这是html：

<div class="app-content">
  <h2 fxFlex fxLayoutAlign="center">{{'SET_DETAIL' | translate}}</h2>
  <div class="btn" fxFlex fxLayoutAlign="center">
    <button class="btn-back" md-raised-button (click)="goBack()">{{'BACK' | translate}}</button>
  </div>
  <div fxLayout.gt-md="row" fxLayoutWrap="wrap" fxLayoutAlign="space-around" fxLayout.xs="column">
    <md-card class="setDetail" *ngIf="setDetail" fxLayout="row" fxLayout="column" fxLayoutWrap="wrap" fxLayoutAlign="space-around " fxFlex="30">
      <md-card-header>
        <img md-card-avatar src="{{setDetail.image}}" alt="" />
        <md-card-title-group>
          <md-card-title>
            {{setDetail.name}}
          </md-card-title>
          <md-card-subtitle>
            {{setDetail.idSet}}
          </md-card-subtitle>
        </md-card-title-group>
      </md-card-header>
      <md-card-content style="text-align: center;">
        <div fxFlex="50" class="ml">
          <md-icon class="left">bookmark_border</md-icon>
          <p class="left">
            {{setDetail.theme}}
          </p>
        </div>
        <div fxFlex="50" class="mr">
          <md-icon class="right">date_range</md-icon>
          <p class="right" style="margin-right: 2px;">
            {{setDetail.year}}
          </p>
        </div>
        <hr />
        <md-icon class="left">view_quilt</md-icon>
        <p class="left">
          {{setDetail.number}} {{'PARTS' | translate}}
        </p>
        <span *ngIf="auth.authenticated()">
    <p class="right" *ngIf="update && model && model.status > 0">
    {{model.status}} missing parts
  </p>
    <p class="right" *ngIf="update && model && model.status == 0">
      Set full
    </p>
    <p class="right" *ngIf="!update">
      Don't own
    </p>
    </span>
      </md-card-content>
      <md-card-actions class="btn" align="center">
        <button class="btn-actions" md-raised-button color="primary" *ngIf="isView" (click)="getSetParts(); isView = false">{{'SEE_PARTS' | translate}}</button>
      </md-card-actions>
      <md-card>
        <md-card-title *ngIf="update" fxFlex fxLayoutAlign="center">
          {{'UPDATE_SET' | translate}}
        </md-card-title>
        <md-card-title *ngIf="!update" fxFlex fxLayoutAlign="center">
          {{'ADD_SET' | translate}}
        </md-card-title>
        <md-card-content>
          <div *ngIf="!sended && submitted" fxFlex fxLayoutAlign="center">
            <md-progress-spinner mode="indeterminate"></md-progress-spinner>
          </div>
          <div *ngIf="sended" fxFlex fxLayoutAlign="center">
            <h3>{{'SET_SAVED' | translate}}</h3>
          </div>
          <div *ngIf="!sended && !submitted">
            <form fxFlex fxLayoutWrap="wrap" align="left" fxLayout="column">
              <md-checkbox [(ngModel)]="model.instruction" name="instruction">
                {{'INSTRUCTION' | translate}}
              </md-checkbox>
              <md-checkbox [(ngModel)]="model.box" name="box">
                {{'BOX' | translate}}
              </md-checkbox>
              <md-checkbox [(ngModel)]="model.forPart" name="forPart">
                {{'FOR_PARTS' | translate}}
              </md-checkbox>
              <md-input-container class="example-full-width">
                <textarea mdInput style="width:100%;" id="comment" placeholder="{{'COMMENT' | translate}}" [(ngModel)]="model.note" name="comment"></textarea>
              </md-input-container>
            </form>
          </div>
          <md-card-actions *ngIf="!sended" align="center">
            <button *ngIf="!update" class="btn-actions" md-raised-button color="accent" (click)="onSubmit()">{{'SUBMIT' | translate}}</button>
            <button *ngIf="update" class="btn-actions" md-raised-button color="accent" (click)="onSubmit()">{{'UPDATE' | translate}}</button>
            <button class="btn-actions" md-raised-button color="accent" *ngIf="update" (click)="deleted(setDetail)">{{'DELETE' | translate}}</button>
          </md-card-actions>
        </md-card-content>
      </md-card>
    </md-card>
    <md-card fxLayoutAlign="space-around center" fxFlex="30">
      <div fxFlex="100">
        <img *ngIf="setDetail" md-card-image src="{{setDetail.image}}" alt="" />
      </div>
    </md-card>
    <md-card *ngIf="setDetail && setDetail.setInstructions && setDetail.setInstructions.length > 0" fxFlex.gt-md="30" fxFlex>
      <md-card-content style="text-align: center;">
        <md-card-title style="text-align: center;">
          {{ isInstructions }}
        </md-card-title>
        <div fxLayout="row" fxLayoutAlign="space-around" *ngIf="setDetail && setDetail.setInstructions" class="set_instruction">
          <div fxFlex="20" *ngFor="let instruction of setDetail.setInstructions; let id=index">
            <a>
              <img src="{{instruction.frontPageInfo}}" alt="" fxFlex (click)="imgClicked($event.target, id)" [class.highlight]="isSelected(id)" />
              <!--</span>--><br>
            </a>
          </div>
        </div>
        <md-divider></md-divider>
        <div fxLayout="column" *ngIf="imgSelected >= 0 && setDetail && setDetail.setInstructions && setDetail.setInstructions.length > 0">
          <div fxLayout="row" fxFlex="100">
            <div fxFlex="100">
              <img class="frontInstruction" src="{{setDetail.setInstructions[imgSelected].frontPageInfo}}" alt="" />
            </div>
          </div>
          <span class="download-size">{{'DOWNLOAD_SIZE' | translate}}: {{setDetail.setInstructions[imgSelected].downloadSize}}</span><br>
          <a class="instruction-id" target="_blank" href="{{setDetail.setInstructions[imgSelected].instruction}}"><button md-raised-button color="primary">
            <md-icon>file_download</md-icon>
            {{'SEE_INSTRUCTION' | translate}}</button></a><br>
          <p>
            {{'INSTRUCTION_TEXT_1' | translate}}
          </p>
          <p>
            {{'INSTRUCTION_TEXT_2' | translate}}
          </p>
        </div>
      </md-card-content>
    </md-card>
  </div>
  <div id="target">
    <md-card class="setParts" *ngIf="setParts">
      <div class="btn" fxFlex fxLayoutAlign="center">
        <button class="btn-toggle" md-raised-button color="primary" (click)="toggleButton()">Toggle</button>
      </div>
      <div *ngIf="setParts.results.length > 0">
        <div class="btn" fxFlex fxLayoutAlign="center">
          <button class="btn-page" md-raised-button [disabled]="buttonStatePrev()" (click)="page(0)">{{'PREV' | translate}}</button>
          <button class="btn-page" md-raised-button [disabled]="buttonStateNext()" (click)="page(1)">{{'NEXT' | translate}}</button>
        </div>

        <md-grid-list cols="6">
          <md-grid-tile *ngFor="let part of setParts.results; let last = last">
            {{last ? scrollToParts() : ''}}

            <div style="width:50%;">
              <img style="width:100%;" src="{{part.colorPart.image}}" alt="" />
            </div>
            <md-grid-tile-footer [style.background-color]="changeBackground(part)" [style.color]="changeColor(part)">
              <div fxFlex="100">
                <p class="left">
                  <span *ngIf="part.isSpare">
              In set
            </span>
                  <span *ngIf="!part.isSpare">
              Spare
            </span>
                </p>
                <p class="right">
                  / {{part.number}}
                </p>
                <select style="margin-top:1em;" class="nb-missing right" name="" (change)="onChange(part, $event.target.value)">
              <option *ngFor="let i of part.number | myDemoNumber" [selected]="isMissing(part, i) == true">{{i}}</option>
            </select>
                <p class="right">
                  Missing:
                </p>
              </div>
            </md-grid-tile-footer>
          </md-grid-tile>
        </md-grid-list>
        <div class="btn" fxFlex fxLayoutAlign="center">
          <button class="btn-page" md-raised-button [disabled]="buttonStatePrev()" (click)="page(0)">{{'PREV' | translate}}</button>
          <button class="btn-page" md-raised-button [disabled]="buttonStateNext()" (click)="page(1)">{{'NEXT' | translate}}</button>
        </div>
      </div>
      <md-card-content *ngIf="update && setParts.results.length <= 0">Your set is full</md-card-content>
    </md-card>
  </div>

</div>
<div class="error" *ngIf="errorMessage">{{errorMessage}}</div>

和组件：

import { Component, ViewChild, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Location } from '@angular/common';
import { SetDetail } from './setDetail';
import { SetParts, Part } from './setParts';
import { NewSet } from './newSet';
import { Res } from './res';
import { Set } from './set';
import { SetService } from './set.service';
import { Auth }      from '../auth/auth.service';

@Component({
  selector: 'setDetail',
  templateUrl: 'set.component.html',
  styleUrls: ['set.component.css'],

  providers: [SetService]
})

export class SetComponent implements OnInit {
  public setDetail?: SetDetail;
  public setParts?: SetParts;
  public errorMessage: string;
  public idSet?: string;
  public isInstructions: string = 'Il n\'y a pas d\'instructions disponible.';
  public isView: boolean = true;
  public pag: number = 0;
  public model: NewSet;
  public sended?: NewSet;
  public submitted: boolean = false;
  public tata: {[ key: string ]: Res} = {};
  public set?: Set;
  public mySetParts: SetParts = {count: 0, previous: null, next: null, results: []};
  public first: boolean = true;
  public imgSelected: number = 0;
  public shouldDoIt = true;
  public update: boolean = false;

  constructor(private setService: SetService,
              private activatedRoute: ActivatedRoute,
              private router: Router,
              private location: Location,
              private auth: Auth) {
  }

  public goToDetail(colorPart: Part): void {
    let link = ['/colorPart', colorPart.colorPart.part.idPart, colorPart.colorPart.color.color];
    this.router.navigate(link);
  }

  public getSetDetail(): void {
    this.setService.getSetDetail(this.idSet).then((setDetail) => {
        this.setDetail = setDetail;
        if (this.setDetail.setInstructions.length !== 0) {
          this.isInstructions = 'Instructions';
        }
      },
      (error) => this.errorMessage = <any> error);
    if (this.auth.authenticated()) {
      this.setService.getMySet(this.idSet).subscribe((setList) => {
          if (setList.count > 0) {
            this.update = true;
            this.model.box = setList.results[0].box;
            this.model.instruction = setList.results[0].instruction;
            this.model.note = setList.results[0].note;
            this.model.status = setList.results[0].status;
            this.model.forPart = setList.results[0].forPart;
          }
        },
        (error) => this.errorMessage = <any> error);
    }
  };

  public deleted(set: SetDetail) {
    this.setService.deleteSet(set.idSet)
      .subscribe((value) => {
          this.update = false;
          this.initForm();
        },
        (error) => this.errorMessage = <any> error);
  }

  public goBack(): void {
    this.location.back();
  }

  public getSetParts(): void {
    this.setService.getSetParts(this.idSet)
      .subscribe((setParts) => {
          this.setParts = setParts;
        },
        (error) => this.errorMessage = <any> error
      );
    this.getMySetParts();
  }

  public getMySetParts(): void {
    if (this.auth.authenticated()) {
      this.setService.getMySetParts(this.idSet).then((MySetParts) => {
          this.mySetParts.count = MySetParts.count;
          for (let part of MySetParts.results) {
            this.mySetParts.results.push(part.setPart);
            let obj: Res = {setPart: part.setPart, number: part.number};
            this.tata[part.setPart.colorPart.color.color.toString()
            + part.setPart.colorPart.part.idPart.toString()] = obj;
          }
          ;
        },
        (error) => this.errorMessage = <any> error);
    }
  }

  public page(n: number): void {
    if (n) {
      this.setService.page(this.setParts.next)
        .subscribe((setParts) => this.setParts = setParts,
          (error) => this.errorMessage = <any> error);
      this.pag += 1;
    } else {
      this.setService.page(this.setParts.previous)
        .subscribe((setParts) => this.setParts = setParts,
          (error) => this.errorMessage = <any> error);
      this.pag -= 1;
    }
  }

  public onSubmit(): void {
    if (this.submitted === true) {
      return;
    }
    let test: Res[] = [];
    for (let key in this.tata) {
      if (this.tata.hasOwnProperty(key)) {
        test.push(this.tata[key]);
      }
    }
    this.model.mySetParts = test;
    this.submitted = true;
    if (this.update === true) {
      this.setService.updateSet(this.model).subscribe(
        (data) => {
          this.sended = data;
          this.getSetDetail();
          this.update = true;
          this.submitted = false;
          this.sended = null;
        },
        (error) => {
          this.submitted = false;
          this.errorMessage = <any> error;
        }
      );
    } else {
      this.setService.addSet(this.model).subscribe(
        (data) => {
          this.sended = data;
          this.getSetDetail();
          this.update = true;
          this.submitted = false;
          this.sended = null;
        },
        (error) => {
          this.submitted = false;
          this.errorMessage = <any> error;
        }
      );
    }
  }

  public isMissing(part: Part, i: number): boolean {
    if (this.tata[part.colorPart.color.color.toString() +
      part.colorPart.part.idPart.toString()] &&
      this.tata[part.colorPart.color.color.toString() +
      part.colorPart.part.idPart.toString()].number === i) {
      return true;
    }
    return false;
  }

  public onChange(setPart: Part, nbr: number): void {
    let obj: Res = {setPart, number: nbr};
    this.tata[setPart.colorPart.color.color.toString() +
    setPart.colorPart.part.idPart.toString()] = obj;
  }

  public buttonStateNext(): boolean {
    return this.setParts.next === null;
  }

  public buttonStatePrev(): boolean {
    return this.setParts.previous === null;
  }

  public toggleButton(): void {
    let tmp: SetParts;

    tmp = this.setParts;
    this.setParts = this.mySetParts;
    this.mySetParts = tmp;
  }

  public imgClicked(event: any, id: number): void {
    this.imgSelected = id;
  }

  public isSelected(id: number): boolean {
    if (this.imgSelected === id || (this.imgSelected === id && id === 0)) {
      return true;
    }
    return false;
  }

  public changeBackground(part: Part): string {
    if (part.colorPart.color.rgb) {
      if (part.colorPart.color.rgb === 'FFFFFF') {
        return '#f2f2f2';
      } else {
        return '#' + part.colorPart.color.rgb;
      }
    }
    return null;
  }

  public changeColor(part: Part): string {
    if (part.colorPart.color.rgb === 'FFFFFF') {
      return '#000000';
    }
    return null;
  }

  public ngOnInit(): void {
    this.activatedRoute.params.forEach((params: Params) => {
      this.idSet = params['id_set']; // (+) converts string 'id' to a number
    });
    this.initForm();
    this.getSetDetail();
  }

  private initForm(): void {
    this.set = {
      idSet: this.idSet, year: null, nbParts: null,
      theme: null, name: null, image: null
    };
    this.model = new NewSet(this.set, false, false, false, '', 0, []);
  }

}

已解决： 问题来自实施不当的提供商。修复后因为我觉得很丑，这个问题自己解决了

Answer 1

已解决：问题来自实施不当的提供商。修复后因为我觉得很丑，这个问题自己解决了

Angular2 webpack 构建 UserError

Angular2 webpack building UserError

aot

webpack

angular