Ngx-bootstrap: 'DropdownModule' is not exported by node_modules\ng2-bootstrap\ng2-bootstrap.js

[ctrl-brk]

Trying to use rollup for treeshaking as desribed here:http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/
Getting the error 'DropdownModule' is not exported by node_modules\ng2-bootstrap\ng2-bootstrap.js when running rollup.

Any idea what the issue could be? es2015 instead of es5?

[valorkin]

Rechecked, it is exported. Try console.log(dropModule), if it is undefined, than rollup was not able to resolve ng2-bootstrap npm module

[valorkin]

BTW better to use angular-cli

[valorkin]

which version of ng2-bootstrap are you using BTW?
https://unpkg.com/[email protected]/ng2-bootstrap.js

[ctrl-brk]

Found the issue. For this to work I have to use rollup-plugin-commonjs.
Can angular-cli do tree shaking?

[quiringk]

@ctrl-brk What in particular did you do when "using rollup-plugin-commonjs"? I installed rollup-plugin-commonjs and added these statements to the rollup-config.js file:

commonjs({
        include: 'node_modules/rxjs/**',
        namedExports: { 
          'node_modules/angular2-toaster/angular2-toaster.js': ['ToasterService'],
          'node_modules/ng2-bootstrap/ng2-bootstrap.js': ['DropdownModule']
        }
      }),

Which I think worked for the angular 2 toaster because it removed the same error, but am still getting the DropdownModule error with this addition.

[quiringk]

Im getting this same error and don't know how to fix it with rollup-plugin-commonjs

'DropdownModule' is not exported by node_modules\ng2-bootstrap\ng2-bootstrap.js (imported by app\shared\navigation\navigation.module.js). For help fixing this error see https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module

Error: 'DropdownModule' is not exported by node_modules\ng2-bootstrap\ng2-bootstrap.js (imported by app\shared\navigation\navigation.module.js). For help fixing this error see https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module at Module.trace (C:\Projects\NeilKellyClient4\node_modules\rollup\src\Module.js:362:30) at ModuleScope.findDeclaration (C:\Projects\NeilKellyClient4\node_modules\rollup\src\ast\scopes\ModuleScope.js:47:22) at Scope.findDeclaration (C:\Projects\NeilKellyClient4\node_modules\rollup\src\ast\scopes\Scope.js:92:39) at Identifier.bind (C:\Projects\NeilKellyClient4\node_modules\rollup\src\ast\nodes\Identifier.js:7:29) at C:\Projects\NeilKellyClient4\node_modules\rollup\src\ast\Node.js:6:34 at ArrayExpression.eachChild (C:\Projects\NeilKellyClient4\node_modules\rollup\src\ast\Node.js:18:20) at ArrayExpression.bind (C:\Projects\NeilKellyClient4\node_modules\rollup\src\ast\Node.js:6:8) at C:\Projects\NeilKellyClient4\node_modules\rollup\src\ast\Node.js:6:34 at Node.eachChild (C:\Projects\NeilKellyClient4\node_modules\rollup\src\ast\Node.js:21:5) at Node.bind (C:\Projects\NeilKellyClient4\node_modules\rollup\src\ast\Node.js:6:8)

and if I git rid of DropdownModule, then same error with CollapseModule, etc

[AusIV]

@quiringk - It looks like we're troubleshooting this at almost the same time. I think I've figured it out. In my rollup-config.js, I added:

commonjs({
include: ['node_modules/rxjs/', 'node_modules/ng2-bootstrap/'],
})

without that, it seemed it wasn't finding things in the ng2-bootstrap project.

@valorkin - Thanks for the great work in this module. I think the __export(...) function in your ng2-bootstrap.js might be tripping up the rollup tool. But rather than rearranging that, you might just add a note to the docs in your angular2-quickstart project about adding the above to your rollup config.

[quiringk]

Nice good catch. Got confused because the URL the error gives you gives examples of NamedExports but you need to use a combination of "include" and "namedExports"

[AusIV]

@quiringk

I didn't seem to need the namedExports. Once I added the include, the rollup started to work. That said, I haven't thoroughly tested the build, just made sure that it generated an appropriately sized build artifact.

[SmallhillCZ]

