Angular 4: Error: Uncaught (in promise): TypeError: X is not a constructor

Question

我正在开发 Angular 4 应用程序。当我运行应用程序时，它会抛出此错误 -

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)

我搜索了一个解决方案，才知道这个问题与polyfills有关。有人建议将 "es6-shim" 升级到“0.35.0”版本。但是，我已经在使用该版本，如下所示，但问题仍未解决。

"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"
  }

下面的打字稿代码是抛出错误的地方。此行位于员工详细信息组件内 -

 employee: IEmployeeBase = new EmployeeBase();

编译后的 JS 代码如下所示 -

this.employee = new index_1.EmployeeBase();

有人遇到过类似的问题吗？任何帮助或指示都会非常有帮助。谢谢。

这是我的 class 定义 -

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 || [];
        
    }
}

Answer 1

可能是您试图将对象或变量用作构造函数，但对象和变量不是构造函数。尝试导入
import 'core-js'; import 'zone.js/dist/zone-microtask';

参考这个可能对你有帮助 https://airbrake.io/blog/javascript-error-handling/x-not-constructor-typeerror

Answer 2

最后 - 罪魁祸首被发现是 SystemJS 与 Barrels 不兼容。我发现 System JS 在 Angular 应用程序中与 Barrels（使用 index.js）不能很好地配合使用。

它无法解决循环依赖，并且在使用 Barrels 时无法正确加载模块。

我可以通过不使用 Barrels 导入对象来解决它，而是使用 JS 文件的完整限定路径。

Answer 3

试试这个..

ng build --prod --optimization=false

Angular 4: Error: Uncaught (in promise): TypeError: X is not a constructor

Angular 4: Error: Uncaught (in promise): TypeError: X is not a constructor

javascript

polyfills

ecmascript-6

es6-shim

angular