5 lines
9.8 KiB
JSON
5 lines
9.8 KiB
JSON
|
{
|
||
|
|
"id": "guide/using-libraries",
|
||
|
|
"title": "Using published libraries",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/using-libraries.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"using-published-libraries\">Using published libraries<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/using-libraries#using-published-libraries\"><i class=\"material-icons\">link</i></a></h1>\n<p>When building Angular applications you can take advantage of sophisticated first-party libraries, such as <a href=\"https://material.angular.io/\">Angular Material</a>, as well as rich ecosystem of third-party libraries.\nSee the <a href=\"resources\">Angular Resources</a> page for links to the most popular ones.</p>\n<h2 id=\"installing-libraries\">Installing libraries<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/using-libraries#installing-libraries\"><i class=\"material-icons\">link</i></a></h2>\n<p>Libraries are published as <a href=\"guide/npm-packages\">npm packages</a>, usually together with schematics that integrate them with the Angular CLI.\nTo integrate reusable library code into an application, you need to install the package and import the provided functionality where you will use it. For most published Angular libraries, you can use the Angular CLI <code>ng add <lib_name></code> command.</p>\n<p>The <code>ng add</code> command uses a package manager such as <a href=\"https://www.npmjs.com/\">npm</a> or <a href=\"https://yarnpkg.com/\">yarn</a> to install the library package, and invokes schematics that are included in the package to other scaffolding within the project code, such as adding import statements, fonts, themes, and so on.</p>\n<p>A published library typically provides a README or other documentation on how to add that lib to your app.\nFor an example, see <a href=\"https://material.angular.io/\">Angular Material</a> docs.</p>\n<h3 id=\"library-typings\">Library typings<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/using-libraries#library-typings\"><i class=\"material-icons\">link</i></a></h3>\n<p>Library packages often include typings in <code>.d.ts</code> files; see examples in <code>node_modules/@angular/material</code>. If your library's package does not include typings and your IDE complains, you may need to install the library's associated <code>@types/<lib_name></code> package.</p>\n<p>For example, suppose you have a library named <code>d3</code>:</p>\n<code-example language=\"bash\">\nnpm install d3 --save\nnpm install @types/d3 --save-dev\n</code-example>\n<p>Types defined in a <code>@types/</code> package for a library installed into the workspace are automatically added to the TypeScript configuration for the project that uses that library.\nTypeScript looks for types in the <code>node_modules/@types</code> folder by default, so you don't have to add each type package individually.</p>\n<p>If a library doesn't have typings available at <code>@types/</code>, you can still use it by manually adding typings for it.\nTo do this:</p>\n<ol>\n<li>\n<p>Create a <code>typings.d.ts</code> file in your <code>src/</code> folder. This file is automatically included as global type definition.</p>\n</li>\n<li>\n<p>Add the following code in <code>src/typings.d.ts</code>:</p>\n</li>\n</ol>\n<code-example>\ndeclare module 'host' {\n export interface <a href=\"api/core/Host\" class=\"code-anchor\">Host</a> {\n protocol?: string;\n hostname?: string;\n pathname?: string;\n }\n export function parse(url: string, queryString?: string): <a href=\"api/core/Host\" class=\"code-anchor\">Host</a>;\n}\n</code-example>\n<ol start=\"3\">\n<li>In the component or file that uses the library, add the following code:</li>\n</ol>\n<code-example>\nimport * as host from 'host';\nconst parsedUrl = host.parse('http
|
||
|
|
}
|