angular內建第三方插件

Simply install your library via npm install lib-name --save and import it in your code.

If the library does not include typings, you can install them using npm:

npm install d3 --save
npm install @types/d3 --save-dev
           

If the library doesn't have typings available at @types/, you can still use it by manually adding typings for it:

1. First, create a typings.d.ts file in your src/ folder. This file will be automatically included as global type definition.
2. Then, in src/typings.d.ts, add the following code:

declare module 'typeless-package';
           

Finally, in the component or file that uses the library, add the following code:

import * as typelessPackage from 'typeless-package';
typelessPackage.method();
           

Done. Note: you might need or find useful to define more typings for the library that you're trying to use.

Global Library Installation

Some javascript libraries need to be added to the global scope, and loaded as if they were in a script tag. We can do this using the apps[0].scripts and apps[0].styles properties of angular-cli.json.

As an example, to use

Bootstrap 4

this is what you need to do:

First install Bootstrap from npm

npm install bootstrap@next
           

Then add the needed script files to apps[0].scripts:

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],
           

Finally add the Bootstrap CSS to the apps[0].styles array:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.css"
],
           

Restart ng serve if you're running it, and Bootstrap 4 should be working on your app.

更新angular-cli

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest