I would like to know how to use kendo-ui-angular2 in SmartAdmin

Question

I purchased SmartAdmin and KendoUI Angular.

smartAdmin buy site > https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0

---

1) SmartAdmin has been installed using "npm install".

---

2) npm start

---

3) I watched KendoUI GetStarted and followed it.

"npm install --save @ progress / kendo-angular-buttons @ progress / kendo-angular-l10n @ angular / animations"

You have successfully installed "Kendo Button" using the above command.

---

4) npm start

---

*) package.json

    {
      "name": "smartadmin",
      "version": "0.4.4",
      "license": "MIT",
      "angular-cli": {},
      "scripts": {
        "build:dev": "./node_modules/.bin/ng build",
        "build:prod": "./node_modules/.bin/ng build --prod --aot=false",
        "build": "npm run build:dev",
        "clean:dist": "npm run rimraf -- dist",
        "clean:install": "npm set progress=false && npm install",
        "clean:start": "npm start",
        "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist",
        "e2e:live": "npm run e2e -- --elementExplorer",
        "e2e": "npm run protractor",
        "lint": "npm run tslint \"src/**/*.ts\"",
        "postversion": "git push && git push --tags",
        "prebuild:dev": "npm run clean:dist",
        "prebuild:prod": "npm run clean:dist",
        "preclean:install": "npm run clean",
        "preclean:start": "npm run clean",
        "preversion": "npm test",
        "protractor": "protractor",
        "rimraf": "rimraf",
        "server:dev": "./node_modules/.bin/ng serve",
        "server": "npm run server:dev",
        "start": "npm run server:dev",
        "test": "./node_modules/.bin/ng test",
        "tslint": "tslint",
        "typedoc": "typedoc",
        "version": "npm run build",
        "ng": "ng",
        "pree2e": "webdriver-manager update --standalone false --gecko false"
      },
      "private": true,
      "dependencies": {
        "@angular-redux/store": "6.1.0",
        "@angular/animations": "^4.0.1",
        "@angular/common": "4.0.1",
        "@angular/compiler": "4.0.1",
        "@angular/core": "4.0.1",
        "@angular/forms": "4.0.1",
        "@angular/http": "4.0.1",
        "@angular/platform-browser": "4.0.1",
        "@angular/platform-browser-dynamic": "4.0.1",
        "@angular/router": "4.0.1",
        "@progress/kendo-angular-buttons": "^1.0.5",
        "@progress/kendo-angular-l10n": "^1.0.2",
        "X-editable": "github:vitalets/x-editable",
        "bootstrap": "3.3.7",
        "bootstrap-colorpicker": "2.5.1",
        "bootstrap-duallistbox": "3.0.6",
        "bootstrap-markdown": "2.10.0",
        "bootstrap-progressbar": "0.9.0",
        "bootstrap-slider": "9.7.2",
        "bootstrap-tagsinput": "0.7.1",
        "bootstrap-timepicker": "0.5.2",
        "chart.js": "2.5.0",
        "classlist.js": "^1.1.20150312",
        "clockpicker": "0.0.7",
        "clone": "2.1.1",
        "core-js": "2.4.1",
        "debounce": "1.0.0",
        "dropzone": "4.3.0",
        "dygraphs": "1.1.1",
        "fuelux": "3.15.12",
        "he": "1.1.1",
        "highcharts": "5.0.10",
        "ion-rangeslider": "2.1.7",
        "jquery": "2.1.4",
        "jquery-color": "1.0.0",
        "jquery-jcrop": "0.9.13",
        "jquery-knob": "1.2.11",
        "jquery-ui-npm": "1.12.0",
        "jquery-validation": "1.16.0",
        "jquery.maskedinput": "1.4.1",
        "markdown": "0.5.0",
        "morris.js": "0.5.0",
        "ngx-bootstrap": "1.6.6",
        "ngx-popover": "0.0.16",
        "nouislider": "9.2.0",
        "raphael": "2.2.7",
        "redux": "3.6.0",
        "rxjs": "5.3.0",
        "scriptjs": "2.5.8",
        "select2": "4.0.3",
        "smartadmin-plugins": "1.0.17",
        "summernote": "0.8.3",
        "to-markdown": "3.0.4",
        "ts-helpers": "1.1.2",
        "web-animations-js": "2.2.2",
        "zone.js": "0.8.5"
      },
      "devDependencies": {
        "@angular/cli": "1.0.0",
        "@angular/compiler-cli": "4.0.1",
        "@types/jasmine": "2.5.47",
        "@types/jquery": "2.0.41",
        "@types/node": "7.0.12",
        "codelyzer": "2.1.1",
        "jasmine-core": "2.5.2",
        "jasmine-spec-reporter": "3.2.0",
        "karma": "1.6.0",
        "karma-chrome-launcher": "2.0.0",
        "karma-cli": "1.0.1",
        "karma-jasmine": "1.1.0",
        "karma-jasmine-html-reporter": "0.2.2",
        "karma-coverage-istanbul-reporter": "1.0.0",
        "protractor": "5.1.1",
        "ts-node": "3.0.2",
        "tslint": "5.0.0",
        "typescript": "2.2.2",
        "css-loader": "0.28.0",
        "exports-loader": "0.6.4",
        "expose-loader": "0.7.3",
        "file-loader": "0.11.1",
        "imports-loader": "0.7.1",
        "karma-remap-istanbul": "0.6.0",
        "raw-loader": "0.5.1",
        "script-loader": "0.7.0",
        "style-loader": "0.16.1",
        "url-loader": "0.5.8"
      },
      "repository": {
        "type": "git",
        "url": "https://bitbucket.org/grigson/smartadmin-angular-2"
      },
      "bugs": {
        "url": "https://bitbucket.org/grigson/smartadmin-angular-2/issues"
      },
      "engines": {
        "node": ">= 4.2.1",
        "npm": ">= 3"
      }
    }

---

Completes the installation of kendo npm from the outside. There was no error when copying & pasting the nodeModule.

Even "npm start" works well.

I do not know why.

I am looking for a solution to this error for about 6 to 7 days. But I could not solve it.

:( Please help me... T^ T

---

ps. I do not speak English well. So I got help from Google translator.

Please understand that English expressions are inevitable.

Answer 1

You can try updating the packages as defined in your packages.json to more up-to-date versions. Run npm outdated to see which are outdated. However, I don't understand we you want to use jQuery with Angular. Angular manages the DOM and its quite counterproductive to modify it with jQuery.