Angular - 3 4 configuring an application

Now that the project is generated, we configure it to fit our needs. The first task is housekeeping inside AppComponent: open app.component.html and empty it completely (Ctrl+A then delete) so we start from a clean slate. In app.component.ts, we also remove the default title property. Everything else generated by the CLI can stay as is.

To save time on visual design we will rely on Bootstrap throughout the course. The goal is to keep the focus on Angular, not on hand-crafting CSS. From the project root, install the latest Bootstrap as a real dependency so it ends up in package.json:

npm install bootstrap --save

Wiring Bootstrap into the build

Installing the package is only half the work — we also need to tell the Angular CLI to bundle Bootstrap's CSS in the final build. Open angular.json and locate the styles array (the one that already contains src/styles.css). Add a new entry pointing to the minified Bootstrap stylesheet inside node_modules:

  • "node_modules/bootstrap/dist/css/bootstrap.min.css" — the minified, production-ready stylesheet.
  • Keep src/styles.css right after it for global overrides specific to the project.

Restart ng serve so the CLI picks up the new asset and the project is rebuilt for the first time on port 4200. The page is blank because we just wiped app.component.html, which is expected. To confirm Bootstrap is wired in, add a quick div.container > div.row > div.col-md-12 structure (Emmet shortcut .container>.row>.col-md-12) containing an <h2>Hello world</h2>. Save, refresh, and inspect the heading: the typography and spacing now come from Bootstrap. The project is properly configured and ready for the next lesson where we will start creating the planned components.

Summary

This lesson covers the essential configuration steps for a new Angular application. You'll clean up the default app component, install and integrate Bootstrap for styling, update the Angular.json configuration to include Bootstrap CSS, and verify the setup by running the application with ng serve. The instructor demonstrates adding Bootstrap classes to test that styles are properly loaded in the browser.

Key points

  • Remove boilerplate code from app.component.html and app.component.ts to start with a clean foundation
  • Install Bootstrap via npm install bootstrap to add CSS framework dependencies to your project
  • Update angular.json styles array to include the path to Bootstrap's minified CSS file (node_modules/bootstrap/dist/css/bootstrap.min.css)
  • Run the application using ng serve to build the project and serve it on port 4200
  • Verify Bootstrap integration by adding Bootstrap container, row, and column classes to test styling
  • Use Angular CLI shortcuts (div.container, row, col-md-12) to quickly scaffold Bootstrap markup

FAQ

Why do we need to add Bootstrap to angular.json after installing it with npm?

Angular CLI needs to be explicitly told to include Bootstrap CSS in the final build bundle. Without adding it to the styles array in angular.json, the CSS framework won't be included in the compiled application.

What is the purpose of the container element in Bootstrap?

A container is a fundamental Bootstrap element that wraps, pads, and aligns your content on a webpage. It provides consistent spacing and layout structure for your application.

How do you verify that Bootstrap has been successfully integrated into your Angular app?

Run ng serve to start the development server, then add Bootstrap classes (like container, row, col-md-12) to your HTML template. If the styles render correctly in your browser (fonts, spacing, alignment), Bootstrap integration was successful.