jQueryUI with angular4

Question

Im trying to add customized jqueryUI datepicker component to angular4 project. Currently I have developed with normal jquery,html and css. I want to add that component to angular4. I have tried like in below but when running npm start it gives an error.

My jquery ui datepicker(customized to rangepicker)

This is how I import jqueryUI to angular4

 "apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  "index": "index.html",
  "main": "main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
    "styles.css",
    "../node_modules/jquery-ui/../themes/base/all.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": ["../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/jqueryui/jquery-ui.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"],
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
}

],

This is the error I get in command prompt

score 5 · Accepted Answer · 2017-08-05 04:10:50Z

5

"scripts": ["node_modules/jquery/dist/jquery.min.js","node_modules/jqueryui/jquery-ui.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"]

if not working by giving full path try this.

npm uninstall -g angular-cli @angular/cli
npm cache clean
npm install -g [email protected]

"styles": [
  "fullpath/styles.css",
  "node_modules/jquery-ui/../themes/base/all.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

edited Aug 5, 2017 at 4:10

answered Aug 4, 2017 at 11:30

user7110739

Sign up to request clarification or add additional context in comments.

2 Comments

LahiruChathuranga Over a year ago

It worked for jquiery.min.js but jquery.min.css doesnt import in same way. It gives same error. Is there any different ways to import css?

user7110739 Over a year ago

I have updated the answer and try to give full path to css.

Collectives™ on Stack Overflow

jQueryUI with angular4

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related