wonderful world
wonderful world

Reputation: 11599

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

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 ,

Upvotes: 1

Views: 853

Answers (0)

Related Questions