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

Angular 2 Troubleshooting

Asked by Aaron
3 years ago.

This is the error I have been getting. I will try to create a sample project later today.

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

Thanks for the details.

It looks like it might have something to do with the main DayPilot js (daypilot-angular.min.js) not being included in main.bundle.js. In that case "DayPilot" object which holds the whole DayPilot namespace would be "undefined", indeed.

I have tried different things to break the sample project from https://code.daypilot.org/50247/using-scheduler-with-angular-2-cli but I'm not able to reproduce the problem. If you were able to create a sample project that can reproduce the issue that would definitely help.

Comment posted by Aaron
3 years ago.

Just curious have you tried just doing an ng serve? That is where I am seeing the error.

I can do a build and send you the main.bundle.js if it would help.

Answer posted by Aaron
3 years ago.

Ok well my fault so here was the issue:

I add that line I mentioned to the angular-cli.json

Which is what I have done for every other 3rd party control in this project. I took that line out to stay in line with your example and it worked. So my error trying to add this in before you had all the directions laid out. But it is interesting that your distribution was different.

I will move on with the testing later today and let you know.

Thanks for the help.

Comment posted by Aaron
3 years ago.

Another note: This approached worked with the 2380 version, but not after that.

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

Great, thanks for the update.

The system.js module loader used in the original tutorial (https://code.daypilot.org/67423/angular-2-scheduler-tutorial-typescript) requires something similar - you have to add a reference to daypilot-angular.min.js manually to systemjs.config.js otherwise the daypilot js file doesn't get loaded.

Webpack used in projects created by Angular CLI seems to be somewhat smarter and loads the library automatically - it looks like it uses information from daypilot-pro-angular/package.json where it is specified:

{
  "name": "daypilot-pro-angular",
  "version": "8.2.2386",
  "description": "DayPilot Pro for JavaScript (Angular 2)",
  "main": "daypilot-angular.min.js",
  "typings": "daypilot-angular.min.d.ts",
  "module": "daypilot-angular.min.js",
  "private": true,
  "files": [
    "daypilot-angular.min.d.ts",
    "daypilot-angular.min.js"
  ],
  "peerDependencies": {
    "@angular/core": "^2.0.0",
    "@angular/platform-browser": "^2.0.0"
  },
  "peerDependencies": {
    "@angular/core": "^2.0.0",
    "@angular/platform-browser": "^2.0.0"
  },
  "author": "Annpoint, s.r.o.",
  "license": "SEE LICENSE IN LicenseAgreement.pdf"
}

I have to admit that some Angular 2 aspects still involve a great deal of black magic for me so there might be some hidden quirks. So if there is any problem just let me know!

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.