how-to-install--bootstrap-in-angular-17-standalone

How to install bootstrap in angular 17 using app.config.ts in standalone component.

This project was generated with Angular CLI version 17.0.5.

Step 1 : To install the Angular CLI, open a terminal window and run the following command:

npm install -g @angular/cli

Step 2 : Run the CLI command ng new and provide the name my-app, as shown here:

ng new my-app

Step 3 : Navigate to the workspace folder, such as my-app,Run the following command:

cd my-app

ng serve --open

Step 4 : The --open (or just -o) option automatically opens your browser to http://localhost:4200/.

Step 5 : To install bootstrap run this command in your terminal.

    ng add @ng-bootstrap/ng-bootstrap

Step 6 : To install bootstrap-icons run this command in your terminal.

      npm i bootstrap-icons

Step 7 : Include the bootstrap-icons in your global styles.css like this.

      @import "bootstrap-icons";

Step 8 ; Include the NgbModule in your app or standalone components like this.

      import { Component } from '@angular/core';
      import { CommonModule } from '@angular/common';
      import { RouterLink, RouterOutlet } from '@angular/router';

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


     @Component({
                  selector: 'app-root',
                  standalone: true,
                  imports: [CommonModule,NgbModule,RouterOutlet,RouterLink],
                  templateUrl: './app.component.html',
                  styleUrl: './app.component.css'
               })


   export class AppComponent {
   title = 'my-app';


  }

Congratulations your are done enjoy!!! .

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.