如何解决“模块未定义”错误？

Question

I am trying to use KendoUI datetimepicker in my angular(1.x) project. When I directly reference the KendoUI js file in my index.html page, it works fine. But when i try to add a reference to it via gulp, it keeps on throwing the following error:

Uncaught ReferenceError: module is not defined at kendo.ui.core.js:1

In my package.json, I have

"kendo-ui-core": "2017.2.621"

And this is what i have in my gulp file:

/// <reference path="node_modules/moment/moment.js" />
/// <reference path="node_modules/moment/src/moment.js" />
/// <binding BeforeBuild='clean' AfterBuild='build' Clean='clean' />
var gulp = require("gulp"),
    rimraf = require("rimraf"),
    less = require('gulp-less'),
    cssmin = require('gulp-cssmin'),
    concat = require("gulp-concat-sourcemap"),
    rename = require('gulp-rename'),
    jshint = require('gulp-jshint'),
    ignore = require('gulp-ignore'),
    cacheBuster = require('gulp-cache-bust'),
    templateCache = require('gulp-angular-templatecache');

var paths = {
    webroot: "./build/",
    approot: "./app/"
};

paths.fonts = "./fonts/**/*";
paths.less = "./less/**/*.less";
paths.images = "./images/**/*";
paths.js = paths.approot + "**/*.js";
paths.specs = paths.approot + "**/*.spec.js";
paths.views = paths.approot + "**/*.html";

gulp.task("clean", function (cb) {
    rimraf(paths.webroot, cb);
});

gulp.task('jshint', function () {
    return gulp.src(paths.js)
        .pipe(ignore.exclude('*.spec.js'))
        .pipe(jshint('jshint.config.json'))
        .pipe(jshint.reporter('gulp-jshint-file-reporter', {
            filename: __dirname + '/jshint-output.log'
        }));
       //.pipe(jshint.reporter("fail")); // Throw error and fail build
});

gulp.task("build:js",  function () {
    return gulp.src([
        paths.approot + "**/*.module.js",
        paths.approot + "**/*.config.js",
        paths.js,
        "!" + paths.specs
    ])
    .pipe(concat('app.js', { sourcesContent: true }))
    .pipe(gulp.dest(paths.webroot + "app/"));
});

gulp.task("build:views", function () {
    return gulp.src([paths.views])
        .pipe(templateCache({ root: "app", module: "goalEnvision" }))
        .pipe(gulp.dest(paths.webroot + "app/"));
});

gulp.task("build:fonts", function () {
    return gulp.src([
        paths.fonts,
        'node_modules/bootstrap/dist/fonts/*',
        'node_modules/bootstrap-less/fonts/*'
    ])
        .pipe(gulp.dest(paths.webroot + "fonts/"));
});

gulp.task("build:less", function () {
    return gulp.src(["./less/**/app.less"])      //compile app + theme less files
        .pipe(less({
            paths: [
                '.',
                'node_modules/angucomplete-alt/angucomplete-alt.css'

                //'./node_modules/bootstrap-less',                
            ]
        }))
        .pipe(gulp.dest(paths.webroot + "css/"));
});

gulp.task("build:images", function () {
    return gulp.src([paths.images])
        .pipe(gulp.dest(paths.webroot + "images/"));
});

gulp.task("build:index.html", function () {
    return gulp.src("index.html")
        .pipe(gulp.dest(paths.webroot));
});

gulp.task("build:favicon.ico", function () {
    return gulp.src("favicon.ico")
        .pipe(gulp.dest(paths.webroot));
});

gulp.task("build:cache-bust", ["build:index.html", "build:js", "build:less", "build:libs.js", "build:libs.css"], function () {
    return gulp.src(paths.webroot + "index.html")
        .pipe(cacheBuster())
        .pipe(gulp.dest(paths.webroot));
});

