search

shipshapecode / angular-shepherd

An Angular wrapper for the site tour library Shepherd
MIT License
219 stars 44 forks source link

export 'defineInjectable' was not found in '@angular/core #4

Closed sanatani9 closed 5 years ago

sanatani9 commented 5 years ago

I am trying to installing this plugin in angular 4 (on local machine) and i am getting this warning

WARNING in ./node_modules/angular-shepherd/fesm5/angular-shepherd.js 394:57-73 "export 'defineInjectable' was not found in '@angular/core' at HarmonyImportSpecifierDependency._getErrors (E:\www\nginx\html\frontend-v2\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:65:15) at HarmonyImportSpecifierDependency.getWarnings (E:\www\nginx\html\frontend-v2\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:39:15) at Compilation.reportDependencyErrorsAndWarnings (E:\www\nginx\html\frontend-v2\node_modules\webpack\lib\Compilation.js:694:24) at Compilation.finish (E:\www\nginx\html\frontend-v2\node_modules\webpack\lib\Compilation.js:552:9) at applyPluginsParallel.err (E:\www\nginx\html\frontend-v2\node_modules\webpack\lib\Compiler.js:512:17) at E:\www\nginx\html\frontend-v2\node_modules\tapable\lib\Tapable.js:289:11 at E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\index.js:60:9 at tryCatcher (E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\node_modules\bluebird\js\release\util.js:16:23) at Promise._settlePromiseFromHandler (E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\node_modules\bluebird\js\release\promise.js:512:31) at Promise._settlePromise (E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\node_modules\bluebird\js\release\promise.js:569:18) at Promise._settlePromise0 (E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\node_modules\bluebird\js\release\promise.js:614:10) at Promise._settlePromises (E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\node_modules\bluebird\js\release\promise.js:693:18) at Async._drainQueue (E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\node_modules\bluebird\js\release\async.js:133:16) at Async._drainQueues (E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\node_modules\bluebird\js\release\async.js:143:10) at Immediate.Async.drainQueues (E:\www\nginx\html\frontend-v2\node_modules\html-webpack-plugin\node_modules\bluebird\js\release\async.js:17:14) at runCallback (timers.js:672:20) at tryOnImmediate (timers.js:645:5) at processImmediate [as _immediateCallback] (timers.js:617:5)

this is my packet.json

{ "name": "material-angularcli", "version": "0.0.0", "description": "Bootstrap 4 Admin Template", "author": "Nirav joshi / Wrappixel", "url": "https://wrappixel.com", "copyright": "Copyright 2017 wrappixel.com", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^4.0.0", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.25", "@types/jquery": "^3.3.0", "angular-froala-wysiwyg": "^2.7.5", "angular-inline-editors": "^1.0.2", "angular-shepherd": "0.0.2", "angular2-highcharts": "^0.5.5", "angular2-lightbox": "^1.3.0", "angular2-signaturepad": "^2.8.0", "angular4-social-login": "^1.1.1", "angularx-social-login": "^1.1.1", "core-js": "^2.4.1", "countup.js-angular2": "^1.1.1", "froiden-angular2-select": "^1.0.16", "jquery": "^3.3.1", "lightbox2": "^2.9.0", "md5-typescript": "^1.0.5", "moment": "^2.24.0", "mydatepicker": "^2.6.2", "mydaterangepicker": "^4.2.1", "ng-recaptcha": "^3.0.5", "ng2-ckeditor": "^1.1.9", "ng2-dnd": "^4.2.0", "ng2-select": "^2.0.0", "ng2-toasty": "^4.0.3", "ngx-chips": "^1.5.9", "ngx-credit-cards": "^1.0.9", "ngx-dropzone-wrapper": "^4.9.0", "npm": "^3.10.10", "rxjs": "^5.5.2", "sweetalert2": "^7.12.12", "zone.js": "^0.8.16" }, "devDependencies": { "@angular/cli": "^1.5.2", "@angular/compiler-cli": "^4.0.0", "@angular/language-service": "^4.0.0", "@types/bootstrap": "^4.0.0", "@types/jasmine": "2.5.45", "@types/node": "^9.4.6", "codelyzer": "~3.0.1", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~3.0.4", "tslint": "~5.3.2", "typescript": "^2.6.1" } }

Can you help me to solve this issue?

RobbieTheWagner commented 5 years ago

I am not sure if it will work with Angular 4 or not. It is written for Angular 7. Do you know the compatibility of the versions?

RobbieTheWagner commented 5 years ago

@tomvangreen it seems like you know more about Angular than me, would this be compatible with Angular 4?

tomvangreen commented 5 years ago

@rwwagner90 Your project does not use anything special that should not work in 4.0 itself, but a library built with angular 7 is not compatible with angular 4.

After searching a bit I found this issue: https://github.com/angular/angular/issues/19607

@0Archish0 : I would try to fork this project and rework it so it is based on angular 4 and than build it yourself. I think there should not be much in the way of doing that. I think there is no way to use it as is in angular 4.

tomvangreen commented 5 years ago

Hmm, after thinking about this, the easiest way to use angular-shepherd with angular 4 is probably if you install the shepherd npm dependency and copy the files from the lib folder into your project: https://github.com/shipshapecode/angular-shepherd/tree/master/projects/shepherd/src/lib

RobbieTheWagner commented 5 years ago

@tomvangreen so as a general rule, angular libraries only work for the specific angular version they were built with? I was hoping they worked at least a version or two back, but good to know. We should talk about angular version compatibility in the README.

tomvangreen commented 5 years ago

@tomvangreen I never built an angular library myself, so I'm not really sure about this. If I'm not mistaken libraries should be forward compatible as long as you don't use any features that have been changed. When we updated an application from angular 6 to 7, we could still use the libraries built for angular 6 (while getting some errors that the peer dependency to angular was wrong). But I suspect this could lead to unexpected behavior.

Maybe it would make sense to create a tag or branch when a new angular version is released, so you can keep compatibility with older angular version.

It would definitely make sense to mention this in the readme, but my knowledge is a bit limited ;)

RobbieTheWagner commented 5 years ago

Closing this as wontfix for now. My angular knowledge is limited, and this will only work for Angular 7+. If anyone wants to help write wrappers for other Angular versions, I would be glad to help out!