如何手动将Bootstrap接入私有域下的Angular 5项目？

Got it, let's work through this since you can't use npm install for Bootstrap in your private domain environment but already have the bootstrap.css and bootstrap.js files handy. I’ve set this up for Angular 5 projects before, so these steps should work smoothly to get Bootstrap working across all existing and future components.

方案1：Angular CLI Global Configuration (Recommended) #

This is the most reliable way—set it once, and every component (new or existing) will have access to Bootstrap without extra imports.

• First, organize your files: Move bootstrap.css to src/assets/css (create the css folder inside assets if it doesn’t exist) and bootstrap.js to src/assets/js.
• Locate the angular-cli.json file in your project root (note: Angular 5 uses this filename, not the later angular.json).
• Find the styles array in the apps section, and add the path to your Bootstrap CSS:

  "styles": [
    "styles.css",
    "./assets/css/bootstrap.css"
  ]
  

• Next, find the scripts array in the same apps section. Important: Bootstrap JS depends on jQuery and Popper.js—if you have these files, add them in this exact order (jQuery first, then Popper, then Bootstrap):

  "scripts": [
    "./assets/js/jquery.min.js",
    "./assets/js/popper.min.js",
    "./assets/js/bootstrap.js"
  ]
  

• Save the file, then restart your Angular dev server (ng serve). The CLI will now include Bootstrap in the global bundle, so all components can use Bootstrap classes and JS features right away.

方案2：Global Stylesheet Import (For Styles Only) #

If you prefer not to modify the CLI config, or just need Bootstrap styles globally, you can import the CSS into your project’s main stylesheet:

• Open src/styles.css (or styles.scss if you’re using SCSS)
• Add this import line at the top:

  @import "./assets/css/bootstrap.css";
  

• Note: This only handles styles. For Bootstrap’s interactive JS components (modals, dropdowns, etc.), you’ll still need to add the JS files via the scripts array in angular-cli.json as shown in方案1.

Key Notes #

• jQuery & Popper.js Dependency: Bootstrap’s JS components won’t work without these two libraries. Make sure you have local copies of them, and always list them before Bootstrap JS in the scripts array.
• Path Accuracy: Double-check that your file paths match where you stored the Bootstrap files. For example, if you put them in src/lib/bootstrap, adjust the path to ./lib/bootstrap.css.
• Restart Dev Server: Angular CLI doesn’t automatically pick up changes to angular-cli.json, so restarting ng serve is mandatory for the changes to take effect.

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