Step-by-Step Guide: Building an Angular 5 CLI Project with ngx-bootstrap

This article will demonstrate how to create Angular 5 project using CLI and implement ngx-bootstrap or Bootstrap 3 with it. Here we are not going to explain what is Angular 5 and what is the difference between Angular 2 and Angular 5. We believe you have basic knowledge about Angular and Angular 5. So, let's start this demonstration.

Prerequisites

Before proceeding to create new Angular 5 project using CLI in Visual Studio Code, we must first confirm that we should have a configured system which should have prerequisites required for Angular 5 like any editor like Visual Studio Code, Node, NPM and CLI. First, we must check the installed version of Node, Npm and CLI.

As for this demonstration, we are using Visual Studio Code editor, which is the very lightweight tool as compare to Visual Studio 2015/2017 or any other version. If you are working on client side technologies Angular, Node, React, Html, CSS etc. then it is very recommended to work with Visual Studio Code.

If you don’t have installed Visual Studio Code in your system then you can download and install it from its official site https://code.visualstudio.com/download.

After installing, Visual Studio Code, open it and press CTRL+` to open terminal windows. For this demonstration, we are using Visual Studio Code, that is why we are showing how to check the version of installed components in Visual Studio Code. You can also use Command Prompt for that as well.

Once you open terminal windows in Visual Studio Code, we can use the following command to check node version. If you don’t have installed Node then you can download it from https://nodejs.org/en/ and installed it and then you can check the version of Node and NPM. To check node version.

node -v   //output v9.5.0

Check npm version using the following command.

npm -v  //output 5.6.0

Check Angular CLI version using the following command

ng -v

Don’t have angular CLI

If you don’t have installed Angular CLI, you can install it using the following command. You should always prefer to install latest version of angular CLI. If you are interested to know more about Angular CLI, just visit https://github.com/angular/angular-cli.

npm install -g @angular/cli@latest

Create Angular 5 Project

To create new Angular 5 project, just select that location in terminal windows where you want to create your Angular 5 app. And then just type the following command to create new Angular 5 project.

ng new Angular5App  //New project without Routing
OR
ng new Angular5App –routing //New project with Routing

It will take few minutes for creating angular 5 app. As follow you can see, how and what type of files created by CLI while creating new Angular 5 project.

C:\Users\MKUMAR3\Desktop\angular5>ng new Angular5App --routing
  create Angular5App/e2e/app.e2e-spec.ts (294 bytes)
  create Angular5App/e2e/app.po.ts (208 bytes)
  create Angular5App/e2e/tsconfig.e2e.json (235 bytes)
  create Angular5App/karma.conf.js (923 bytes)
  create Angular5App/package.json (1297 bytes)
  create Angular5App/protractor.conf.js (722 bytes)
  create Angular5App/README.md (1027 bytes)
  create Angular5App/tsconfig.json (363 bytes)
  create Angular5App/tslint.json (3012 bytes)
  create Angular5App/.angular-cli.json (1247 bytes)
  create Angular5App/.editorconfig (245 bytes)
  create Angular5App/.gitignore (544 bytes)
  create Angular5App/src/assets/.gitkeep (0 bytes)
  create Angular5App/src/environments/environment.prod.ts (51 bytes)
  create Angular5App/src/environments/environment.ts (387 bytes)
  create Angular5App/src/favicon.ico (5430 bytes)
  create Angular5App/src/index.html (298 bytes)
  create Angular5App/src/main.ts (370 bytes)
  create Angular5App/src/polyfills.ts (3114 bytes)
  create Angular5App/src/styles.css (80 bytes)
  create Angular5App/src/test.ts (642 bytes)
  create Angular5App/src/tsconfig.app.json (211 bytes)
  create Angular5App/src/tsconfig.spec.json (283 bytes)
  create Angular5App/src/typings.d.ts (104 bytes)
  create Angular5App/src/app/app-routing.module.ts (245 bytes)
  create Angular5App/src/app/app.module.ts (395 bytes)
  create Angular5App/src/app/app.component.html (1173 bytes)
  create Angular5App/src/app/app.component.spec.ts (1103 bytes)
  create Angular5App/src/app/app.component.ts (207 bytes)
  create Angular5App/src/app/app.component.css (0 bytes)
npm WARN deprecated nodemailer@2.7.2: All versions below 4.0.1 of Nodemailer are deprecated. See https://nodemailer.com/status/
npm WARN deprecated node-uuid@1.4.8: Use uuid module instead

> uws@9.14.0 install C:\Users\MKUMAR3\Desktop\angular5\Angular5App\node_modules\uws
> node-gyp rebuild > build_log.txt 2>&1 || exit 0


> node-sass@4.8.3 install C:\Users\MKUMAR3\Desktop\angular5\Angular5App\node_modules\node-sass
> node scripts/install.js

Cached binary found at C:\Users\MKUMAR3\AppData\Roaming\npm-cache\node-sass\4.8.3\win32-x64-59_binding.node

> uglifyjs-webpack-plugin@0.4.6 postinstall C:\Users\MKUMAR3\Desktop\angular5\Angular5App\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js


> node-sass@4.8.3 postinstall C:\Users\MKUMAR3\Desktop\angular5\Angular5App\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Users\MKUMAR3\Desktop\angular5\Angular5App\node_modules\node-sass\vendor\win32-x64-59\binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1269 packages in 109.86s
Project 'Angular5App' successfully created.

So, as you can see we have created Angular 5 project successfully and added all required node packages inside the node_modules folder.

Now its time to run this project. But before the running project, first, you should have to go inside the project folder in the terminal window and then you will be able to run the project. So run Angular 5 CLI project, we can use following commands

ng serve OR ng serve –open OR ng serve -o

Project Structure

Here we are describing important folders and files as follows.

src: This folder contains app folder which contains all the files and folders those are required to create an angular app like your all components, HTML page, module, page specific CSS, data files [interfaces or classes] etc.

assets: This folder exists inside the app folder and contains the only static file like images, CSS etc.

e2e: This folder contains required files for testing your angular app.

node_modules: All installed packages using "npm install" command goes inside this folder.

angular-cli.json: Angular CLI loads its configuration from angular-cli.json file to build, run and deploy the angular app.

package.json: This file keeps information about all packages on which angular app has dependencies. Apart from that it also contains dev dependencies.

tsconfig.json: This is the main configuration file for typescript. The angular compiler looks for it when you make any change in the code and save like what is base URL, target version of javascript, compile or not on save etc.

Why ngx-bootstrap

Just to confirm here “ngx-bootstrap contains all core (and not only) Bootstrap components powered by Angular. So you don't need to include original JS components, but we are using markup and CSS provided by Bootstrap.” 

Reference: https://github.com/valor-software/ngx-bootstrap

Install bootstrap and ngx-bootstrap

Now we will show how to add bootstrap with this project and use few features like Accordion, Dropdown, Tabs Modal Popup etc. to see, is it working or not. First, open your project in Visual Studio Code. To open created project into Visual Studio Code, go to File menu and select Open Folder. From the “Open Folder” windows, just select your project and click to “select folder”. Now you can see the project in Visual Studio Code in Explorer window.

There are different ways to implement bootstrap with the Angular project. We can use regular CDN files for bootstrap on the index.html page or we can install bootstrap components using npm and use ngx-bootstrap or ng-bootstrap.

1. Using direct CDN path for bootstrap
2. Install bootstrap using NPM

So, let start installing two components as follows.

npm install bootstrap@3 –save

npm install ngx-bootstrap --save

To know more about ngx-bootstrap, you can visit its official site https://ngx-bootstrap-latest.surge.sh/#/getting-started. Here you can get an example of each component which is part of the ngx-bootstrap.

So, let move to demonstration part again and see how to use ngx-bootstrap components. Here we will not implement all components but yes give you ideas how to implement ngx-bootstrap components with angular 5 projects.

So, first open style.css in the parent directory and import bootstrap.min.css into it.

@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

So, let create a new shared module which will import all ngx-bootstrap components module and share it with the main module app.module.ts. As per separation of concern, we should always create separate module or component for single responsibility. Create a new folder inside the /src/app/ and name it “shared” and inside that create a typescript file as the name “shared-bootstrap.module.ts” and following code.

import { NgModule } from '@angular/core';
import { AccordionModule } from 'ngx-bootstrap/accordion'
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';
import { TabsModule } from 'ngx-bootstrap/tabs';

@NgModule({
    imports: [AccordionModule.forRoot(), BsDropdownModule.forRoot(), ModalModule.forRoot(), TabsModule.forRoot()],
    exports: [AccordionModule, BsDropdownModule, ModalModule, TabsModule],
    declarations: [],
    providers: []
})

export class SharedBootstrapModule {

}

Here you can see, we are importing AccordionModule, BsDowndownModule, ModalModule, TabsModule from ngx-bootstrap. You can also add more module from ngx-bootstrap.

import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router/src/router_module';
import { SharedBootstrapModule } from './shared/shared-bootstrap.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    AppRoutingModule,
    SharedBootstrapModule
  ],
  exports: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now we have to import SharedBootstrapModule in AppModule.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

Now we have to add DOM element to create bootstrap components. As you can see with below code, we are using bootstrap navbar along with <accordion> tag to create Accordion, <tabset> tag to create Tabs etc.

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Angular 5 Example</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active">
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Page 1</a>
      </li>
      <li>
        <a href="#">Page 2</a>
      </li>
      <li>
        <a href="#">Page 3</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container">
  <div class="col-md-6">
    <h2>Accordion Example</h2>
    <accordion>
      <accordion-group heading="Static Header, initially expanded">
        This content is straight in the template.
      </accordion-group>
      <accordion-group heading="Another group">
        <p>Some content</p>
      </accordion-group>
      <accordion-group heading="Another group">
        <p>Some content</p>
      </accordion-group>
    </accordion>

    <br>
    <h2>Tabs Example</h2>
    <div>
        <tabset>
          <tab heading="Tab 1" id="tab1">Basic content for tab 1</tab>
          <tab heading="Tab 2">Basic content for tab 2</tab>
          <tab heading="Tab 3">Basic content for tab 3</tab>
        </tabset>
      </div>
  </div>
  <div class="col-md-6">
    <h2>Dropdown Example</h2>
    <div class="btn-group" dropdown>
      <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
        Button dropdown
        <span class="caret"></span>
      </button>
      <ul *dropdownMenu class="dropdown-menu" role="menu">
        <li role="menuitem">
          <a class="dropdown-item" href="#">Action</a>
        </li>
        <li role="menuitem">
          <a class="dropdown-item" href="#">Another action</a>
        </li>
        <li role="menuitem">
          <a class="dropdown-item" href="#">Something else here</a>
        </li>
        <li class="divider dropdown-divider"></li>
        <li role="menuitem">
          <a class="dropdown-item" href="#">Separated link</a>
        </li>
      </ul>
    </div>

    <br>
    <h2>Modal Popup Example</h2>
    <button type="button" class="btn btn-primary" (click)="staticModal.show()">Open Modal Popup</button>

    <div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title pull-left">Modal Popup</h4>
            <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            This is static modal popup, backdrop click will not close it. Click
            <b>&times;</b> to close modal.
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

Now its time to run the project. To run project just use "ng serve" command in terminal window and use "localhost:4300" in the browser and you will see following output. Here you can see as usual Navbar, Accordion, Dropdown, Modal Popup and Tabs controls are rendering.

Click to Open Modal Popup button to open Modal popup.

Important Commands

There are several general commands that are generally used to create Angular different types of files like module, components, classes etc. We have listed few of them as follow with short hand commands with description. 

//Add new module using following commands
ng generate module test-module
OR
ng g m test-module

//Add new components using following commands
ng generate component test-component
OR
ng g c test-component

//Add new class using following commands.
ng generate class test-class 
OR
ng g cl test-class

//Add new directive using following commands
ng generate directive test-directive
OR
ng g d test-directive

//Add new service using following commands
ng generate service test-service
OR
ng g s test-service

//Add new pipe using following commands
ng generate pipe test-pipe 
OR
ng g p test-pipe 

Conclusion

So, today we have seen how to create Angular 5 application using CLI and implement ngx-bootstrap.

I hope this post will help you. Please put your feedback using comment which helps me to improve myself for next post. If you have any doubts please ask your doubts or query in the comment section and If you like this post, please share it with your friends. Thanks