Feature/angular update to v13

[tszewcow]

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...) The PR introduces the update of the core angular dependencies in the library repo from angular v8.x.x to angular v.13.x.x. The reason of this change is that with the previous setup the lib is built with so-called legacy "view engine" compiler. When this is the case and someone wants to use the lib in the angular app starting from v16, the code won't compile as the view-engine compiler is not longer shipped with the angular v16 (and newer versions). The lib has to be published as an Ivy distribution.

If you install the lib (current version 4.0.2) in e.g. angular v15 app and you trigger the ng --serve command you will get the following compilation warning: "Encourage the library authors to publish an Ivy distribution" Doing the same in angular v16 will end up with compilation error and the app won't start with the angular-bootstrap-datetimepicker lib installed as a dependency.

What is the current behavior? (You can also link to an open issue here) The library is not installable in the projects built on top of Angular 16 and newer. Issue: https://github.com/dalelotts/angular-bootstrap-datetimepicker/issues/486

What is the new behavior (if this is a feature change)? The app works as before and it is additionally installable in the newest angular apps (tested on angular projects where base app uses ng v15 and ng v17). Here the example of the pure ng-17 app with the date-time picker:

Does this PR introduce a breaking change? Yes, the lib core deps were bumped and I recommend to install the lib in the angular apps starting from v13 and newer. I strongly recommend to publish the new version of the lib with the 13.0.0 version to match the used angular core deps.

Please check if the PR fulfills these requirements

