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 || [];
}
}At the end - culprit found to be SystemJS not compatible with Barrels. I found out that System JS doesn't work well with Barrels (using index.js) in Angular application.
It fails to resolve circular dependencies, and does not load modules properly when Barrels are used.
I could resolve it by not using Barrels to import objects, instead used full qualified path to JS files.