Just to note that commonjs({include: ['node_modules/ng2-bootstrap/']}) didn't help in my case, I had to use commonjs({include: ['node_modules/ng2-bootstrap/**']}).

Might save someone few minutes...

[valorkin]

Can some one create a gist with simple how to with Rollin? So I can add it to docs?

[rochapablo]

This still happening:

"ng2-bootstrap": "^1.6.0",
"@angular/cli": "^1.0.0",

WARNING in ./src/app/app.module.ts
98:12-26 "export 'DropdownModule' was not found in 'ng2-bootstrap'

ERROR in src/app/app.module.ts (9,53): Module '"node_modules/ng2-bootstrap/index"' has no exported member 'DropdownModule'.

ERROR in Error encountered resolving symbol values statically. Calling function 'DropdownModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in src/app/app.module.ts, resolving symbol AppModule in src/app/app.module.ts

ERROR in src/app/app.module.ts (9,53): Module '"node_modules/ng2-bootstrap/index"' has no exported member 'DropdownModule'.
webpack: Failed to compile.

[markbatbean]

I'm getting similar error to @rochapablo

"@angular/cli": "^1.0.0",
"@angular/compiler-cli": "^2.3.1",
"ng2-bootstrap": "^1.2.5",

No changes were made to my code - yesterday it was working, today it isn't. I even restored from a previously functioning archive and now: npm start fails

npm start

> [email protected] start /Users/marbradley/Workspace/campus-ui
> ng serve --proxy-config api-proxy.json

** NG Live Development Server is running on http://localhost:4200 **
Hash: 086efd657bb372f7edd3
Time: 19444ms
chunk {0} main.bundle.js, main.bundle.js.map (main) 141 kB {2} [initial] [rendered]
chunk {1} styles.bundle.js, styles.bundle.js.map (styles) 317 kB {3} [initial] [rendered]
chunk {2} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.57 MB [initial] [rendered]
chunk {3} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

WARNING in ./src/app/dashboard/dashboard.module.ts 35:16-30 "export 'DropdownModule' was not found in 'ng2-bootstrap'

WARNING in ./src/app/college-summary/college-summary.module.ts 39:16-30 "export 'DropdownModule' was not found in 'ng2-bootstrap'

ERROR in campus-ui/src/app/dashboard/dashboard.module.ts (12,10): Module '"campus-ui/node_modules/ng2-bootstrap/index"' has no exported member 'DropdownModule'.

ERROR in campus-ui/src/app/college-summary/college-summary.module.ts (4,10): Module '"campus-ui/node_modules/ng2-bootstrap/index"' has no exported member 'DropdownModule'.

[rochapablo]

@markbatbean, I was wrong. As I change the version I had to follow the new method to use the dropdown.

As you can see here (http://valor-software.com/ng2-bootstrap/#/dropdowns#usage)

// RECOMMENDED (doesn't work with system.js)
import { BsDropdownModule } from 'ng2-bootstrap/dropdown';
// or
import { BsDropdownModule } from 'ng2-bootstrap';

@NgModule({
  imports: [BsDropdownModule.forRoot(),...]
})
export class AppModule(){}

[valorkin]

Yep, I am even writing change logs :(

[markbatbean]

I edited my package.json to lock it to the previous version rather than allowing for updates. That is the easiest fix for most people.

[valorkin]

Check change log please, module was renamed

[werthdavid]

Don't wanna sound snappy or so but why are there breaking changes in a minor-update anyway?

[valorkin]

My mistake, let's move on :)

[werthdavid]

sure thanks for your effort & great work :)

[Mage111]

DropdownModulerenamed to BsDropdownModule

[albertnadal]

Hi guys, take care to keep up to date your ng2-bootstrap. The new bootstrap dependecy is now called ngx-bootstrap. "npm WARN deprecated [email protected]: ng2-bootstrap was renamed to ngx-bootstrap, please update your dependencies"

[kamalakkanni]

hi ,I would have installed ngx-bootstrap.

But I am getting below error
WARNING in ./node_modules/ngx-bootstrap/dropdown/bs-dropdown.directive.js 247:16-25 "export 'Renderer2' was not found in '@angular/core'

[valorkin]

@kamalakkanni angular v2 is not supported already