• [ ] This PR is against the develop branch. (Please do not submit PR's to the master branch) - @dalelotts - you don't have develop branch in your repo, therefore I am unable to set the PR towards develop. I've analyzed that usually the PRs were merged directly into master, so I am doing the same now.
• [x] The commit message follows our guidelines: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit-message-format
• [x] Tests for the changes have been added (for bug fixes / features) - the existing tests were adjusted in order to get rid of deprecated instructions
• [x] Docs have been added / updated (for bug fixes / features)

Other information:

• I had to drop the outdated tslint tooling in favor of new eslint
• I had to drop deprecated protractor tests as it reached its end of life on August 2023 and it's no longer maintained.
• I had to bump the minimal node version from 12 to 14, which is actually a good thing to do: https://angular.io/guide/versions, https://nodejs.org/en/about/previous-releases. 14.21.3 is also dead but definitely newer than the last 12.x.x release.

Next recommended steps / recommendations for feature releases:

• add the e2e tests with built on top of some supported e2e framework (cypress / playwright)
• get rid of the moment.js library
• adjust the repo structure and pack the lib into the [root]/projects/angular-bootstrap-datetimepicker. The example app utilizing the lib in the same repo should be packed into e.g. [root]/projects/angular-bootstrap-datetimepicker-app (see how the newest version of angular-cli creates the structure of monorepo.
• further angular version updates (until 17) -> I am not doing this now, because jump from 8 to 13 was already quite expensive.

[dalelotts]

Thank you for your contribution!!

Do the protractor tests no long run / work or is the deletion of those tests only because the project is past end-of-life?

[tszewcow]

Well... it's both. I struggled for hours to get them up to even start. The problem is that the webdriver-manager downloads the latest available chromium which is the version === 114 (https://github.com/bonigarcia/webdrivermanager/blob/master/src/main/resources/versions.properties) and my local chrome is already on v120. If there is a version mismatch the tests won't run at all. I've hacked it so I was able to start the tests but they couldn't locate the change year|month|day|hour button of the datepicker (although it is there). I tried to start the tests in debug mode - unfortunately without a success, so I decided to get rid of them. If you think I should bring them back but remove them from "test" script then I will do it.

[dalelotts]

That's very helpful, thank you!

I'd prefer to have running tests for the functionality, but if they don't work something has to be done.

Do you have a sense of the effort to port the tests to something else that is still supported?

[tszewcow]

Yeah, i recommend to switch to cypress e2e framework. It’s quite simple to write end to end tests in it. Even the newest angular cli lists it as one of the options when calling ng e2e and there is schematics for it. I would open an additional issue for the case if this is not a problem. I don’t thing it will cost much to port your protractor tests to some other framework, there are not a lot of them. I guess it would be achievable in 1-2md

[dalelotts]

I understand. I'm just pulling this down locally for review. I have a few things to think about before merging - nothing about your changes, at first glance everything looks good - I'll let you know if I have any more questions.

[dalelotts]

Oh, I assume you are using this for a project, can you tell me a bit about your requirements? (I assume Cypress for e2e)

Angular version, node version, anything else I should know?

[tszewcow]

I was using cypress in my previous project which was built on top of react, we run the e2e test suite against the deployed app so the underlying technology didn't matter. Actually, I would say cypress is kind of "framework-agnostic" - you can test with it wathever web app you want so there are no specific angular version requirements to make it work. Though, you can integrate it with your angular tooling. Please see https://docs.cypress.io/guides/component-testing/angular/overview As far as I can see the tests in the examples are not ran via angular cli, but via this npm script: https://github.com/cypress-io/cypress-component-testing-apps/blob/a4f620d9b69d9165c9ce7a6bc8a5eb21729bf50b/angular-standalone/package.json#L10 I assume that the script is triggering the angular dev server with your app in dev mode and starts the e2e test run against this server.

[dalelotts]

Sorry, I think you misunderstood my question. I am wondering if you are using this component in a project and if so, what version of Angular, node, etc are you using.

I am asking because I am reluctant to release a new version of this component that is not fully tested - it would likely be easier for me to take your changes, upgrade to Angular 17 and use cypress for the e2e tests - that seems easier and faster than trying to get a bunch of unsupported packages to work well. Does that makes sense?

[tszewcow]

Ah, yes, sorry for misunderstanding. I am currently using the component in a project where we have angular v15.2.10. I am planning migration to Angular v16, that's why I need a Ivy distribution of it. Also I am about to install the component in another project based on Angular v17.0.8. In both projects I am working on node 18.18.2 Hydrogen LTS version.

Yes -> it makes sense to bump the angular version in this repo to angular 17 and use cypress as a replacement for the protractor when it's about e2e testing. Sorry for not doing this myself but this would be much more time consuming than bumping the ng version to v13. This pull request is kinda a "minimal" solution to make the component work in projects with angular v16/17 where there is no more legacy view-engine compiler.

[dalelotts]

I really appreciate all of your work on this! That's why I don't want to do anything that will mess up your project plans.

If I update to Angular 17, will that work for you? Or should I stop at 16?

[tszewcow]

No worries, thank you for maintaining this repo and trying to keep it up with the newest technologies.

It’s fully ok to use the newest angular (17). If the lib is built on top of it, I will still be able to install and use this component in angular 15/16/17 based projects.

Thx again!

[tszewcow]

Hey @dalelotts - FYI - I decided to port your protractor e2e tests to the cypress specs. Today I am planning to push two commits:

• one with the dependencies update -> I noticed that the @angular-devkit/build-ng-packagr is no longer needed. What is more -> its peer deps are not compatible with the angular v13 deps and the npm shipped with the node v16 and newer won't allow to install the package json dependencies when there are peer deps conflicts (as long you make them compatible or install the deps with --force flag or you specify overrides property). The commit will solve this problem. I can confirm that I also could install the dependencies and run the project on node 18.18.2.
• second one with the cypress tests. I looked at your protractor tests again and I am currently migrating them to the cypress specs. They should be ready today EoD.

You can then decide what to do:

• either merge my MR and release the new package (assuming you're ok with all my changes)
• or take my changes, go up with angular version to 17 and then release the new package.

[tszewcow]

@dalelotts - it's done. I've ported your protractor tests into the cypress test-suite. You can run them via:

• the npm run e2e script to start the headless run in the electron -> I have included this script into the npm test script to ensure everything works correctly (lint / karma tests with coverage / build / e2e run including dev build with serve and lib build)
• the npm run e2e:debug script to start the cypress tools and run the tests in the headful browser of your choice. This option offers powerful debugging possibilities, including time travelling within test-spec instructions.

[dalelotts]

Sorry for the delay, I'll get to this ASAP.

[dalelotts]

I went ahead and merged without much review since overall it looked good and it will be a major version update, but not v13 since this project follows semver.org

[tszewcow]

Thanks! I guess you can now close this issue: https://github.com/dalelotts/angular-bootstrap-datetimepicker/issues/486

I will now patiently wait for the new package release here: https://www.npmjs.com/package/angular-bootstrap-datetimepicker Thx again.

[dalelotts]

it should have published automatically, but for some reason Travis-ci is no longer building this repo. I'll have to sort that out, hopefully this weekend.

[dalelotts]

Quick update on publishing - travis was setup to automatically release a new version to npm when certain changes happen via semantic-release - of course it stopped working at some point but I didn't notice because I didn't make any changes. The release analysis works just fine locally but not on travis. Still looking into it as time allows.

[gmiller-in-situ]

Thank you so much for your work on this! We're working on updating to Angular 16 and I've just copied this library in as a local nx lib for now. I'm looking forward to the package being released on NPM!

[dalelotts]

Thank you for the reminder - I will have time next week to fix the semantic release - my apologies to @tszewcow, et al, for the delay

[dalelotts]

Update: I decided to change from TravisCI to github actions and update to the latest semantic-release version - this meant removing karma totally - so I started the migrate-to-jest branch - there are a few tests that are failing due "Expected to be running in 'ProxyZone', but it was not found."

npm run test:ci is the target script that is failing - is anyone familiar with this failure and how to fix it?

[vatsalkgor]

Hi @dalelotts appreciate the work on this PR. Is there any chance you've made progress on releasing this update? Thanks.

[dalelotts]

I have not looked at it in some time, I am working on anther project that I hope to release in the next week.

I will release as soon as the CI tests are passing - I would appreciate any help in getting the tests to pass.