Mitgelieferte Parameter stimmen mit keiner Signatur des Anrufziels überein. Heroku Deployment

Question

"@angular/cli": "1.0.0", 
"@angular/compiler": "2.4.9", 
"@angular/compiler-cli": "2.4.9", 
"@angular/core": "2.4.9", 

Dies ist meine erste mittelgroße angular2-Projekt und ich bekomme den folgenden Fehler beim Versuch, auf Heroku bereitzustellen.

ERROR in /tmp/build_517db5365a6effb7ffc72a360964722f/src/$$_gendir/app/modules/messages/components/list-messages.component.ngfactory.ts (440,79): Supplied parameters do not match any signature of call target.

package.json Skripte:

"scripts": { 
    "ng": "ng", 
    "heroku-prebuild": "npm install -g http-server", 
    "heroku-postbuild": "ng build --prod", 
    "start": "http-server dist/", 
    "test": "ng test", 
    "lint": "ng lint", 
    "e2e": "ng e2e" 
    }, 

Beachten Sie, dass dieser Fehler tritt nur auf, wenn sie Heroku einzusetzen versuchen, wenn ng build --prod lokal ausgeführt, ich den gleichen Fehler nicht erhalten, die Kompilation beendet ohne Fehler.

Ich habe nach einer Funktion gesucht, die die erwarteten Parameter nicht hat, aber die Komponente ist so einfach, ich sehe es wirklich nicht.

Hier ist meine Liste-messages.component.ts:

import { Component } from '@angular/core' 
import { Router } from '@angular/router' 
import { MessagesService } from '../services/messages.service' 


@Component({ 
    templateUrl: 'list-messages.component.html', 
    providers: [ MessagesService ], 
    styleUrls: ['./list-messages.component.css'] 
}) 

export class ListMessagesComponent { 

    public messages: any 
    public search_q: any 
    public errors: string 
    public success: string 
    public page: any 
    private total: number 
    private limit: any 


    constructor(public router: Router, private messageService: MessagesService) {} 

    ngOnInit() { 
     this.page = 0 
     this.limit = 20 
     this.messageService.getMessages(this.page, this.limit) 
      .subscribe(res => { 
       console.log(res) 
       if (res.status == 200 && res.data.length > 0) { 
        this.messages = res.data 
        this.total = res.total 
       } else { 
        this.errors = res.message || "Unable to complete operation" 
       } 
      }) 
    } 

    /** 
    * On search event 
    */ 

    onSearch(query) { 
     this.search_q = query 
    } 

    deleteMessage(id) { 
     if (id) { 
      this.messageService.deleteMessage(id) 
       .subscribe(res => { 
        if (res.status == 200) { 
         this.messageService.getMessages(this.page, this.limit) 
          .subscribe(res => { 
           if (res.status == 200) { 
            this.success = "Message deleted" 
            this.messages = res.data 
            this.total = res.total 
           } else { 
            this.success = null 
            this.errors = res.message || "Unable to get messages" 
           } 
          }) 
        } 
       }) 
     } else { 
      this.success = null 
      this.errors = "Unknown message" 
     } 
    } 


    // -------- PAGINATION ------- // 

    /** 
    * Loads next page 
    * 
    */ 

    nextPage() { 
     this.page += 1 
     this.messageService.getMessages(this.page, this.limit) 
      .subscribe(res => { 
       if (res.status == 200) { 
        this.success = null 
        this.errors = null 
        this.messages = res.data 
        this.total = res.total 
       } 
      }) 
    } 

    /** 
    * Checks if there is a next page 
    */ 

    hasNextPage() { 
     return this.page * this.limit < this.total && this.messages.length == this.limit 
    } 

    /** 
    * Loads previous page 
    * 
    */ 

    prevPage() { 
     if (this.page > 0) { 
      this.page -= 1 
      this.messageService.getMessages(this.page, this.limit) 
       .subscribe(res => { 
        if (res.status == 200) { 
         this.success = null 
         this.errors = null 
         this.messages = res.data 
         this.total = res.total 
        } 
       }) 
     } 
    } 

    /** 
    * Checks if there is a previous page 
    * 
    */ 

    hasPrevPage() { 
     return this.page >= 1 
    } 

} 

und hier ist mein messages.service.ts (für alle Fälle):

import { Injectable } from '@angular/core' 
import { Http, Headers, RequestOptions, URLSearchParams } from '@angular/http' 
import { Observable } from 'rxjs/Observable' 
import { environment } from '../../../../environments/environment' 
import 'rxjs/add/observable/throw' 
import 'rxjs/add/operator/map' 
import 'rxjs/add/operator/catch' 


