ng2-bootstrap 依赖问题与 AOT 一起使用 - Angular 2答案

【问题标题】：ng2-bootstrap dependency issue using with AOT - Angular 2ng2-bootstrap 依赖问题与 AOT 一起使用 - Angular 2
【发布时间】：2017-05-16 15:58:59
【问题描述】：

我正在使用 Angular 2 制作一个应用程序，当我使用 Angular 2 文档https://angular.io/docs/ts/latest/cookbook/aot-compiler.html 中提到的 AOT 编译创建捆绑包时，它给出了依赖错误，这是错误

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

这是我的代码：-

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);

但是当我在没有 AOT 的情况下使用此代码时，它工作正常。请让我知道这个问题。

【问题讨论】：

您或其他人的模块执行import {ModalModule} from '.../modal.module.js'，但node_modules/ng2-bootstrap/modal/modal.module.js 不导出它。您可以检查来源。您的项目中是否有模块版本，它们应该一起工作？
我是唯一一个在做这个的人。

标签： angular twitter-bootstrap-3 dependencies

【解决方案1】：

我已经解决了这个问题。实际上你必须在 rollup-config.js 文件中添加模块。这是示例代码：-

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()
 ]
 }

【讨论】：