Angular 6 Error message

[NewToStuff]

Hi,

I had this working in a previous Angular 5 project. I am now trying to get the tool incorporated in a new Angular 6 project. (The Angular version may not be relevant)

When I try to compile I get the following error;

ERROR in node_modules/graphql-voyager/typings/graph/viewport.d.ts(5,13): error TS2503: Cannot find namespace 'SvgPanZoom'.

svg-pan-zoom is listed within the node packages.

Has anyone seen this before or got any ideas.

Many thanks,

Paul

[NewToStuff]

I thought it may be a package issue but cannot see anything wrong with it. I have copied it below in case it provides a clue.

{ "name": "----", "version": "0.0.0", "scripts": { "ng": "ng", "start": "[ -f src/aws-exports.js ] && mv src/aws-exports.js src/aws-exports.ts || ng serve; ng serve", "build": "[ -f src/aws-exports.js ] && mv src/aws-exports.js src/aws-exports.ts || ng build --prod; ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^6.1.9", "@angular/cdk": "^6.4.7", "@angular/common": "^6.1.9", "@angular/compiler": "^6.1.9", "@angular/core": "^6.1.9", "@angular/flex-layout": "^6.0.0-beta.18", "@angular/forms": "^6.1.9", "@angular/http": "^6.1.9", "@angular/material": "^6.4.7", "@angular/platform-browser": "^6.1.9", "@angular/platform-browser-dynamic": "^6.1.9", "@angular/router": "^6.1.9", "@ngrx/router-store": "^6.1.0", "@ngrx/store": "^6.1.0", "@ngrx/store-devtools": "^6.1.0", "@ngx-translate/core": "^10.0.2", "@ngx-translate/http-loader": "^3.0.1", "aws-amplify": "^1.1.5", "aws-amplify-angular": "^1.0.5", "aws-appsync": "^1.3.4", "browser-detect": "^0.2.28", "core-js": "^2.5.4", "graphql": "^14.0.2", "graphql-tag": "^2.10.0", "graphql-voyager": "^1.0.0-rc.26", "hammerjs": "^2.0.8", "ng-bootstrap": "^1.6.3", "react": "^16.5.2", "react-dom": "^16.5.2", "rxjs": "^6.3.3", "rxjs-compat": "^6.3.3", "svg-pan-zoom": "^3.5.3", "zone.js": "^0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "^0.7.5", "@angular/cli": "^6.2.4", "@angular/compiler-cli": "^6.1.9", "@angular/language-service": "^6.1.9", "@fortawesome/fontawesome-free": "^5.3.1", "@fortawesome/fontawesome-free-webfonts": "^1.0.9", "@ngrx/effects": "^6.1.0", "@ngrx/schematics": "^6.1.0", "@types/jasmine": "^2.8.9", "@types/jasminewd2": "^2.0.5", "@types/node": "^10.11.4", "codelyzer": "^4.4.4", "jasmine-core": "~3.1.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.5", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^2.0.4", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^1.3.1", "ngrx-store-freeze": "^0.2.4", "protractor": "^5.4.1", "ts-node": "^7.0.1", "tslint": "~5.11.0", "typescript": "^2.9.2" } }

[NewToStuff]

tsconfig.app.json reads as follows. I have the types": ["node"] entry. Do I need to add something else to the types entry?

Thanks - Any pointers much appreciated

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": ["node"],
    "keyofStringsOnly": true
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]

}

[NewToStuff]

Helping my own problem. It seems that if I add

import * as SvgPanZoom from '../../../svg-pan-zoom/src/svg-pan-zoom';
declare var SvgPanZoom:any;

to the file viewport.d.ts I get past the error. Not sure whether I can start the component yet but I get past the error. I know this is not the way to fix the problem but maybe it helps me (or someone) work out what may be going wrong.

Thanks

[IvanGoncharov]

@NewToStuff Sorry, don't have any expirience with Angular so can't help with this issue. That said if someone knows how to improve the experience for Angular users I'm totally open for PRs.

[beerose]

It's not an Angular problem, but TypeScript one. There's SvgPanZoom namespace required in typings, but not provided.