In my experience, I have found success utilizing the following method with NPM:

1. To begin, visit Bootstrap 4 and copy the npm command provided

2. Paste and run the NPM command obtained from step 1 in your project, like so:

   npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af8f5f5eee9eee8fbeadaaeb4aab4aab7fbf6eaf2fbb4af">[email protected]</a> --save

3. Once the above dependency is installed, proceed to run this npm command to install the bootstrap module

   npm install --save @ng-bootstrap/ng-bootstrap

   Further details can be found here

4. Add the following import into app.module

   import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

   and include NgbModule in the imports

5. Your app module configuration should resemble the following:

   import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
   
   @NgModule({
      declarations: [
      AppComponent,
      WeatherComponent
   ],
     imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     NgbModule.forRoot(), // Include Bootstrap module here.
   ],
     providers: [],
     bootstrap: [AppComponent]
   })
   
   export class AppModule { }
   

6. Edit angular-cli.json by adding a new entry to the styles array :

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

7. In src/app/app.component.html, add

   <alert type="success">hello</alert>
   

   Or, for ng alert usage, insert the following on your app.component.html page

   <ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert>
   

8. Finally, run your project and you will observe the bootstrap alert message displayed in the browser.

NOTE: For more information about ng Components, please refer here

When incorporating a visual library that requires JQuery, simply follow these steps:

• Include the library's CSS in the index;
• Add the JQuery JS file to the index;
• Integrate the library's JS files in the index;
• Download and install the library definition files (d.ts);
• Download and install JQuery definition files (d.ts);

If the library lacks definition files, you have a few options:

• Create the definitions manually;
• Declare a global "any" variable with the same name as the library object to prevent compiler errors;
• Proceed with errors (this is generally not recommended);

At this point, the library can be utilized within Typescript.

Here are some recommendations:

• Add a direct link to the Bootstrap CSS file in your index.html document
• Try using ng-bootstrap - a specialized collection of Angular 2 directives for areas requiring dynamic functionality. This alternative eliminates the need for importing jQuery and handling Bootstrap's JavaScript separately.

To install the latest version of Bootstrap, you can utilize npm. Execute the following command:

npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b16161d1b1113280c0608044b06081e">[email protected]</a>

Subsequently, ensure to import bootstrap.css into your primary css file, which typically would be styles.css in case you are using angular-cli.

@import '~bootstrap/dist/css/bootstrap.min.css';

For further information, refer to this link: http://example.com/install-bootstrap-npm

To begin, navigate to your project directory and complete the steps provided below.

1) Run the following command in the Node.js command prompt:

npm install --save @ng-bootstrap/ng-bootstrap

2) Next, execute this command:

npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abcdefg">[email protected]</a>

3) In your app module.ts file, add the following import statement:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap'

4) If Module is your root module, include the following code snippet:

`@NgModule({
 declarations: [AppComponent, ...],
 imports: [NgbModule.forRoot(), ...],
 bootstrap: [AppComponent]
})`
    (or)

If it's not the root module, use the code snippet below:

`@NgModule({
 declarations: [OtherComponent, ...],
 imports: [NgbModule, ...]
})`

5) Update system.config.js with the mapping information:

`map: {
'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-
bootstrap/bundles/ng-bootstrap.js',
}`

6) Include these scripts and stylesheet links in your Index.html file:

`<script src="../node_modules/jquery/dist/jquery.min.js"></script>
 <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 <link rel="stylesheet" type="text/css" 
 href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />`

ng add was recently added to Angular 6. If you want to include Bootstrap 4 (ng-bootstrap 2.0.0)

ng add @ng-bootstrap/schematics

Remember to restart your application using ng serve.

If you're working with Angular 6, it's recommended not to use npm i bootstrap@next --save. While it may work in some cases, there can be issues. It's better to include the following:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>

To incorporate Bootstrap into an Angular 6 project, begin by installing it in the project directory using the command npm install bootstrap. Check the Angular.JSON file to confirm that styles.css is already linked. Then, simply add

@import "~bootstrap/dist/css/bootstrap.css";

Using Angular version 6 or later with Bootstrap version 4 and SCSS

If you are working on an angular 7 project with SCSS enabled, this setup will work smoothly.

To get started, execute the following commands to install bootstrap, jQuery, and popper.js:

npm install --save bootstrap jquery popper.js

Note that jQuery and popper.js are required for running Bootstrap 4 (visit here for more details).

Open your angular.json file located in the root folder and make the following changes:

architect -> build -> options -> scripts

Update it like this:

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

By doing this, you will enable the JavaScript functions of Bootstrap in your project.

Next, navigate to the src->styles.scss file and add the following line:

@import '~bootstrap/scss/bootstrap';

How to Incorporate Bootstrap in Angular CLI:

step 1. Install the latest version of Bootstrap using npm:
      npm i bootstrap@latest --save 
      
step 2. Update angular.json by including Bootstrap in the styles array:
     "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.scss"
        ]
        
step 3. Restart the server to apply the changes:
            ng serve