Can't Import into Angular 5/Ionic 4

bkarv commented 6 years ago

Use case:

First of all many thanks for your efforts in making this plugin.

I am trying to use this plugin in my Angular5/Ionic4. I've installed the plugin via npm: npm install dom-to-image --save

I've imported plugin into my component:

import domtoimage from 'dom-to-image';

The issue is the app can't locate/recognise the dom-to-image. In visual studio is shows up in a popup on the link as module '*', meaning it can't locate the plugin in node_modules. I've used and imported other third party plugins including lodash without any issues. My app's package.json is below, does anyone know what might be the issue? Eg I noticed there is a .ts file in the package.

Expected behavior

Import dom-to-image

Actual behavior (stack traces, console logs etc)

App does not recognise dom-to-image

Library version

dom-to-image @2.6.0

{
  "name": "ourmgmt2-mobile",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "node --max-old-space-size=12288 ./node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "^5.2.10",
    "@angular/compiler": "^5.2.10",
    "@angular/compiler-cli": "^5.2.10",
    "@angular/core": "^5.2.10",
    "@angular/forms": "^5.2.10",
    "@angular/http": "^5.2.10",
    "@angular/platform-browser": "^5.2.10",
    "@angular/platform-browser-dynamic": "^5.2.10",
    "@angular/tsc-wrapped": "^4.4.7",
    "@auth0/angular-jwt": "^1.1.0",
    "@ionic-native/camera": "4.7.0",
    "@ionic-native/core": "4.7.0",
    "@ionic-native/file": "4.7.0",
    "@ionic-native/file-transfer": "4.7.0",
    "@ionic-native/in-app-browser": "4.7.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic/storage": "2.1.3",
    "@types/file-saver": "0.0.1",
    "@types/lodash": "^4.14.108",
    "angular2-jwt": "^0.2.3",
    "angular2-uuid": "^1.1.1",
    "aws-sdk": "^2.229.1",
    "blueimp-canvas-to-blob": "^3.14.0",
    "cordova-android": "^6.1.2",
    "cordova-ios": "~4.3.1",
    "cordova-plugin-add-swift-support": "^1.7.2",
    "cordova-plugin-camera": "^2.4.1",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-console": "1.0.5",
    "cordova-plugin-device": "1.1.4",
    "cordova-plugin-file": "^5.0.0",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-inappbrowser": "^2.0.2",
    "cordova-plugin-ionic": "^2.0.4",
    "cordova-plugin-splashscreen": "~4.0.1",
    "cordova-plugin-statusbar": "2.2.1",
    "cordova-plugin-whitelist": "1.3.1",
    "cordova-sqlite-storage": "~2.0.3",
    "dom-to-image": "^2.6.0",
    "expr-eval": "^1.2.1",
    "file-saver": "^1.3.8",
    "ionic-angular": "^3.9.2",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionicons": "3.0.0",
    "lodash": "^4.17.10",
    "moment": "^2.22.1",
    "ng-elastic": "^1.0.0-beta.5",
    "ng2-img-max": "^2.1.15",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "uuid": "^3.2.1",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.9",
    "@types/node": "^8.10.10",
    "typescript": "^2.8.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "platforms": [
      "android",
      "ios"
    ],
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "cordova-sqlite-storage": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-ionic": {
        "APP_ID": "bba80768",
        "CHANNEL_NAME": "Ch: Ourmgmt Staging",
        "UPDATE_METHOD": "background",
        "UPDATE_API": "https://api.ionicjs.com",
        "MAX_STORE": "2"
      },
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-camera": {
        "CAMERA_USAGE_DESCRIPTION": " ",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": " "
      },
      "cordova-plugin-inappbrowser": {}
    }
  }
}

Warriormuffin commented 6 years ago

If you want to import this into an Angular 5 project you need to do

import * as domtoimage from 'dom-to-image';

This is the case with any package that doesn't have a proper ngModule to export.

RichardZandi commented 6 years ago

import * as domtoimage from 'dom-to-image';

This worked for me in Angular 5. However, it doesn't work in Angular 6?

Thanks,

tsayen / dom-to-image