Is this compatible with Angular 4?

I tried using this module inside jhipster generated Angular4 FE app and I get this error when trying to import and use it in one component:

Uncaught Error: Unexpected value 'TimeDurationPickerModule' imported by the module 'JoggingTimeTrackerJoggingDataModule'. Please add a @NgModule annotation.
    at syntaxError (webpack-internal:///./node_modules/@angular/compiler/@angular/compiler.es5.js:1917)
    at eval (webpack-internal:///./node_modules/@angular/compiler/@angular/compiler.es5.js:15601)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (webpack-internal:///./node_modules/@angular/compiler/@angular/compiler.es5.js:15584)
    at CompileMetadataResolver.getNgModuleSummary (webpack-internal:///./node_modules/@angular/compiler/@angular/compiler.es5.js:15526)
    at eval (webpack-internal:///./node_modules/@angular/compiler/@angular/compiler.es5.js:15599)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (webpack-internal:///./node_modules/@angular/compiler/@angular/compiler.es5.js:15584)
    at CompileMetadataResolver.getNgModuleSummary (webpack-internal:///./node_modules/@angular/compiler/@angular/compiler.es5.js:15526)
    at eval (webpack-internal:///./node_modules/@angular/compiler/@angular/compiler.es5.js:15599)

I'm using import statement like this in src/main/webapp/app/entities/jogging-data/jogging-data.module.ts: import { TimeDurationPickerModule } from 'angular2-time-duration-picker'; Can you please provide some assistance?

Here is package.json from the root of the project.

{
  "name": "jogging-time-tracker",
  "version": "0.0.0",
  "description": "Description for JoggingTimeTracker",
  "private": true,
  "license": "UNLICENSED",
  "cacheDirectories": [
    "node_modules"
  ],
  "dependencies": {
    "@angular/common": "4.2.5",
    "@angular/compiler": "4.2.5",
    "@angular/core": "4.2.5",
    "@angular/forms": "4.2.5",
    "@angular/http": "4.2.5",
    "@angular/platform-browser": "4.2.5",
    "@angular/platform-browser-dynamic": "4.2.5",
    "@angular/router": "4.2.5",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.27",
    "angular2-time-duration-picker": "^1.1.0",
    "bootstrap": "4.0.0-alpha.6",
    "core-js": "2.4.1",
    "font-awesome": "4.7.0",
    "jquery": "3.2.1",
    "ng-jhipster": "0.2.6",
    "ng2-webstorage": "1.8.0",
    "ngx-cookie": "1.0.0",
    "ngx-infinite-scroll": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.2",
    "sockjs-client": "1.1.4",
    "swagger-ui": "2.2.10",
    "tether": "1.4.0",
    "webstomp-client": "1.0.6",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "1.2.0",
    "@angular/compiler-cli": "4.2.5",
    "@types/jasmine": "2.5.53",
    "@types/node": "8.0.8",
    "angular2-template-loader": "0.6.2",
    "awesome-typescript-loader": "3.2.1",
    "browser-sync": "2.18.12",
    "browser-sync-webpack-plugin": "1.2.0",
    "codelyzer": "3.1.2",
    "copy-webpack-plugin": "4.0.1",
    "css-loader": "0.28.4",
    "exports-loader": "0.6.4",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "generator-jhipster": "4.6.1",
    "html-loader": "0.4.5",
    "html-webpack-plugin": "2.29.0",
    "jasmine-core": "2.6.4",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage": "1.1.1",
    "karma-intl-shim": "1.0.3",
    "karma-jasmine": "1.1.0",
    "karma-junit-reporter": "1.2.0",
    "karma-notify-reporter": "1.0.1",
    "karma-phantomjs-launcher": "1.0.4",
    "karma-remap-istanbul": "0.6.0",
    "karma-sourcemap-loader": "0.3.7",
    "karma-webpack": "2.0.3",
    "merge-jsons-webpack-plugin": "1.0.8",
    "ngc-webpack": "3.0.0",
    "phantomjs-prebuilt": "2.1.14",
    "proxy-middleware": "0.15.0",
    "rimraf": "2.6.1",
    "sourcemap-istanbul-instrumenter-loader": "0.2.0",
    "string-replace-webpack-plugin": "0.1.3",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "tslint": "5.5.0",
    "tslint-loader": "3.5.3",
    "typescript": "2.3.4",
    "web-app-manifest-loader": "0.1.1",
    "webpack": "3.1.0",
    "webpack-dev-server": "2.5.1",
    "webpack-merge": "4.1.0",
    "webpack-notifier": "1.5.0",
    "webpack-visualizer-plugin": "0.1.11",
    "write-file-webpack-plugin": "4.1.0"
  },
  "engines": {
    "node": ">=6.9.0"
  },
  "scripts": {
    "lint": "tslint 'src/main/webapp/app/**/*.ts' 'src/test/javascript/**/*.ts'",
    "lint:fix": "tslint 'src/main/webapp/app/**/*.ts' 'src/test/javascript/**/*.ts' --fix",
    "ngc": "ngc -p tsconfig-aot.json",
    "cleanup": "rimraf build/{aot,www}",
    "start": "yarn run webpack:dev",
    "webpack:dev": "yarn run webpack-dev-server -- --config webpack/webpack.dev.js --progress --inline --hot --profile --port=9060",
    "webpack:build:main": "yarn run webpack -- --config webpack/webpack.dev.js --progress --profile",
    "webpack:build": "yarn run cleanup && yarn run webpack:build:main",
    "webpack:prod:main": "yarn run webpack -- --config webpack/webpack.prod.js --progress --profile",
    "webpack:prod": "yarn run cleanup && yarn run webpack:prod:main",
    "webpack:test": "yarn run test",
    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js",
    "test": "karma start src/test/javascript/karma.conf.js",
    "test:watch": "karma start src/test/javascript/karma.conf.js --watch",
    "postinstall": "node node_modules/phantomjs-prebuilt/install.js"
  }
}

Just to mention that I managed to get your module to load after I deleted the node_modules from /node_modules/angular2-time-duration-picker folder and rerunning the frontend proxy. Also I copy pasted your example and when I click + and - icons I get values in the handler method but the input boxes don't get automatically updated. Should I do that manually in the handler or did I misconfigure something?

MHzarini / ngx-time-duration-picker

Is this compatible with Angular 4? #1