search

crisbeto / angular-svg-round-progressbar

Angular module that uses SVG to create a circular progressbar
https://crisbeto.github.io/angular-svg-round-progressbar/
MIT License
742 stars 173 forks source link

Update to Angular 4 #118

Closed hartherbert closed 7 years ago

hartherbert commented 7 years ago

Hey, It looks like when you update to angular 4 the round-progressbar-code don't match.

I work with Ionic and when i only ionic build or ionic run everything works fine, but when I run ionic run android --prod the cli throws an exception:

Error: Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in C:/Development/AlphaProject/node_modules/angular-svg-round-progressbar/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in C:/Development/AlphaProject/node_modules/angular-svg-round-progressbar/node_modules/@angular/core/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in C:/Development/AlphaProject/node_modules/angular-svg-round-progressbar/node_modules/@angular/core/src/di/opaque_token.d.ts Error: Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in C:/Development/AlphaProject/node_modules/angular-svg-round-progressbar/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in C:/Development/AlphaProject/node_modules/angular-svg-round-progressbar/node_modules/@angular/core/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in C:/Development/AlphaProject/node_modules/angular-svg-round-progressbar/node_modules/@angular/core/src/di/opaque_token.d.ts

maybe you have to update this project or some of you can tell me how to get this to work.

Thanks

crisbeto commented 7 years ago

I'm not quite sure that this project is the issue. I tried it out against Angular 4 before doing the last release and it seemed to work fine. I opted for staying with the ^2.0.0 requirement since it doesn't use any of the new Angular 4 APIs.

That being said, the stack trace seems to be pointing towards the OpaqueToken which isn't used by the library at all, although it does inject the DOCUMENT token.

hartherbert commented 7 years ago

And what should we do now? Because I can't build a production version of my app while this error is happening.

papaiatis commented 7 years ago

+1, having the same issue with Angular 4 !

hartherbert commented 7 years ago

maybe this can help you @crisbeto

they talk about this problem there. It seems to happen to a lot of people

crisbeto commented 7 years ago

My guess that it might be using the Angular 4 compiler, because of your app's dependencies, while still using the Angular 2 files from the progress bar. I wasn't able to reproduce it locally with Angular 4 and running AoT, but if the issue is what I described above, bumping the module to ^4.0.0 would fix it. I don't want to do a release just for testing, but you can try downloading this zip file, extracting it in your repo and running npm install angular-svg-round-progressbar-1.0.8.tgz. The only difference is that I've bumped the requirement to Angular 4.

hartherbert commented 7 years ago

I'm sorry but where exacly do I need to change it to ^4.0.0 ? (Which file?)

crisbeto commented 7 years ago

I've changed it already, you just need to extract it and do the npm install.

papaiatis commented 7 years ago

@HartHerbert package.json, that's where your dependencies are listed.

crisbeto commented 7 years ago

Oh sorry, I forgot to attach the file. Here we go: test.zip

hartherbert commented 7 years ago

I updated the package.json like you said and ran npm install and I still get the same error.

ERROR-Message

[18:30:16] ionic-app-script task: "build" [18:30:16] Error: Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in C:/Development/AlphaProject/node_modules/angular-svg-round-progressbar/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in C:/Development/AlphaProject/node_modules/angular-svg-round-progressbar/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in C:/Development/AlphaProject/node_modules/angular-svg-round-progressbar/node_modules/@angular/core/core.d.ts Error: Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in C:/Development/AlphaProject/node_modules/angular-svg-round-progressbar/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in C:/Development/AlphaProject/node_modules/angular-svg-round-progressbar/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in C:/Development/AlphaProject/node_modules/angular-svg-round-progressbar/node_modules/@angular/core/core.d.ts at Error (native) at syntaxError (C:\Development\AlphaProject\node_modules\@angular\compiler\bundles\compiler.umd.js:1513:34) at simplifyInContext (C:\Development\AlphaProject\node_modules\@angular\compiler\bundles\compiler.umd.js:23316:23) at StaticReflector.simplify (C:\Development\AlphaProject\node_modules\@angular\compiler\bundles\compiler.umd.js:23328:13) at StaticReflector.annotations (C:\Development\AlphaProject\node_modules\@angular\compiler\bundles\compiler.umd.js:22794:60) at NgModuleResolver.resolve (C:\Development\AlphaProject\node_modules\@angular\compiler\bundles\compiler.umd.js:13352:70) at CompileMetadataResolver.getNgModuleMetadata (C:\Development\AlphaProject\node_modules\@angular\compiler\bundles\compiler.umd.js:13937:60) at addNgModule (C:\Development\AlphaProject\node_modules\@angular\compiler\bundles\compiler.umd.js:22526:58) at C:\Development\AlphaProject\node_modules\@angular\compiler\bundles\compiler.umd.js:22537:14 at Array.forEach (native)

package.json