@Injectable() 
export class MessagesService { 

    private baseUrl:string 
    private currentUser:any 
    private token:string 
    private headers:Headers 

    constructor(private http: Http){ 
     this.http = http 
     this.baseUrl = environment.api_url 
     this.currentUser = JSON.parse(localStorage.getItem('current-user')) 
     this.token = JSON.parse(localStorage.getItem('auth-token')) 
     this.headers = new Headers() 
     this.headers.append("Accept", "application/json") 
     this.headers.append("Content-Type", "application/json") 
     this.headers.append("x-user-id", this.currentUser._id) 
     this.headers.append("x-access-token", this.token) 
    } 

    /** 
    * Retrieves all messages 
    */ 

    getMessages(page?:string, limit?:string) { 
     let queryParam = new URLSearchParams() 
     queryParam.set('page', page) 
     queryParam.set('limit', limit) 
     let options = new RequestOptions({ headers: this.headers, search: queryParam }) 
     return this.http.get(this.baseUrl + '/messages', options) 
      .map(res => res.json()) 
      .catch(this.errorHandler) 
    } 

    /** 
    * Delete a specific message 
    * @param id 
    */ 

    deleteMessage(id) { 
     this.headers.delete('x-message-id') 
     this.headers.append('x-message-id', id) 
     let options = new RequestOptions({headers: this.headers}) 
     return this.http.delete(this.baseUrl + '/messages', options) 
      .map(res => res.json()) 
      .catch(this.errorHandler) 

    } 

    /** 
    * Error handler for all operations 
    * @param {Object} error 
    */ 

    errorHandler(error) { 
     return Observable.throw(error.json().error || 'Server Error') 
    } 
} 

Und meine Liste-messages.component. html:

<div class="row"> 
    <div class="col-lg-12"> 
     <div *ngIf="errors" class="error-container col-md-6"> 
      <div class="card card card-inverse card-danger"> 
       <div class="card-header"> 
        Error 
       </div> 
       <div class="card-block"> 
        <p>{{ errors }}</p> 
       </div> 
      </div> 
     </div> 
     <div *ngIf="success" class="error-container col-md-12"> 
      <div class="card card card-inverse card-primary"> 
       <div class="card-header"> 
        Success 
       </div> 
       <div class="card-block"> 
        <p>{{ success }}</p> 
       </div> 
      </div> 
     </div> 
     <div class="card" *ngIf="messages"> 
      <div class="card-header"> 
       <i class="fa fa-search"></i> Search 
      </div> 
      <div class="card-block"> 
       <input type="text" class="form-control" name="search_q" [(ngModel)]="search_q" (ngModelChange)="onSearch($event)"> 
      </div> 
     </div> 
     <div class="card" *ngIf="messages"> 
      <div class="card-header"> 
       <i class="fa fa-align-justify"></i> All Messages 
       <span class="total-count pull-right"> {{ total }}</span> 
      </div> 
      <div class="card-block"> 
       <table class="table table-condensed"> 
        <thead> 
         <tr> 
          <th> ID </th> 
          <th> Email </th> 
          <th> Message </th> 
          <th> Date sent </th> 
          <th> Actions </th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr *ngFor="let message of messages | messageFilter:search_q"> 
          <td>{{ message._id }}</td> 
          <td>{{ message.email }}</td> 
          <td>{{ message.message | truncate :15 }}</td> 
          <td>{{ message.date_sent | date: 'dd/MM/yyyy' }}</td> 
          <td> 
           <a href="mailto:{{ message.email }}" class="btn btn-primary">Respond</a> 
           <button class="btn btn-danger" (click)="deleteMessage(message._id)"> Delete </button> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
       <div class="pagination pull-right"> 
        <button class="pagination-button" id="prev-page" (click)="prevPage()" [disabled]="!hasPrevPage()">Prev</button> 
        <button class="pagination-button" id="next-page" (click)="nextPage()" [disabled]="!hasNextPage()">Next</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Alle Ideen oder Vorschläge sind sehr willkommen.

Danke!

Answer 1

Alle Ihre Methoden, die Parameter benötigt, sollte damit verbunden einen Typ haben, zum Beispiel sollte Ihre DeleteMessage Parameter id einen Typ haben,

Änderung als,

deleteMessage(id:any) { 
}