gulp.task('build:libs.js', function () {
    gulp.src([
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/angular/angular.min.js',
        'node_modules/angular-dynamic-locale/dist/tmhDynamicLocale.min.js',
        'node_modules/angular-xeditable/dist/js/xeditable.min.js',
        'node_modules/angular-file-upload/dist/angular-file-upload.min.js',
        'node_modules/angular-loading-bar/build/loading-bar.min.js',
        'node_modules/ng-img-crop/compile/minified/ng-img-crop.js',
        'node_modules/angular-ui-router/release/angular-ui-router.min.js',
        'node_modules/angular-local-storage/dist/angular-local-storage.min.js',
        'node_modules/highcharts/highcharts.js',
        'node_modules/highcharts-ng/dist/highcharts-ng.min.js',
        'node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js',
        'node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js',
        'node_modules/angular-translate/dist/angular-translate.min.js',
        'node_modules/angular-animate/angular-animate.min.js',
        'node_modules/angular-toastr/dist/angular-toastr.min.js',
        'node_modules/angular-toastr/dist/angular-toastr.tpls.min.js',
        'node_modules/jquery-ui-dist/jquery-ui.min.js',
        'node_modules/angular-ui-sortable/dist/sortable.min.js',
        'node_modules/angular-touch/angular-touch.js',
        'node_modules/sweetalert/dist/sweetalert.min.js',
        'node_modules/angular-sweetalert/SweetAlert.min.js',
        'node_modules/moment/min/moment.min.js',
        'node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.js',
        'node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js',
        'node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js',
        //inkluderas i common/components/guide behövde ändra i källkoden för att disabla automatisk scrolling
        //'node_modules/angular-tour/dist/angular-tour-tpls.js',
        'node_modules/angular-moment/angular-moment.min.js',
        'node_modules/angular-sanitize/angular-sanitize.js',
        'node_modules/angular-bootstrap-confirm/dist/angular-bootstrap-confirm.js',
        'node_modules/angular-hotkeys/build/hotkeys.min.js',
        'node_modules/angucomplete-alt/dist/angucomplete-alt.min.js',
        'node_modules/angular-sticky-plugin/dist/angular-sticky.min.js',

        'node_modules/kendo-ui-core/js/kendo.ui.core.js',

        //Tried with different permutation/combination of these files as well
        //'node_modules/kendo-ui-core/js/kendo.core.js',
        //'node_modules/kendo-ui-core/js/kendo.popup.js',
        //'node_modules/kendo-ui-core/js/kendo.calendar.js',
        //'node_modules/kendo-ui-core/js/kendo.datepicker.js',
        //'node_modules/kendo-ui-core/js/kendo.timepicker.js',
        //'node_modules/kendo-ui-core/js/kendo.datetimepicker.js',
        //'node_modules/kendo-ui-core/js/kendo.angular.js',

    ])
    .pipe(concat('libs.js', { sourcesContent: true }))
    .pipe(gulp.dest(paths.webroot + "/libs"));

});

gulp.task('build:libs.css', function () {
    gulp.src([
        'node_modules/angular-toastr/dist/angular-toastr.css',
        'node_modules/sweetalert/dist/sweetalert.css',
        'node_modules/angular-bootstrap-datetimepicker/src/css/datetimepicker.css',
        'node_modules/angular-xeditable/dist/css/xeditable.css',
        'node_modules/ng-img-crop/compile/minified/ng-img-crop.css',
        'node_modules/angular-loading-bar/build/loading-bar.css',
        'node_modules/bootstrap-toggle/css/bootstrap-toggle.css',
        'node_modules/angular-tour/dist/angular-tour.css'

    ])
    .pipe(concat('libs.css', { sourcesContent: true }))
    .pipe(gulp.dest(paths.webroot + "/libs"));
});

gulp.task("build:webconfig", function () {
    return gulp.src("Web.config")
        .pipe(gulp.dest(paths.webroot));
});

gulp.task("build", ["jshint", "build:js", "build:less", "build:fonts", "build:images", "build:libs.js", "build:libs.css", "build:views", "build:index.html", "build:favicon.ico", "build:cache-bust", "build:webconfig"]);

gulp.task('watchAndBuild', function () {
    gulp.watch(paths.js, ['build']);
    gulp.watch(paths.views, ['build']);
});

The exact line where it throws error relates to

I think I am not including the kendoui files in the correct manner. What changes do I need to get it working?

Answer 1

The only way I was able to solve this error was by including a direct reference to the kendo ui js file in the index.html. Hope it will help others.