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

How do I import `RoundProgressConfig` angular2/ionic2 #109

Closed mixersoft closed 7 years ago

mixersoft commented 7 years ago

This is what I have, and it seems to work at runtime, but I always get a typescript error

/// <reference path="../../node_modules/angular-svg-round-progressbar/dist/round-progress.d.ts" />

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { RoundProgressModule, RoundProgressConfig } from 'angular-svg-round-progressbar';

import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html',
  providers: [RoundProgressConfig]
})
export class MyApp {
  rootPage = TabsPage;

  constructor(
    platform: Platform
    , private _roundProgressConfig: RoundProgressConfig
  ) {
    _roundProgressConfig.setDefaults({
      rounded: true,
      responsive: true
    })
  }
}
crisbeto commented 7 years ago

Can you post the error that you're getting?

mixersoft commented 7 years ago

at runtime it seems to work. I'm just getting a typescript compiler error: [ts] Cannot find name 'RoundProgressConfig' in the constructor param. I am using the following tsconfig.json which comes from the standard ionic2 project skeleton.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "types": [
      "jasmine"
    ]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

/// <reference path=" doesn't seem to fix it. jasmine has a definition file in ./node_modules/@types/jasmine/index.d.ts

crisbeto commented 7 years ago

My guess is that the path isn't being resolved properly at runtime. Can you check your Dev tools' "Network" tab if the request 404s?

mixersoft commented 7 years ago

nevermind. I think it's a typescript error based on the project config. when I use ChromeDevTools to inspect,RoundProgressConfig is properly injected. I asked the question here:

https://forum.ionicframework.com/t/having-problems-with-typescript-import-from-an-npm-module/79259

crisbeto commented 7 years ago

Alright, I'll close the issue in that case. Thanks for following up.