Currently in the process of migrating an Angular 2 project to Angular 4 and also updating the angular-cli to the latest version 1.0. Unfortunately, there is no Ahead-of-Time compilation (AOT) implemented in the application.
An issue has arisen with a component in the app during the build process, although it does not show any errors in the IDE (Visual Studio 2017 Professional).
The specific error messages encountered during the build are as follows:
ERROR in .../src/app/shift-list/shift-list.component.ts (163,88): Property 'userRank' does not exist on type 'void'.
ERROR in .../src/app/shift-list/shift-list.component.ts (176,90): Property 'userPlatoon' does not exist on type 'void'.
Below is a condensed version of the problematic component code:
@Component({
selector: 'ksm-shift-list',
templateUrl: './shift-list.component.html',
styleUrls: ['./shift-list.component.css'],
providers: [
DnnService
]
})
export class ShiftListComponent implements OnInit {
...
userRank: string;
userPlatoon: string;
...
constructor(
private _dnn: DnnService) { }
// On Init ********************************************************
ngOnInit(): void {
this.getDepartmentAndOptions();
}
// #################################################################
// LIST OPTIONS
// #################################################################
getDepartmentAndOptions(): void {
this._dnn.getOptionsAndProfile()
.subscribe(
data => {
this.appOptions = data;
this.ptnList = this.appOptions.Platoons;
this.rankList = this.appOptions.Ranks;
if (this.appOptions.User != null) {
this.userRank = this.appOptions.User.RankID;
this.userPlatoon = this.appOptions.User.PlatoonID;
}
}
),
(err: any) => { // on error
console.log(err);
},
() => { // on completion
this.sortRanks();
this.sortPlatoons();
}
}
// SORT RANK FUNCTION ****************
sortRanks(): void {
// sort rank list
this.rankList.sort((b1: Rank, b2: Rank): number => {
if (b1.Priority < b2.Priority) { return -1; };
if (b1.Priority > b2.Priority) { return 1; };
return 0;
});
// assign existing rank
this.selectedRank = this.rankList.filter(function (r) { return r.Code === this.userRank })[0].RankID
}
// SORT PLATOONS FUNCTION ***********
sortPlatoons(): void {
// sort results
this.ptnList.sort((p1: Platoon, p2: Platoon): number => {
if (p1.PlatoonID < p2.PlatoonID) { return -1; };
if (p1.PlatoonID > p2.PlatoonID) { return 1; };
return 0;
});
// assign existing platoon
this.selectedPlatoon = this.ptnList.filter(function (p) { return p.Code === this.userPlatoon })[0].PlatoonID;
}
}
The mentioned error occurs specifically in the following two lines:
this.selectedRank = this.rankList.filter(function (r) { return r.Code === this.userRank })[0].RankID;
and
this.selectedPlatoon = this.ptnList.filter(function (p) { return p.Code === this.userPlatoon })[0].PlatoonID;
No alterations were made to the code, and none of the other components sharing similar code patterns produce this particular error. Any insights or assistance in identifying why this error surfaces during the CLI build process would be greatly appreciated.
Many thanks in advance for your help!