{
  "_args": [
    [
      {
        "raw": "angular-svg-round-progressbar",
        "scope": null,
        "escapedName": "angular-svg-round-progressbar",
        "name": "angular-svg-round-progressbar",
        "rawSpec": "",
        "spec": "latest",
        "type": "tag"
      },
      "C:\\Development\\Pookypet"
    ]
  ],
  "_from": "angular-svg-round-progressbar@latest",
  "_id": "angular-svg-round-progressbar@1.0.7",
  "_inCache": true,
  "_location": "/angular-svg-round-progressbar",
  "_nodeVersion": "6.9.4",
  "_npmOperationalInternal": {
    "host": "packages-18-east.internal.npmjs.com",
    "tmp": "tmp/angular-svg-round-progressbar-1.0.7.tgz_1490697546024_0.15477636246941984"
  },
  "_npmUser": {
    "name": "crisbeto",
    "email": "crisbeto@abv.bg"
  },
  "_npmVersion": "3.10.10",
  "_phantomChildren": {},
  "_requested": {
    "raw": "angular-svg-round-progressbar",
    "scope": null,
    "escapedName": "angular-svg-round-progressbar",
    "name": "angular-svg-round-progressbar",
    "rawSpec": "",
    "spec": "latest",
    "type": "tag"
  },
  "_requiredBy": [
    "#USER",
    "/"
  ],
  "_resolved": "https://registry.npmjs.org/angular-svg-round-progressbar/-/angular-svg-round-progressbar-1.0.7.tgz",
  "_shasum": "1583180be4b6d80e794111eedd9f9f5946131e3f",
  "_shrinkwrap": null,
  "_spec": "angular-svg-round-progressbar",
  "_where": "C:\\Development\\Pookypet",
  "author": {
    "name": "crisbeto"
  },
  "bugs": {
    "url": "https://github.com/crisbeto/angular-svg-round-progressbar/issues"
  },
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.1",
    "zone.js": "^0.8.4"
  },
  "description": "Angular module that uses SVG to create a circular progressbar",
  "devDependencies": {
    "@angular/compiler-cli": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-gh-pages": "^0.5.4",
    "gulp-server-livereload": "^1.8.2",
    "merge2": "^1.0.2",
    "resolve-bin": "^0.4.0",
    "run-sequence": "^1.2.2",
    "systemjs": "0.19.38",
    "tslint": "^3.13.0",
    "typescript": "~2.2.0"
  },
  "directories": {},
  "dist": {
    "shasum": "1583180be4b6d80e794111eedd9f9f5946131e3f",
    "tarball": "https://registry.npmjs.org/angular-svg-round-progressbar/-/angular-svg-round-progressbar-1.0.7.tgz"
  },
  "files": [
    "dist/**/*"
  ],
  "gitHead": "bfdd59d293a8cf6de183801f807d6c37594b942c",
  "homepage": "https://github.com/crisbeto/angular-svg-round-progressbar",
  "keywords": [
    "angular",
    "progress",
    "circle",
    "round",
    "svg"
  ],
  "license": "MIT",
  "main": "dist/index.js",
  "maintainers": [
    {
      "name": "crisbeto",
      "email": "crisbeto@abv.bg"
    }
  ],
  "name": "angular-svg-round-progressbar",
  "optionalDependencies": {},
  "readme": "ERROR: No README data found!",
  "repository": {
    "type": "git",
    "url": "git://github.com/crisbeto/angular-svg-round-progressbar.git"
  },
  "scripts": {},
  "types": "dist/index.d.ts",
  "version": "1.0.7"
}

I really don't get what should be wrong here.

crisbeto commented 7 years ago

Yeah, I'm not sure either. Is your project available somewhere publicly where I can take a look?

hartherbert commented 7 years ago

no I'm sorry I can't show you.. But it looks like it's working now. suddenly ?..

Well I will close this issue now and just reopen it when it's not working again. Thanks for your help

crisbeto commented 7 years ago

Could you try to clear your node_modules and reinstall? I suspect that you might have installed the one from the zip file, which ended up fixing it, however the next time you install from NPM, it would break again.

hartherbert commented 7 years ago

Yes the .zip file you gave me fixed it. if I clear node_modules it breaks again

crisbeto commented 7 years ago

Good to know. In that case I'll bump the minimum version to 4.0.

crisbeto commented 7 years ago

Released as 1.1.0.

alex88 commented 7 years ago

@crisbeto same error here using angular 4, using 1.1.0 and just tried to clear node_modules

ERROR in Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /Users/alex/Projects/frontend/node_modules/angular-svg-round-progressbar/node_modules/@angular/core/core.d.ts,

maybe the issue is not using a function like a lot of libraries do (forRoot)?

Also your angular dependencies should be peerDependencies

alex88 commented 7 years ago

Check my fork https://github.com/alex88/angular-svg-round-progressbar it works fine with angular 4 without any issues

It just shows these 2 warnings

WARNING in ./node_modules/angular-svg-round-progressbar/node_modules/@angular/platform-browser/@angular/platform-browser.es5.js
1750:69-86 "export 'ɵparseCookieValue' was not found in '@angular/common'

WARNING in ./node_modules/angular-svg-round-progressbar/node_modules/@angular/platform-browser/@angular/platform-browser.es5.js
1805:17-25 "export 'DOCUMENT' was not found in '@angular/common'
crisbeto commented 7 years ago

@alex88 your forRoot isn't really doing a whole lot. The way some modules used to do it was in order to make providers available globally, but there are other ways now and they aren't necessary for this module.

alex88 commented 7 years ago

Alright, no problem, in my case it fixed the errors though (either that or the peerDependencies)

ozelen commented 7 years ago

Experienced this with Yarn. Problem was resolved by switching back to NPM

alex88 commented 7 years ago

Yeah this happens only with yarns, seems the way it installs the package, yarn install + yarn/npm run start throws error, npm install + yarn/npm run start works

munga92 commented 7 years ago

any updates on this issue?

crisbeto commented 7 years ago

Version 1.1.0 bumps the required Angular version to 4 and has been out since April.