ASP.NET Core + Angular模板升级Bootstrap 4启动失败求助

Hey there, I’ve dealt with this exact issue before—let’s break down why your app is stuck loading and how to fix it step by step:

Why This Happens #

Bootstrap 4 has key differences from Bootstrap 3 that your default template isn’t accounting for:

• Bootstrap 4 requires Popper.js for dropdowns, tooltips, and popovers (Bootstrap 3 didn’t need this dependency)
• Many class names and component structures changed (e.g., panel → card, btn-default → btn-secondary)
• Missing or incorrect dependencies can silently break the app’s rendering without throwing obvious errors

Step 1: Install Required Dependencies #

First, add the version of Popper.js compatible with Bootstrap 4 to your project:

npm install popper.js@^1.16.1 --save

Alternatively, you can manually add this line to your package.json before running npm install:

"popper.js": "^1.16.1"

Step 2: Update Style & Script References #

Since your template uses Angular CLI (not custom Webpack), check your configuration file (either angular.json or .angular-cli.json for older Angular versions):

• In the styles array, confirm you’re pointing to Bootstrap 4’s CSS:

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

• In the scripts array, add Popper.js before Bootstrap’s JS (Bootstrap depends on it to load correctly):

  "scripts": [
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ]
  

Step 3: Update Bootstrap 3 Class Names to Bootstrap 4 #

Your template’s components (like navbars, cards, forms) are using Bootstrap 3 classes that no longer work in v4. Here are the most common fixes to apply:

• Replace navbar-default with navbar-light bg-light or navbar-dark bg-dark
• Replace panel/panel-body with card/card-body
• Replace btn-default with btn-secondary
• Update form classes: form-control-static → form-control-plaintext, and remove form-horizontal (use grid classes instead)

Even small un-updated classes can cause DOM rendering issues that lead to infinite loading, so do a quick search for Bootstrap 3-specific classes in your Angular components.

Step 4: Clean & Rebuild the Project #

Clear cached files and rebuild to ensure all dependencies are properly loaded:

# Clear npm cache
npm cache clean --force

# Delete node_modules and lock file
rm -rf node_modules package-lock.json

# Reinstall dependencies
npm install

# Force a full build to catch hidden errors
npm run build

Step 5: Verify ASP.NET Core Static File Configuration #

Make sure your Startup.cs is correctly serving static files from node_modules. The default setup should have this, but double-check:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    // ... other middleware
    app.UseStaticFiles();
    // ...
}

Once you’ve gone through these steps, start your app again—it should load normally without the infinite loop.

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