如何在Angular 4 TypeScript项目中引入并使用第三方JavaScript库

Hey there, let's get that third-party JavaScript library working in your Angular 4 project—no more frustrating "library not found" errors! I'll walk you through the process step by step, using a popular library like lodash as an example to make things tangible.

First up, get the library into your project:

• If it's available on npm, run this command in your project root:

  npm install lodash --save
  

  The --save flag adds it to your package.json dependencies so other developers can install it easily.
• If you're using a custom or non-npm library, drop the minified .js file (and any associated CSS files) into your project's assets folder (create one if it doesn't exist—usually under src/assets/js).

Angular 4 uses the angular-cli.json file (later versions switched to angular.json) to manage global assets. Open this file and update the scripts array (and styles if the library has CSS):

• For npm-installed libraries:

  "scripts": [
    "../node_modules/lodash/lodash.min.js",
    // other scripts...
  ],
  "styles": [
    // add library CSS here if needed, e.g., "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ]
  

• For custom library files in assets:

  "scripts": [
    "assets/js/your-library.min.js",
    // other scripts...
  ]
  

Important: After updating angular-cli.json, restart your ng serve dev server—changes here won't take effect until you do!

Angular uses TypeScript, which needs type definitions to recognize the library. Here's how to handle this:

• If the library has official TypeScript types (check if @types/[library-name] exists on npm), install them as dev dependencies:

  npm install @types/lodash --save-dev
  

• If no official types exist, create a typings.d.ts file in your src folder (if it doesn't already exist) and add a declaration for the library:

  declare var _: any; // Replace "_" with your library's global variable name
  

This tells TypeScript that the global variable exists, so it won't throw "cannot find name" errors.

Now you're ready to use the library in any component!

• If you installed the types, you can import the library directly:

  import { Component } from '@angular/core';
  import * as _ from 'lodash';
  
  @Component({
    selector: 'app-my-component',
    templateUrl: './my-component.component.html'
  })
  export class MyComponentComponent {
    myArray = [1, 2, 3, 4, 5, 10, 15];
  
    filterArray() {
      // Use lodash's filter method
      const filtered = _.filter(this.myArray, num => num > 5);
      console.log(filtered); // Output: [10, 15]
    }
  }
  

• If you used the declare var approach, skip the import and just use the global variable directly in your component methods:

  filterArray() {
    const filtered = _.filter(this.myArray, num => num > 5);
    console.log(filtered);
  }
  

• If the library still isn't working:
  • Double-check the path in angular-cli.json—relative paths can be tricky, make sure it points to the correct .js file.
  • Confirm you restarted ng serve after updating the config.
  • If you're using a custom library, ensure the file is actually in the assets folder and the path matches exactly.

内容的提问来源于stack exchange，提问作者Necip Sunmaz