error TS2305: Module has no exported member

Question

I am doing following two imports in a typescript file:

import { DOCUMENT } from '@angular/platform-browser';
import { Positioning } from '@ng-bootstrap/ng-bootstrap';

First statement works however compiler complains about the second statement (ng-bootstrap import):

src/app/extensions/angular-calendar/directives/calendarTooltip.directive.ts(19,10): error TS2305: Module '"/Users/gg/OneDrive/Studies/Node/timely-frontend/node_modules/@ng-bootstrap/ng-bootstrap/index"' has no exported member 'Positioning'.

I have checeked that I have ng-bootstrap installed. I am not sure what could be possible cause for this.

Following is my tsconfig.json file:

{
  "compilerOptions": {
    "outDir": "build/app",
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "gulpfile.ts",
    "node_modules"
  ]
}

My installed ng-bootstrap:

gg:timely-frontend gaurav$ tree node_modules/@ng-bootstrap/ng-bootstrap
node_modules/@ng-bootstrap/ng-bootstrap
├── README.md
├── accordion
│   ├── accordion-config.d.ts
│   ├── accordion-config.js
│   ├── accordion-config.js.map
│   ├── accordion-config.metadata.json
│   ├── accordion.d.ts
│   ├── accordion.js
│   ├── accordion.js.map
│   ├── accordion.metadata.json
│   ├── accordion.module.d.ts
│   ├── accordion.module.js
│   ├── accordion.module.js.map
│   └── accordion.module.metadata.json
├── alert
│   ├── alert-config.d.ts
│   ├── alert-config.js
│   ├── alert-config.js.map
│   ├── alert-config.metadata.json
│   ├── alert.d.ts
│   ├── alert.js
│   ├── alert.js.map
│   ├── alert.metadata.json
│   ├── alert.module.d.ts
│   ├── alert.module.js
│   ├── alert.module.js.map
│   └── alert.module.metadata.json
├── bundles
│   ├── ng-bootstrap.js
│   └── ng-bootstrap.js.map
├── buttons
│   ├── radio.d.ts
│   ├── radio.js
│   ├── radio.js.map
│   ├── radio.metadata.json
│   ├── radio.module.d.ts
│   ├── radio.module.js
│   ├── radio.module.js.map
│   └── radio.module.metadata.json
├── carousel
│   ├── carousel-config.d.ts
│   ├── carousel-config.js
│   ├── carousel-config.js.map
│   ├── carousel-config.metadata.json
│   ├── carousel.d.ts
│   ├── carousel.js
│   ├── carousel.js.map
│   ├── carousel.metadata.json
│   ├── carousel.module.d.ts
│   ├── carousel.module.js
│   ├── carousel.module.js.map
│   └── carousel.module.metadata.json
├── collapse
│   ├── collapse.d.ts
│   ├── collapse.js
│   ├── collapse.js.map
│   ├── collapse.metadata.json
│   ├── collapse.module.d.ts
│   ├── collapse.module.js
│   ├── collapse.module.js.map
│   └── collapse.module.metadata.json
├── datepicker
│   ├── datepicker-config.d.ts
│   ├── datepicker-config.js
│   ├── datepicker-config.js.map
│   ├── datepicker-config.metadata.json
│   ├── datepicker-day-template-context.d.ts
│   ├── datepicker-day-template-context.js
│   ├── datepicker-day-template-context.js.map
│   ├── datepicker-day-view.d.ts
│   ├── datepicker-day-view.js
│   ├── datepicker-day-view.js.map
│   ├── datepicker-day-view.metadata.json
│   ├── datepicker-i18n.d.ts
│   ├── datepicker-i18n.js
│   ├── datepicker-i18n.js.map
│   ├── datepicker-i18n.metadata.json
│   ├── datepicker-input.d.ts
│   ├── datepicker-input.js
│   ├── datepicker-input.js.map
│   ├── datepicker-input.metadata.json
│   ├── datepicker-month-view.d.ts
│   ├── datepicker-month-view.js
│   ├── datepicker-month-view.js.map
│   ├── datepicker-month-view.metadata.json
│   ├── datepicker-navigation-select.d.ts
│   ├── datepicker-navigation-select.js
│   ├── datepicker-navigation-select.js.map
│   ├── datepicker-navigation-select.metadata.json
│   ├── datepicker-navigation.d.ts
│   ├── datepicker-navigation.js
│   ├── datepicker-navigation.js.map
│   ├── datepicker-navigation.metadata.json
│   ├── datepicker-service.d.ts
│   ├── datepicker-service.js
│   ├── datepicker-service.js.map
│   ├── datepicker-service.metadata.json
│   ├── datepicker-view-model.d.ts
│   ├── datepicker-view-model.js
│   ├── datepicker-view-model.js.map
│   ├── datepicker-view-model.metadata.json
│   ├── datepicker.d.ts
│   ├── datepicker.js
│   ├── datepicker.js.map
│   ├── datepicker.metadata.json
│   ├── datepicker.module.d.ts
│   ├── datepicker.module.js
│   ├── datepicker.module.js.map
│   ├── datepicker.module.metadata.json
│   ├── ngb-calendar.d.ts
│   ├── ngb-calendar.js
│   ├── ngb-calendar.js.map
│   ├── ngb-calendar.metadata.json
│   ├── ngb-date-parser-formatter.d.ts
│   ├── ngb-date-parser-formatter.js
│   ├── ngb-date-parser-formatter.js.map
│   ├── ngb-date-struct.d.ts
│   ├── ngb-date-struct.js
│   ├── ngb-date-struct.js.map
│   ├── ngb-date.d.ts
│   ├── ngb-date.js
│   └── ngb-date.js.map
├── dropdown
│   ├── dropdown-config.d.ts
│   ├── dropdown-config.js
│   ├── dropdown-config.js.map
│   ├── dropdown-config.metadata.json
│   ├── dropdown.d.ts
│   ├── dropdown.js
│   ├── dropdown.js.map
│   ├── dropdown.metadata.json
│   ├── dropdown.module.d.ts
│   ├── dropdown.module.js
│   ├── dropdown.module.js.map
│   └── dropdown.module.metadata.json
├── index.d.ts
├── index.js
├── index.js.map
├── index.metadata.json
├── modal
│   ├── modal-backdrop.d.ts
│   ├── modal-backdrop.js
│   ├── modal-backdrop.js.map
│   ├── modal-backdrop.metadata.json
│   ├── modal-container.d.ts
│   ├── modal-container.js
│   ├── modal-container.js.map
│   ├── modal-container.metadata.json
│   ├── modal-dismiss-reasons.d.ts
│   ├── modal-dismiss-reasons.js
│   ├── modal-dismiss-reasons.js.map
│   ├── modal-dismiss-reasons.metadata.json
│   ├── modal-ref.d.ts
│   ├── modal-ref.js
│   ├── modal-ref.js.map
│   ├── modal-ref.metadata.json
│   ├── modal-stack.d.ts
│   ├── modal-stack.js
│   ├── modal-stack.js.map
│   ├── modal-stack.metadata.json
│   ├── modal-window.d.ts
│   ├── modal-window.js
│   ├── modal-window.js.map
│   ├── modal-window.metadata.json
│   ├── modal.d.ts
│   ├── modal.js
│   ├── modal.js.map
│   ├── modal.metadata.json
│   ├── modal.module.d.ts
│   ├── modal.module.js
│   ├── modal.module.js.map
│   └── modal.module.metadata.json
├── package.json
├── pagination
│   ├── pagination-config.d.ts
│   ├── pagination-config.js
│   ├── pagination-config.js.map
│   ├── pagination-config.metadata.json
│   ├── pagination.d.ts
│   ├── pagination.js
│   ├── pagination.js.map
│   ├── pagination.metadata.json
│   ├── pagination.module.d.ts
│   ├── pagination.module.js
│   ├── pagination.module.js.map
│   └── pagination.module.metadata.json
├── popover
│   ├── popover-config.d.ts
│   ├── popover-config.js
│   ├── popover-config.js.map
│   ├── popover-config.metadata.json
│   ├── popover.d.ts
│   ├── popover.js
│   ├── popover.js.map
│   ├── popover.metadata.json
│   ├── popover.module.d.ts
│   ├── popover.module.js
│   ├── popover.module.js.map
│   └── popover.module.metadata.json
├── progressbar
│   ├── progressbar-config.d.ts
│   ├── progressbar-config.js
│   ├── progressbar-config.js.map
│   ├── progressbar-config.metadata.json
│   ├── progressbar.d.ts
│   ├── progressbar.js
│   ├── progressbar.js.map
│   ├── progressbar.metadata.json
│   ├── progressbar.module.d.ts
│   ├── progressbar.module.js
│   ├── progressbar.module.js.map
│   └── progressbar.module.metadata.json
├── rating
│   ├── rating-config.d.ts
│   ├── rating-config.js
│   ├── rating-config.js.map
│   ├── rating-config.metadata.json
│   ├── rating.d.ts
│   ├── rating.js
│   ├── rating.js.map
│   ├── rating.metadata.json
│   ├── rating.module.d.ts
│   ├── rating.module.js
│   ├── rating.module.js.map
│   └── rating.module.metadata.json
├── tabset
│   ├── tabset-config.d.ts
│   ├── tabset-config.js
│   ├── tabset-config.js.map
│   ├── tabset-config.metadata.json
│   ├── tabset.d.ts
│   ├── tabset.js
│   ├── tabset.js.map
│   ├── tabset.metadata.json
│   ├── tabset.module.d.ts
│   ├── tabset.module.js
│   ├── tabset.module.js.map
│   └── tabset.module.metadata.json
├── timepicker
│   ├── ngb-time-struct.d.ts
│   ├── ngb-time-struct.js
│   ├── ngb-time-struct.js.map
│   ├── ngb-time.d.ts
│   ├── ngb-time.js
│   ├── ngb-time.js.map
│   ├── timepicker-config.d.ts
│   ├── timepicker-config.js
│   ├── timepicker-config.js.map
│   ├── timepicker-config.metadata.json
│   ├── timepicker.d.ts
│   ├── timepicker.js
│   ├── timepicker.js.map
│   ├── timepicker.metadata.json
│   ├── timepicker.module.d.ts
│   ├── timepicker.module.js
│   ├── timepicker.module.js.map
│   └── timepicker.module.metadata.json
├── tooltip
│   ├── tooltip-config.d.ts
│   ├── tooltip-config.js
│   ├── tooltip-config.js.map
│   ├── tooltip-config.metadata.json
│   ├── tooltip.d.ts
│   ├── tooltip.js
│   ├── tooltip.js.map
│   ├── tooltip.metadata.json
│   ├── tooltip.module.d.ts
│   ├── tooltip.module.js
│   ├── tooltip.module.js.map
│   └── tooltip.module.metadata.json
├── typeahead
│   ├── highlight.d.ts
│   ├── highlight.js
│   ├── highlight.js.map
│   ├── highlight.metadata.json
│   ├── typeahead-config.d.ts
│   ├── typeahead-config.js
│   ├── typeahead-config.js.map
│   ├── typeahead-config.metadata.json
│   ├── typeahead-window.d.ts
│   ├── typeahead-window.js
│   ├── typeahead-window.js.map
│   ├── typeahead-window.metadata.json
│   ├── typeahead.d.ts
│   ├── typeahead.js
│   ├── typeahead.js.map
│   ├── typeahead.metadata.json
│   ├── typeahead.module.d.ts
│   ├── typeahead.module.js
│   ├── typeahead.module.js.map
│   └── typeahead.module.metadata.json
└── util
    ├── popup.d.ts
    ├── popup.js
    ├── popup.js.map
    ├── positioning.d.ts
    ├── positioning.js
    ├── positioning.js.map
    ├── triggers.d.ts
    ├── triggers.js
    ├── triggers.js.map
    ├── util.d.ts
    ├── util.js
    ├── util.js.map
    └── util.metadata.json

18 directories, 287 files

Solution 1

Positioning is not part of the public API of @ng-bootstrap/ng-bootstrap and you simply can't import what was (intentionally) not exported. You can check the public API surface here: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/index.ts

You may try opening an issue at https://github.com/ng-bootstrap/ng-bootstrap/issues and ask for the Positioning service to be exported but be prepared to have a very good use-case for this - the project is rather conservative about its public API and intends to expose only things that are truly needed externally.

Solution 2

calendarTooltip.directive.ts doesn't have export class clauses. Fix you error or use angular-cli to generate a boilerplate directive.

You can use the reference from this answer Angular-cli component generator generate additional files.

Comments

[silentsod]

Not only is this the better answer, this guy is one of the ones behind the package.

[Kumar Gaurav]

Right.. my bad! It works when I do the following: import { Positioning } from '@ng-bootstrap/ng-bootstrap/util/positioning'; Thanks a lot.