{
"$type": "site.standard.document",
"canonicalUrl": "https://mhartington.io/post/ionic2-external-libraries",
"path": "/post/ionic2-external-libraries",
"publishedAt": "2016-02-17T16:38:32.000Z",
"site": "at://did:plc:7kwylbxx56yro6aqz3oh5d2s/site.standard.publication/3mpgyj6haew2g",
"textContent": "Now that Ionic 2 is out in beta, people are setting aside some time to give it a shot and investigate everything it has to offer. Ionic 2 and Angular 2 bring a lot of improvements, but it's a fairly different style of developing that what people were used to before. Now, since everything needs to be imported and libraries aren’t global, it can be tricky to figure out how to integrate with other libraries.\n\nNPM all the things\n\nSo, how do you add third-party-libraries, such as Lodash? In Ionic 22, we've moved over to NPM for all our package management. So for our case, if we had a project setup, we could just install Lodash though npm's CLI.\n\nNow, this is going to give us a starter tabs project, so let’s open our page1.ts file.\n\nNow, we can import individual methods from Lodash, using the typical import method that we're seeing. Note, this would be the same import state if we were to use Javascript or Typescript.\n\nIf we were to use regular ES6, that would be the end of it. But since we're using Typescript, we'll get an error.\n\n [](/img/lodash-typescript-error.png)\n\nThis might lead you to believe that everything is broken, and Lodash is working. Your editor will also probably yell at you, too. But oddly enough, everything will still work. What gives?\n\nSo, Typescript needs to analyze the code, in order to do its type checking. Normal Javascript libraries typically don't include any definition files, which means Typescript won't be able to understand them.\n\nTo circumvent this, we can use Typings which allow us to install definition files for various libraries.\n\nTypings\n\nWe'll install Typings globally on our system.\n\nNow we have the typings command to install the necessary files. So we can install the Lodash definitions with\n\nWe should now have a typings directory looking like this\n\nLast thing we need to do, is add a reference to this main main.d.ts file.\n\nNow we could do this two ways, either adding a reference tag, which most people are probably familiar with, or we can add it to our files array in our tsconfig. We'll use this option because as our application grows, we don't have to worry about adding more reference tags all over the place.\n\nNow when we start up our server, no errors!",
"title": "Ionic 2 and External Libraries"
}