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. Create a new folder for stylesheets:
  2. Edit , and add the parts in bold:
"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:
  2. Create the Core Module:
  3. Create the Shared Module:
  4. Update to add into the list;
  5. Edit , add the block below into
"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 to or the root component
  2. Add the meta tags into <head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">

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