如何在Angular组件中使用bower_components目录下的Bower包？

Hey there! Let's walk through how to properly use Bower packages in your Angular project, and fix that LESS import error you're hitting.

First: Make Sure Bower is Set Up Correctly #

Before diving into component usage, double-check your Bower setup:

• You should have a bower.json file in your project root. If not, run bower init in your terminal to generate one.
• Install packages with bower install <package-name> --save to add them to your bower.json (this ensures other developers can install the same packages later).

Step 1: Get Your Build Tool to Recognize Bower Assets #

Angular (especially if using Angular CLI) doesn't automatically pull in files from bower_components, so you need to tell your build tool where to find them.

For Angular CLI: #

Open your angular.json (or .angular-cli.json for older versions) and update these sections:

• Assets: Add paths to Bower packages you want to include as static assets (like fonts or images):

  "assets": [
    "src/favicon.ico",
    "src/assets",
    {
      "glob": "**/*",
      "input": "./bower_components/<your-package>",
      "output": "./assets/bower/<your-package>"
    }
  ]
  

• Styles: If you want to include a package's styles globally (instead of per-component), add it to the styles array:

  "styles": [
    "src/styles.less",
    "./bower_components/<your-package>/dist/styles.less"
  ]
  

• Scripts: For JavaScript libraries (like jQuery), add them here to make them globally available:

  "scripts": ["./bower_components/<your-package>/dist/<your-package>.js"]
  

For Webpack: #

Update your webpack.config.js to resolve paths to bower_components, and ensure you have loaders set up for LESS/CSS and JavaScript files. For example, add resolve.modules to include bower_components:

resolve: {
  modules: [path.resolve(__dirname, 'bower_components'), 'node_modules']
}

Step 2: Use Bower Packages in Angular Components #

JavaScript Libraries: #

• If you added the package to the scripts array in angular.json, you can use it directly in your component (just declare it with declare var <PackageName>: any; if TypeScript throws an error).
• If the package supports ES modules, import it directly in your component's .ts file:

  import * as _ from '../../bower_components/lodash/lodash.js';
  

Angular Directives/Components from Bower: #

If the package provides Angular components, you'll need to import their module into your app's NgModule (or feature module) in app.module.ts:

import { SomeBowerModule } from '../../bower_components/some-package/dist/some-module';

@NgModule({
  imports: [SomeBowerModule]
})
export class AppModule {}

Fixing Your LESS Import Error #

The error you're seeing is almost certainly a path issue when importing styles.less from bower_components into your app-header.component.less. Here's how to fix it:

1. Check the Relative Path:
   Let's say your folder structure looks like this:

   root/
     bower_components/
       your-package/
         styles.less
     src/
       app/
         app-header/
           app-header.component.less
   

   From app-header.component.less, you need to go up three levels to reach the root, then into bower_components. So your import should be:

   @import '../../../bower_components/your-package/styles.less';
   

   Adjust the number of ../ based on how deep your component folder is.

2. Use a Root Path (If Configured):
   If your build tool (like Webpack with less-loader) is set up to resolve bower_components as a root path, you can use a tilde (~) to simplify the import:

   @import '~your-package/styles.less';
   

3. Common Mistakes to Avoid:

   • Double-check for typos in the package name or file path.
   • Make sure the styles.less file actually exists in the expected location (navigate to bower_components in your file explorer to confirm).
   • If the imported LESS file has its own relative imports, those might break when imported from your component—you may need to adjust those paths or use global styles instead.

Final Troubleshooting Tip #

If you made changes to angular.json, restart your Angular dev server (ng serve)—sometimes it doesn't pick up config changes automatically.

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