Question

当我为我的角度4应用程序执行AOT时，我遇到了一个问题，我正在引用ap-angular2-fullcalendar。

这是我在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';
import includePaths from 'rollup-plugin-includepaths';

let includePathOptions = {
    include: { 'core-module/core.module' : 'core-module/core.module.js' },
    extensions: ['.js', '.json', '.html']
};
//paths are relative to the execution path
export default {
input: 'app/main-aot.js',
output : {
    file: 'aot/dist/build.js', // output a single application bundle
    format: 'iife'
},
sourcemap: true,
sourcemapFile: 'aot/dist/build.js.map',
plugins: [
    includePaths(includePathOptions),
    nodeResolve({jsnext: true, module: true}),
commonjs({
    include: [
        'core-module/**',
        'app/**',
        'node_modules/rxjs/**',
        'node_modules/angular2-logger/**',
        'node_modules/ng2-bs3-modal/**',
        'node_modules/ng2-cookies/**',
        'node_modules/ng2-toastr/**',
        'node_modules/ng2-translate/**',
        'node_modules/ng2-select/**',
        'node_modules/jquery/**',
        'node_modules/moment/**',
        'node_modules/fullcalendar/**',
        'node_modules/ap-angular2-fullcalendar/**'
    ],
    namedExports: {
        'node_modules/angular2-logger/core.js': [ 'Logger', 'Options', 'Level' ],            
        'node_modules/ng2-bs3-modal/ng2-bs3-modal.js' : [ 'ModalComponent' ],
        'node_modules/ng2-cookies/ng2-cookies.js': [ 'Cookie' ],
        'node_modules/ng2-select/index.js': ['SelectModule', 'SelectComponent']
    }
}),
uglify()
]
}

**

然后在index.html中我已经包含了

<link rel="stylesheet" href="node_modules/fullcalendar/dist/fullcalendar.min.css"/>

<script src="/assets/References/jquery-3.2.1.min.js"></script>
<script src="/assets/References/jquery-2.2.0.min.js"></script>
<script src="node_modules/moment/min/moment.min.js"></script>
<script src="node_modules/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="/aot/shim.min.js?v=2.1.4"></script>
<script src="/aot/zone.min.js?v=0.7.4"></script>
<script>window.module = 'aot';</script>
<script src="/aot/dist/build.js?v=2017.11.14"></script>

然而，当我浏览我的网站时，我在fullcaledar.js中遇到错误。

未捕获的typeerror ::“无法添加属性fullCalendar，对象不可扩展”

在开发过程中，它正常工作，因为我使用的是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',


            'jquery': 'node_modules/jquery/dist/jquery.min.js',
            'bootstrap': 'node_modules/bootstrap/dist/js/bootstrap.min.js',
            'moment': 'node_modules/moment',
            'fullcalendar': 'node_modules/fullcalendar/dist/fullcalendar.js',
            'ap-angular2-fullcalendar': 'node_modules/ap-angular2-fullcalendar'            
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            "app": {
                main: './main.js',
                defaultExtension: 'js'
            },           
            'fullcalendar': {
                defaultExtension: 'js'
            },
            'ap-angular2-fullcalendar': {
                main: 'index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

知道怎么解决这个问题吗？我打算购买完整日历的许可证，但目前这是一种拦截器。

Answer 1

我可以看到fullcalendar.js是一个jquery库。我从谷歌搜索得到的是同伴依赖问题。避免在同一页面上使用多个版本的jquery。（index.html）

ap-angular2-fullcalendar AOT问题

1 个答案: