My Angular2 app has been building, compiling and running fine for months now. The package.json has not changed in months either.
Suddenly today when I deploy to Heroku I get a whole host of errors I have never seen before.
For example:
ERROR in /tmp/build_2370f712cb3c370be2ee07c793ee7c1e/src/$$_gendir/app/products
/product-form/product-form.component.ngfactory.ts (93,9):
Supplied parameters do not match any signature of call target.
I have no idea which line it is referring to in the actual component. This code worked and built a few days ago.
I contacted Heroku support and they do not know why this suddenly started happening.
Judging from this question, it seems to be something to do with AOT compilation. But I thought Heroku always did that. Somewhat confused here.
If I locally force AOT compile with ng build --aot --prod
none of these errors occur.
Notice that the error is referring to line 93 of an 'ngfactory.ts' file - so how can I find what the ACTUAL line no is in the component?
EDIT
I created a brand new project, updated everything to Angular 4.1.3. Each time I added a new component I pushed to Heroku. Everything has been fine (about 30 components so far) until the latest component, which now gives the same error EXCEPT it is not referring to ngFactory.ts
file, but to the html file!
ERROR in ng:///tmp/build_48fd9e2da47f9df65e24dab60d5fc080/src/app/
proposal-list/proposal-list.component.html (8,7):
Supplied parameters do not match any signature of call target.
Here is the file, line 8 is the closing </pagination-controls>
. This makes no sense - what supplied parameters is it referring to?!
<div class="row fb-pager-row">
<div class="col-md-4 text-left fb-pager-records">
{{total$ | async | i18nPlural:pluralizeMapQuote}}
</div>
<div class="col-md-8 text-right">
<pagination-controls class="fb-pager" autoHide="true"
(pageChange)="goToPage($event)" id="server" previousLabel="Prev" maxSize="7">
</pagination-controls>
</div>
</div>
<div class="list-group">
<fb-proposal-list-item *ngFor="let proposal of items$ | async |
paginate: { id: 'server', itemsPerPage: 10, currentPage: currentPage, totalItems: total$ | async }"
[proposal]="proposal" (proposalDataChanged)="handleDataChanged($event)">
</fb-proposal-list-item>
</div>
If I remove the pagination controls entirely, it builds. So I am assuming there is something borked in this third party control.
So it is line 7 that has the problem, not line 8.
I finally figured out that:
(pageChange)="goToPage($event)"
has 2 parameters, not one. So
(pageChange)="goToPage($event, true)"
fixes the error.