ng2-bootstrap dependency issue using with AOT - Angular 2

Question

I am making an app with Angular 2 and when I creating a bundle with AOT compilation as mentioned in Angular 2 documentation https://angular.io/docs/ts/latest/cookbook/aot-compiler.html, its giving depenency error and here is the error

See https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module aot/app/app.module.ngfactory.js (700:23) 'ModalModule' is not exported by 'node_modules/ng2-bootstrap/modal/modal.module.js'. See

And here is my code:-

main.ts

import { platformBrowser }    from '@angular/platform-browser';
import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

index.html

<html>
<head>
<title>Jobkeeper</title>
<!-- <base href="/"> -->
<meta charset="UTF-8">
<link rel="stylesheet" href="app/style.css" />
<link rel="stylesheet" href="app/forms.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="app/assets/frontend/custom/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="app/assets/frontend/custom/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> -->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script data-turbolinks-track="true" src="app/assets/frontend/custom/js/bootstrap.min.js"></script>


<!-- 1. Load libraries -->
<!-- Polyfill for older browsers -->

<!-- 2. Configure SystemJS -->
<script>window.module = 'aot';</script>
<script src="systemjs.config.js"></script> 
 <script>
    System.import('app').catch(function(err){ console.error(err); });
</script> 
</head>
<!-- 3. Display the application -->
<body>

<my-app></my-app>

</body>
<!--<script src="dist/build.js"></script>-->
</html>

systemjs.config.js

 (function (global) {
  System.config({
   paths: {
   // paths serve as alias
  'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  app: 'app',

   'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js'
},
packages: {
  app: {
    main: './main.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  },
  'angular2-datatable': {
      main: 'index.js',
      defaultExtension: 'js'
   }
 }
});
})(this);

But when I use this code without AOT, it's working fine. Please let me know the issue.

Your or somebody else's module performs import {ModalModule} from '.../modal.module.js', but node_modules/ng2-bootstrap/modal/modal.module.js doesn't export it. You can check the sources. Do you have module versions in your project, which are supposed to work together? — Ferdinand Prantl

Nectar Mind Nectar Mind · Accepted Answer · 2017-01-04T08:42:00

I have resolved this issue. Actually you have to add the modules in rollup-config.js file. Here is example code:-

import rollup      from 'rollup'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs    from 'rollup-plugin-commonjs';
import uglify      from 'rollup-plugin-uglify'

export default {
  entry: 'app/main.js',
  dest: 'dist/build.js', // output a single application bundle
  sourceMap: false,
  format: 'iife',
  plugins: [
  nodeResolve({jsnext: true, module: true}),
  commonjs({
    include: ['node_modules/rxjs/**','node_modules/angular2-   datatable/**','node_modules/lodash/**','node_modules/angular2-infinite-scroll/**'],
  }),
  uglify()
 ]
 }

ng2-bootstrap dependency issue using with AOT - Angular 2

1 Answers