Quickly Scaffold Angular Projects With Bootstrap & Popular Best Practices

How to scaffold a new Angular project with Bootstraps and best practices

#1. Create a New Project With Bootstrap

  1. ng new ng-starter --style=scss
"styles": [    "src/styles.scss",    "node_modules/bootstrap/scss/bootstrap.scss"],"stylePreprocessorOptions": {    "includePaths": [        "src/styles/"    ]},
"scripts": [
"node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js"]

The last step is to simplify scss files imports

#2. Setup Modules & Simplify Imports

  1. Create a directory for Features Module: mkdir src/app/pages
"paths": {   "@env": ["src/environment/environment"],   "@pages/*": ["src/app/pages/*"],   "@shared/*": ["src/app/shared/*"],   "@core/*": ["src/app/core/*"],}

#3. Update index.html for Responsive Web Design

  1. Add class container-fluid to body or the root component app-root
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">

Full Stack Developer (specialised in .NET Core, Angular and ReactJS)