I am working on an Angular 4 app. At when I run the app, it throws this error -
ERROR Error: Uncaught (in promise): TypeError: index_1.EmployeeBase is not a constructor
TypeError: index_1.EmployeeBase is not a constructor
at new EmployeeDetailComponent (employee-detail.component.ts:112)
at createClass (core.umd.min.js:97)
at createDirectiveInstance (core.umd.min.js:97)
at createViewNodes (core.umd.min.js:132)
at createRootView (core.umd.min.js:132)
at Object.createProdRootView [as createRootView] (core.umd.min.js:132)
at ComponentFactory_.create (core.umd.min.js:209)
at ComponentFactoryBoundToModule.create (core.umd.min.js:188)
at ViewContainerRef_.createComponent (core.umd.min.js:210)
at RouterOutlet.activateWith (router.umd.min.js:57)
at new EmployeeDetailComponent (employee-detail.component.ts:112)
at createClass (core.umd.min.js:97)
at createDirectiveInstance (core.umd.min.js:97)
at createViewNodes (core.umd.min.js:132)
at createRootView (core.umd.min.js:132)
at Object.createProdRootView [as createRootView] (core.umd.min.js:132)
at ComponentFactory_.create (core.umd.min.js:209)
at ComponentFactoryBoundToModule.create (core.umd.min.js:188)
at ViewContainerRef_.createComponent (core.umd.min.js:210)
at RouterOutlet.activateWith (router.umd.min.js:57)
at u (zone.min.js:1)
at u (zone.min.js:1)
at zone.min.js:1
at e.invokeTask (zone.min.js:1)
at Object.onInvokeTask (core.umd.min.js:41)
at e.invokeTask (zone.min.js:1)
at r.runTask (zone.min.js:1)
at o (zone.min.js:1)
at t.invokeTask [as invoke] (zone.min.js:1)
at d (zone.min.js:1)I searched for a solution, and came to know, the issue is related to polyfills. There were suggestions to upgrade "es6-shim" to "0.35.0" version. However I am already using that version as can be seen below, but still the issue is not resolved.
"dependencies": {
"@angular/animations": "^4.4.3",
"@angular/common": "^4.4.3",
"@angular/compiler": "^4.4.3",
"@angular/core": "^4.4.3",
"@angular/forms": "^4.4.3",
"@angular/http": "^4.4.3",
"@angular/platform-browser": "^4.4.3",
"@angular/platform-browser-dynamic": "^4.4.3",
"@angular/router": "^4.4.3",
"@angular/upgrade": "^4.4.3",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
"@ngui/auto-complete": "^0.14.4",
"bootstrap": "^4.0.0-beta",
"core-js": "^2.5.1",
"jquery": "^3.2.1",
"ng2-bootstrap-modal": "^1.0.1",
"ng2-translate": "^5.0.0",
"ng2-validation": "^4.2.0",
"ngx-contextmenu": "^1.3.3",
"ngx-infinite-scroll": "^0.5.2",
"normalize.css": "^7.0.0",
"popper.js": "^1.12.5",
"rxjs": "5.1.0",
"systemjs": "0.19.40",
"traceur": "^0.0.96",
"underscore": "^1.8.3",
"zone.js": "^0.8.17"
},
"devDependencies": {
"@angular/language-service": "^4.4.3",
"@types/jasmine": "2.5.45",
"@types/node": "^6.0.88",
"browser-sync": "^2.18.13",
"codelyzer": "~3.0.1",
**"es6-shim": "^0.35.3",**
"gulp": "^3.9.1",
"gulp-header": "^1.8.9",
"gulp-less": "^3.3.2",
"gulp-minify-css": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-typescript": "^3.2.2",
"gulp-uglify": "^3.0.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "^1.7.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage": "^1.1.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-htmlfile-reporter": "^0.3.5",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-typescript": "^3.0.8",
"karma-typescript-es6-transform": "^1.0.2",
"protractor": "~5.1.2",
"reflect-metadata": "^0.1.10",
"require-dir": "^0.3.2",
"run-sequence": "^2.2.0",
"systemjs-builder": "^0.16.11",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}Below typescript code is where the error is thrown. This line is inside employee-details component -
employee: IEmployeeBase = new EmployeeBase();
Complied JS code looks like this -
this.employee = new index_1.EmployeeBase();
Has anybody faced similar issue? Any help or pointers would be very helpful. Thank you.
Here is my class definition -
export class EmployeeCore {
Name: string;
Id: string;
FullName: string;
FirstName: string;
LastNamePrefix: string;
constructor(obj?: EmployeeCore) {
this.Name = obj && obj.Name || '';
this.Id = obj && obj.Id || '';
this.FullName = obj && obj.FullName || '';
this.FirstName = obj && obj.FirstName || '';
this.LastNamePrefix = obj && obj.LastNamePrefix || '';
}
}
export class EmployeeBase extends EmployeeCore {
BirthDate: Date;
BusinessUnit: IBusinessUnitReference;
CompanyHistory: Array<IEmployeeCompanyHistoryBase>;
constructor(obj?: EmployeeBase) {
super(obj);
this.BirthDate = obj && obj.BirthDate || null;
this.BusinessUnit = obj && obj.BusinessUnit || new BusinessUnitReference();
this.CompanyHistory = obj && obj.CompanyHistory || [];
}
}