Angular-cli: ng build --prod --aot Supplied parameters do not match any signature of call target

[wy8473979981]

ng build --prod --aot Supplied parameters do not match any signature of call target

package.json

{
  "name": "CoreUI",
  "version": "1.0.0-alpha.4",
  "description": "Open Source Bootstrap Admin Template",
  "author": "",
  "url": "http://coreui.io",
  "copyright": "Copyright 2017 creativeLabs Łukasz Holeczek",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.4.9",
    "@angular/compiler": "2.4.9",
    "@angular/core": "2.4.9",
    "@angular/forms": "2.4.9",
    "@angular/http": "2.4.9",
    "@angular/platform-browser": "2.4.9",
    "@angular/platform-browser-dynamic": "2.4.9",
    "@angular/router": "3.4.9",
    "@angular/upgrade": "2.4.9",
    "chart.js": "2.5.0",
    "core-js": "2.4.1",
    "moment": "2.17.1",
    "ng2-bootstrap": "1.4.0",
    "ng2-charts": "1.5.0",
    "ng2-file-upload": "^1.2.0",
    "ng2-validation": "^4.2.0",
    "ng2-validation-manager": "^0.3.1",
    "ngx-paginator": "0.0.14",
    "primeng": "^1.0.0",
    "rxjs": "5.2.0",
    "ts-helpers": "1.1.2",
    "underscore": "^1.8.3",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.0",
    "@angular/compiler-cli": "2.4.9",
    "@types/jasmine": "2.5.45",
    "@types/node": "7.0.8",
    "codelyzer": "2.0.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.5.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-coverage-istanbul-reporter": "0.3.0",
    "protractor": "5.1.1",
    "ts-node": "2.1.0",
    "tslint": "4.5.1",
    "typescript": "2.2.1",
    "@types/underscore": "^1.7.33"
  }
}

ts

import { Component, Input, Output, EventEmitter, OnInit, OnChanges } from '@angular/core';
import * as createArray from 'underscore';

@Component({
    selector: 'page',
    templateUrl: './page.component.html',
    styleUrls: ['./page.component.scss']
})
export class pageComponent implements OnInit,OnChanges {
    @Input() currentPage:number = null;   //当前页码
    @Input() pageSize:number = null;      //每页个数
    @Input() totalPages:number = null;    //总页数
    @Input() totalAmount:number = null;   //数据总个数
    @Output() onPageChange = new EventEmitter();
    gotoPage:number = null;
    // pager object
    pager: any = {};
    constructor() {}
    ngOnInit(){
        //  this.setPage(this.currentPage);
    }
    ngOnChanges() {
        this.setPage(this.currentPage);
    }

    setPage(currentPage) {
        if (currentPage < 1 || currentPage > this.pager.totalPages) {
            return;
        }
        // 数据总个数 当前页 每页个数
        if(this.totalAmount != undefined && this.pageSize != undefined && this.totalPages != undefined){
            this.pager = this.getPager(this.totalAmount, currentPage, this.pageSize, this.totalPages);
            // 向父组件传递
            debugger
            this.onPageChange.emit(this.pager);
        }

    }

    clickSetPage(){
        if(this.gotoPage != null){
            this.setPage(this.gotoPage);
        }
    }

