提供的参数与调用目标的任何签名都不匹配。 Heroku 部署

Question

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

这是我的第一个中型 angular2 项目，尝试部署到 Heroku 时出现以下错误。

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 脚本：

  "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"
  },

请注意，此错误仅在尝试部署到 Heroku 时发生，在本地运行 ng build --prod 时，我没有收到相同的错误，编译完成且没有错误。

我一直在寻找任何缺少预期参数的函数，但是组件太简单了我真的看不到它。

这是我的 list-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
    }

}

这是我的 messages.service.ts（以防万一）：

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')
    }
}

还有我的 list-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>

非常欢迎任何想法或建议。

谢谢！

Answer 1

你所有需要参数的方法都应该有一个与之关联的类型，例如你的deletemessage参数id应该有一个类型，

改成，

deleteMessage(id:any) {
}