title: Typescript - how to correctly use jsPDF in Angular2?
body: <p>I have created an Angular2 application that generates JSON data. I want to save this JSON output into a file, preferably a PDF file. This application is written using Typescript.</p>
  
  <p>I have used jsPDF for writing the JSON data into a PDF file. I have installed jsPDF package via npm using <code>npm install jspdf --save</code>. I have also added necessary links in index.html page. I made these changes to my application when it was running. I was able to save the JSON data to the file.</p>
  
  <p>When I stopped and restarted the application, it did not start as expected. I got the following error:</p>
  
  <blockquote>
    <p>json-excel@1.0.0 start C:\Users*****\Documents\Projects\Angular\json-to-pdf</p>
    
    <p>tsc &amp;&amp; concurrently "npm run tsc:w" "npm run lite"</p>
    
    <p>app/components/app.component.ts(35,19): error TS2304: Cannot find name 'jsPDF'.</p>
  </blockquote>
  
  <p>I'm  adding the code that I have used. </p>
  
  <p>package.json:</p>
  
  <pre><code>"dependencies": {
       "@angular/common": "2.0.0-rc.1",
       "@angular/compiler": "2.0.0-rc.1",
       "@angular/core": "2.0.0-rc.1",
       "@angular/http": "2.0.0-rc.1",
       "@angular/platform-browser": "2.0.0-rc.1",
       "@angular/platform-browser-dynamic": "2.0.0-rc.1",
       "@angular/router": "2.0.0-rc.1",
       "@angular/router-deprecated": "2.0.0-rc.1",
       "@angular/upgrade": "2.0.0-rc.1",
       "angular2-in-memory-web-api": "0.0.7",
       "bootstrap": "^3.3.6",
       "es6-shim": "^0.35.0",
       "jquery": "^2.2.4",
       "jspdf": "^1.2.61",
       "reflect-metadata": "^0.1.3",
       "rxjs": "5.0.0-beta.6",
       "systemjs": "0.19.27",
       "zone.js": "^0.6.12"
  }
  </code></pre>
  
  <p>index.html:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;JSON to PDF&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      ....
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"&gt;&lt;/script&gt;
  
      ....
  
    &lt;/head&gt;
  
    &lt;!-- 3. Display the application --&gt;
    &lt;body class="bg"&gt;
      &lt;div&gt;
        &lt;app&gt;Loading...&lt;/app&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.component.ts:</p>
  
  <pre><code> import {Component} from '@angular/core';
   @Component({
     selector: 'app',
     template: `&lt;button (click)="createFile()"&gt;Export JSON to PDF&lt;/button&gt;`
   })
   export class AppComponent {
       public item = {
          "Name" : "XYZ",
           "Age" : "22",
           "Gender" : "Male"
       }
       constructor() {}
       createFile(){
          var doc = new jsPDF();
          var i=0;
          for(var key in this.item){
             doc.text(20, 10 + i, key + ": " + this.item[key]);
             i+=10;
          }
          doc.save('Test.pdf');
      }
   }
  </code></pre>
  
  <p>I think some import statement is missing in the app.component.ts file. Can someone point to the correct import statement if that is what is missing? If that is the error that I have made, can I know how to correctly us jsPDF in Angular2?</p>
  
  <p>Thank you.</p>