    getPager(totalAmount: number, currentPage: number , pageSize: number, totalPages:number ) {
        let _totalPages = totalPages;
        let _totalAmount = totalAmount;
        let startPage: number, endPage: number;
        if (_totalPages <= 10) {
            // less than 10 total pages so show all
            startPage = 1;
            endPage = _totalPages;
        } else {
            // more than 10 total pages so calculate start and end pages
            if (currentPage <= 6) {
                startPage = 1;
                endPage = 10;
            } else if (currentPage + 4 >= _totalPages) {
                startPage = _totalPages - 9;
                endPage = _totalPages;
            } else {
                startPage = currentPage - 5;
                endPage = currentPage + 4;
            }
        }
        // calculate start and end item indexes
        let startIndex = (currentPage - 1) * pageSize;
        let endIndex = Math.min(startIndex + pageSize - 1, _totalAmount - 1);
        // create an array of pages to ng-repeat in the pager control
        let pages = createArray.range(startPage, endPage + 1);
        // return object with all pager properties required by the view
        return {
            totalAmount: _totalAmount,
            currentPage: currentPage,
            pageSize: pageSize,
            totalPages: _totalPages,
            startPage: startPage,
            endPage: endPage,
            startIndex: startIndex,
            endIndex: endIndex,
            pages: pages
        };
    }
}```

# html
```html
<div>

    <div class="clearfix">
        <!-- pager -->
        <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
            <li [ngClass]="{disabled:pager.currentPage === 1}">
                <a (click)="setPage(1)">首页</a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === 1}">
                <a (click)="setPage(pager.currentPage - 1)">上一页</a>
            </li>
            <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage == page}">
                <a (click)="setPage(page)">{{page}}</a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                <a (click)="setPage(pager.currentPage + 1)">下一页</a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                <a (click)="setPage(pager.totalPages)">尾页</a>
            </li>
        </ul>
        <span class="infoTextAndGoPageBtnWrap">
                <span class="totalText">
                    当前第<span class="currPageNum">{{ pager.currentPage }}</span>页
        <span class="totalInfoSplitStr">/</span> 共
        <span class="totalPageNum">{{ pager.totalPages }}</span>页
        </span>
        <span class="goPageBox">
                    &nbsp;转到
                    <span id="gopage_wrap">
                        <input type="number" name="gotoPage" [(ngModel)]="gotoPage" class="page-input">
                    </span>页
        <button type="button" class="btn-go-page" (click)="clickSetPage(gotoPage)">确定</button>
        </span>
        </span>
    </div>
</div>

<page [currentPage]="page.current" [pageSize]="page.size" [totalPages]="page.pages" [totalAmount]="page.total" (onPageChange)="paginate($event)"></page>

paginate(event) {
debugger
this.page.current = event.currentPage;
}

[HazizKhan]

Try
ng build --prod --aot=false

[sumitarora]

@wy8473979981 Prod is aot by default so you don;t need to explicitly define it. See the table here for more info https://github.com/angular/angular-cli/wiki/build#--dev-vs---prod-builds

[hansl]

@wy8473979981 I updated your comment for better formatting.

[wy8473979981]

ng build --prod --aot=false ;
We've solved the problem, thank you

[opiepj]

You didn't solve it, you just turned off AOT...

[HazizKhan]

@opiepj coz in angular CLI AOT is default true you don't need to use --aot

[opiepj]

@HazizKhan @wy8473979981 I would highly recommend using AOT for its performance and development capabilities. Also, the Angular team is planning on requiring AOT in their future release.

To solve the issue you had @wy8473979981 was a simple incorrect param alignment.

Your View:

<button type="button" class="btn-go-page" (click)="clickSetPage(gotoPage)">确定</button>

Your Component:

clickSetPage() { // <-- no gotoPage
        if(this.gotoPage != null){
            this.setPage(this.gotoPage);
        }
    }

In your html you are trying to call clickSetPage by passing in gotoPage. In your component your method clickSetPage has no assigned parameter, the AOT compiler is simply telling you this is a mistake and cannot compile.

The AOT compiler is essentially compiling the HTML templates for you so the users don't have to compile on the run time. Plus having AOT reduces your file size by about 100% (the compiler is really large).

[linkdesu]

@opiepj Thanks! The real problem solved!

[rameshpraja]

@opiepj Thanks for resolved exact issue.

[vvvhung]

@opiepj Many many thanks.

[levanlom96]

@opiepj I had a same problem. Thanks

[azhaordi]

Is there a way to give warning for this type of mismatch during development with either syntax warning or compile/run time error with aot=false ?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}