search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

DayPilot in AngularJS with webpack

Asked by Pierre
3 years ago.

Hi,
I have issues trying to import daypilot in my AngularJS (1.6) project with webpack. The file daypilot-all.min.js does not export anything. I have tried to use exports-loader and imports-loader with some success as I managed to require() the DayPilot object, but then how to register daypilot as an angular module?

Here is a code extract:

import angular from 'angular'
const DayPilot = require('exports-loader?DayPilot!imports-loader?angular!./modules/daypilot-all.min.js')
angular.module("myApp", [ DayPilot.am ])

/* triggers errors */
Uncaught Error: [ng:areq] Argument 'fn' is not a function, got Object
http://errors.angularjs.org/1.6.4/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20Object
at eval (eval at <anonymous> (app.bundle.js:2348), <anonymous>:66:12)
at assertArg (eval at <anonymous> (app.bundle.js:2348), <anonymous>:2048:11)
at assertArgFn (eval at <anonymous> (app.bundle.js:2348), <anonymous>:2058:3)
at Function.annotate [as $$annotate] (eval at <anonymous> (app.bundle.js:2348), <anonymous>:4226:5)
at injectionArgs (eval at <anonymous> (app.bundle.js:2348), <anonymous>:4960:36)
at Object.invoke (eval at <anonymous> (app.bundle.js:2348), <anonymous>:4995:18)
at eval (eval at <anonymous> (app.bundle.js:2348), <anonymous>:4805:62)
at forEach (eval at <anonymous> (app.bundle.js:2348), <anonymous>:403:20)
at createInjector (eval at <anonymous> (app.bundle.js:2348), <anonymous>:4805:3)
at doBootstrap (eval at <anonymous> (app.bundle.js:2348), <anonymous>:1914:20)

Answer posted by Pierre
3 years ago.

After a night sleeping on the issue, found the solution.
DayPilot registers the module in angular using angular.module("daypilot",[]) so in order to register one needs to use the 'daypilot' module name as a string. In addition, to be able to use the DayPilot object in the controllers, I ended up storing the DayPilot object as an Angular constant.

Here is the implemented solution:

/* app.js */
const DayPilot = require('exports-loader?DayPilot!imports-loader?angular!./modules/daypilot-all.min.js')
import ScheduleCtrl from './schedule/schedule.controller'

angular.module('myApp', [
...,
'daypilot',
])
.constant('DayPilot', DayPilot)
.controller('ScheduleCtrl', ScheduleCtrl)

/* schedule.controller.js */
export default class ScheduleCtrl {

constructor (DayPilot) {
this.config = {
scale: "Day",
days: 14,
startDate: "2017-06-24",
timeHeaders: [
{ groupBy: "Month" },
{ groupBy: "Day", format: "d" }
],
resources: [
{ name: "Room B", id: "B" },
{ name: "Room C", id: "C" },
{ name: "Room D", id: "D" },
{ name: "Room E", id: "E" }
]
}
this.events = [
{
start: new DayPilot.Date("2017-06-24T00:00:00"),
end: new DayPilot.Date("2017-06-26T00:00:00"),
id: DayPilot.guid(),
resource: "B",
text: "One-Day Event"
}
]
}
}

Comment posted by Dan Letecky [DayPilot]
3 years ago.

Pierre,

Thanks for posting the solution!

You might be also able to use DayPilot.am - just note that it's a function so in order to get the module object you need to execute it:

var module = DayPilot.am();
This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.