Hey there! Let's tackle your problems step by step. First off, yes, repeating the ng add @ng-bootstrap/schematics command absolutely can cause issues—here's why and how to fix them:

Why the Problems Happen #

The ng add command automates adding dependencies and modifying your project config files (like angular.json and app.module.ts). Running it multiple times will duplicate entries in these files (like the Bootstrap CSS path you saw in the Webpack error) and can lead to inconsistent module setup, which triggers the "Cannot find module" error.

Step 1: Fix the Duplicate Styles Entry in Webpack Config #

The Webpack error is caused by two identical Bootstrap CSS paths in your angular.json file. Here's how to clean it up:

• Open your project's angular.json file
• Navigate to projects -> [Your Project Name] -> architect -> build -> options -> styles
• Look for duplicate entries of E:\AngularProject\DreamsApp\node_modules\bootstrap\dist\css\bootstrap.css—delete one so only a single entry remains
• Do the same check for projects -> [Your Project Name] -> architect -> test -> options -> styles (if there's a duplicate here, remove it too)

Step 2: Resolve the "Cannot Find Module '@ng-bootstrap/ng-bootstrap'" Error #

This usually means the package wasn't properly installed, or your config has a mismatch:

1. Verify Dependencies in package.json
   Open your package.json and check if @ng-bootstrap/ng-bootstrap and bootstrap are listed under dependencies. If not, install them manually (note: Angular 9 requires @ng-bootstrap/ng-bootstrap v6.x for compatibility):

   npm install @ng-bootstrap/ng-bootstrap@6 bootstrap
   

2. Fix Module Import in app.module.ts
   Double-check your app.module.ts to ensure you're importing the correct module (not the schematics package):

   import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
   
   @NgModule({
     declarations: [/* Your components */],
     imports: [
       // Other modules like BrowserModule, AppRoutingModule...
       NgbModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

3. Clear Cache and Reinstall Dependencies
   If the package is in package.json but you still get the error, clear your dependencies and Angular cache:
   • Delete the node_modules folder and package-lock.json file
   • Run npm install to reinstall all dependencies
   • Run ng clean to clear Angular's build cache

Step 3: Verify the Fix #

Once you've made these changes, try starting your Angular server again:

ng serve

If everything works, your project should compile without errors, and the Bootstrap styles should load correctly.

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