Adventures on the edge

Learning new development technologies
    "When living on the bleeding edge - you sometimes have to bleed" -BillKrat

Configure Angular for bootstrap

Ensure you have npm installed, if you don’t please read the blog Easy steps to installing Node, NPM, TypeScript, and Bower in Windows

Once installed execute the following:

npm install –g @angular/cli

To verify you have access to ng launch a command prompt and type in

ng --version

If you receive a message that it is not recognized as an internal or external command, update your PATH environment variable to include the following:

%appdata%\npm

Try ng --version again to see if it displays the version information.  Once working create your project:

ng new your-project-name

Per guidance provided by the official Bootstrap site (excerpt below) install Jquery, Popper.js, and Bootstrap.

Bootstrapper-001

With npm installed (above) execute the following:

  1. npm install bootstrap
  2. npm install jquery
  3. npm install popper.js


Update the src/styles.css with the following:

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

Update the angular.json scripts section with the following:

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

Note: angular.json has been renamed from angular-cli.json

Bootstrapper-002

Now you are ready to use Bootstrap in your Angular application

Comments are closed