Question

我正在使用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）＆＃39; ModalModule＆＃39;不由'node_modules / ng2-bootstrap / modal / modal.module.js＆＃39;导出。见

这是我的代码： -

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的情况下使用此代码时，它的工作正常。请让我知道这个问题。

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

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

1 个答案: