SystemJS Error with Angular AOT: Uncaught (in promise): TypeError: ctor is not a constructor

857 Views Asked by At

I'm using Angular 4.4.1 + SystemJS 0.20.19 + NgBootstrap 1.0.0-beta.5 in an app. The app works in Angular JIT mode by following this instructions and having the following SystemJS configuration

meta: { "./*": { "esModule": true } }

I used "node_modules/.bin/ngc" -p tsconfig-aot.json to compile the app into an AOT app.

In the AOT app, I have the the SystemJS map configuration as shown at the end of this question.

The same app that worked in JIT mode does not work in the AOT mode, and generates the following error:

ERROR Error: Uncaught (in promise): TypeError: ctor is not a constructor
TypeError: ctor is not a constructor
    at _createClass (core.umd.min.js:90)
    at _createProviderInstance$1 (core.umd.min.js:90)
    at resolveNgModuleDep (core.umd.min.js:90)
    at NgModuleRef_.get (core.umd.min.js:210)
    at resolveNgModuleDep (core.umd.min.js:90)
    at _createClass (core.umd.min.js:90)
    at _createProviderInstance$1 (core.umd.min.js:90)
    at resolveNgModuleDep (core.umd.min.js:90)
    at NgModuleRef_.get (core.umd.min.js:210)
    at resolveDep (core.umd.min.js:97)
    at _createClass (core.umd.min.js:90)
    at _createProviderInstance$1 (core.umd.min.js:90)
    at resolveNgModuleDep (core.umd.min.js:90)
    at NgModuleRef_.get (core.umd.min.js:210)
    at resolveNgModuleDep (core.umd.min.js:90)
    at _createClass (core.umd.min.js:90)
    at _createProviderInstance$1 (core.umd.min.js:90)
    at resolveNgModuleDep (core.umd.min.js:90)
    at NgModuleRef_.get (core.umd.min.js:210)
    at resolveDep (core.umd.min.js:97)
    at resolvePromise (config.ts:60)
    at resolvePromise (config.ts:60)
    at config.ts:60
    at ZoneDelegate.invokeTask (config.ts:60)
    at Object.onInvokeTask (core.umd.min.js:41)
    at ZoneDelegate.invokeTask (config.ts:60)
    at Zone.runTask (config.ts:60)
    at drainMicroTaskQueue (config.ts:60)
    at <anonymous>

Questions:

  1. I have no way of knowing which module is causing this error. After numerous debugging, the error comes while the NgBootstrao NgbModel is loading. How to fix this error?

  2. Is there some configuration settings that I can use to see the progress/log of the modules that SystemJS is loading in the browser console?

SystemJS Map for NgBootstrap:

     @ng-bootstrap/ng-bootstrap :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
    "@ng-bootstrap/ng-bootstrap/modal/modal-stack":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/modal/modal":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/alert/alert-config":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/progressbar/progressbar-config":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/tooltip/tooltip-config":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/typeahead/typeahead-config":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/accordion/accordion-config":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/carousel/carousel-config":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/datepicker/ngb-calendar":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/datepicker/datepicker-i18n":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/datepicker/ngb-date-parser-formatter":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/datepicker/datepicker-config":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/dropdown/dropdown-config":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/pagination/pagination-config":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/popover/popover-config":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/rating/rating-config":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/tabset/tabset-config":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/timepicker/timepicker-config":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/alert/alert.module":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/buttons/buttons.module":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/collapse/collapse.module":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/progressbar/progressbar.module":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/tooltip/tooltip.module":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/typeahead/typeahead.module":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/accordion/accordion.module":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/carousel/carousel.module":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/datepicker/datepicker.module":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/dropdown/dropdown.module":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/dropdown/dropdown":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/datepicker/datepicker-input":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
    "@ng-bootstrap/ng-bootstrap/modal/modal.module":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/pagination/pagination.module":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/popover/popover.module":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/rating/rating.module":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/tabset/tabset.module":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/timepicker/timepicker.module":  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js , 
    "@ng-bootstrap/ng-bootstrap/index" :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
     @ng-bootstrap/ng-bootstrap/alert/alert  :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
     @ng-bootstrap/ng-bootstrap/tooltip/tooltip  :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
     @ng-bootstrap/ng-bootstrap/typeahead/highlight  :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
     @ng-bootstrap/ng-bootstrap/typeahead/typeahead-window  :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
     @ng-bootstrap/ng-bootstrap/modal/modal-window  :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
     @ng-bootstrap/ng-bootstrap/modal/modal-backdrop  :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
     @ng-bootstrap/ng-bootstrap/datepicker/datepicker-day-view  :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
     @ng-bootstrap/ng-bootstrap/datepicker/datepicker-month-view  :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
     @ng-bootstrap/ng-bootstrap/datepicker/datepicker  :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
     @ng-bootstrap/ng-bootstrap/datepicker/datepicker-navigation  :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
     @ng-bootstrap/ng-bootstrap/datepicker/datepicker-service  :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
     @ng-bootstrap/ng-bootstrap/datepicker/datepicker-keymap-service  :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
     @ng-bootstrap/ng-bootstrap/popover/popover  :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
     @ng-bootstrap/ng-bootstrap/datepicker/datepicker-navigation-select  :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
     @ng-bootstrap/ng-bootstrap/modal/modal-ref  :  /lib/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js ,
0

There are 0 best solutions below