Post
Ask Question

Building An Angular 5 CLI Project With ngx-bootstrap

This article will demonstrate how to create an Angular 5 project using CLI and implement ngx-bootstrap or Bootstrap 3 with it. Here we are not going to explain what Angular 5 is or 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 a new Angular 5 project using CLI in Visual Studio Code, we must first confirm that we have a configured system which should have the prerequisites required for Angular 5 , including an 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 a very lightweight tool as compared 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 recommended to work with Visual Studio Code.

If you don’t have Visual Studio Code installed 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 Node installed then you can download it from https://nodejs.org/en/ and install 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

If you don't have Angular CLI:

If you don’t have Angular CLI, you can install it using the following command. You should always 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

Angular

 

Note
Both the CLI and generated project have dependencies that require Node 6.9.0 or higher, together with NPM 3 or higher.

Create Angular 5 Project

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

ng new Angular5App  //New project without Routing

OR

ng new Angular5App –routing //New project with Routing

It will take a few minutes to create an Angular 5 app. Following you can see, how and what type of files were created by CLI while creating new Angular 5 project. 

  1. C:\Users\MKUMAR3\Desktop\angular5>ng new Angular5App --routing  
  2.   create Angular5App/e2e/app.e2e-spec.ts (294 bytes)  
  3.   create Angular5App/e2e/app.po.ts (208 bytes)  
  4.   create Angular5App/e2e/tsconfig.e2e.json (235 bytes)  
  5.   create Angular5App/karma.conf.js (923 bytes)  
  6.   create Angular5App/package.json (1297 bytes)  
  7.   create Angular5App/protractor.conf.js (722 bytes)  
  8.   create Angular5App/README.md (1027 bytes)  
  9.   create Angular5App/tsconfig.json (363 bytes)  
  10.   create Angular5App/tslint.json (3012 bytes)  
  11.   create Angular5App/.angular-cli.json (1247 bytes)  
  12.   create Angular5App/.editorconfig (245 bytes)  
  13.   create Angular5App/.gitignore (544 bytes)  
  14.   create Angular5App/src/assets/.gitkeep (0 bytes)  
  15.   create Angular5App/src/environments/environment.prod.ts (51 bytes)  
  16.   create Angular5App/src/environments/environment.ts (387 bytes)  
  17.   create Angular5App/src/favicon.ico (5430 bytes)  
  18.   create Angular5App/src/index.html (298 bytes)  
  19.   create Angular5App/src/main.ts (370 bytes)  
  20.   create Angular5App/src/polyfills.ts (3114 bytes)  
  21.   create Angular5App/src/styles.css (80 bytes)  
  22.   create Angular5App/src/test.ts (642 bytes)  
  23.   create Angular5App/src/tsconfig.app.json (211 bytes)  
  24.   create Angular5App/src/tsconfig.spec.json (283 bytes)  
  25.   create Angular5App/src/typings.d.ts (104 bytes)  
  26.   create Angular5App/src/app/app-routing.module.ts (245 bytes)  
  27.   create Angular5App/src/app/app.module.ts (395 bytes)  
  28.   create Angular5App/src/app/app.component.html (1173 bytes)  
  29.   create Angular5App/src/app/app.component.spec.ts (1103 bytes)  
  30.   create Angular5App/src/app/app.component.ts (207 bytes)  
  31.   create Angular5App/src/app/app.component.css (0 bytes)  
  32. npm WARN deprecated [email protected]: All versions below 4.0.1 of Nodemailer are deprecated. See https://nodemailer.com/status/  
  33. npm WARN deprecated [email protected]: Use uuid module instead  
  34.   
  35. > [email protected] install C:\Users\MKUMAR3\Desktop\angular5\Angular5App\node_modules\uws  
  36. > node-gyp rebuild > build_log.txt 2>&1 || exit 0  
  37.   
  38.   
  39. > [email protected] install C:\Users\MKUMAR3\Desktop\angular5\Angular5App\node_modules\node-sass  
  40. > node scripts/install.js  
  41.   
  42. Cached binary found at C:\Users\MKUMAR3\AppData\Roaming\npm-cache\node-sass\4.8.3\win32-x64-59_binding.node  
  43.   
  44. > [email protected] postinstall C:\Users\MKUMAR3\Desktop\angular5\Angular5App\node_modules\webpack\node_modules\uglifyjs-webpack-plugin  
  45. > node lib/post_install.js  
  46.   
  47.   
  48. > [email protected] postinstall C:\Users\MKUMAR3\Desktop\angular5\Angular5App\node_modules\node-sass  
  49. > 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: [email protected] (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1269 packages in 109.86s

Project 'Angular5App' was successfully created.

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

Angular

 

Now it's time to run this project. But before running the project, first, you should 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

NOTE
If you are not inside the project folder before running the above command, you will get the following error.
node_modules appear empty, you may need to run `npm install`

Project Structure

Here we are describing important folders and files as follows.

 

  • src
    This folder contains app folders which contain all the files and folders required to create an angular app including your 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 the 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 saves things like the base URL, target version of javascript, whether to 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 a few features like Accordion, Dropdown, Tabs Modal Popup etc. to see if it is 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's 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's move to the demonstration part again and see how to use ngx-bootstrap components. Here we will not implement all components but give you ideas about 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's 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 with the name “shared-bootstrap.module.ts” and the following code.

shared-bootstrap.module.ts

  1. import { NgModule } from '@angular/core';  
  2. import { AccordionModule } from 'ngx-bootstrap/accordion'  
  3. import { BsDropdownModule } from 'ngx-bootstrap/dropdown';  
  4. import { ModalModule } from 'ngx-bootstrap/modal';  
  5. import { TabsModule } from 'ngx-bootstrap/tabs';  
  6.   
  7. @NgModule({  
  8.     imports: [AccordionModule.forRoot(), BsDropdownModule.forRoot(), ModalModule.forRoot(), TabsModule.forRoot()],  
  9.     exports: [AccordionModule, BsDropdownModule, ModalModule, TabsModule],  
  10.     declarations: [],  
  11.     providers: []  
  12. })  
  13.   
  14. export class SharedBootstrapModule {  
  15.   
  16. }  

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

app.module.ts

  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { CommonModule } from '@angular/common';  
  3. import { NgModule } from '@angular/core';  
  4. import { FormsModule } from '@angular/forms';  
  5.   
  6. import { AppRoutingModule } from './app-routing.module';  
  7.   
  8. import { AppComponent } from './app.component';  
  9. import { RouterModule } from '@angular/router/src/router_module';  
  10. import { SharedBootstrapModule } from './shared/shared-bootstrap.module';  
  11.   
  12.   
  13. @NgModule({  
  14.   declarations: [  
  15.     AppComponent  
  16.   ],  
  17.   imports: [  
  18.     BrowserModule,  
  19.     CommonModule,  
  20.     FormsModule,  
  21.     AppRoutingModule,  
  22.     SharedBootstrapModule  
  23.   ],  
  24.   exports: [],  
  25.   providers: [],  
  26.   bootstrap: [AppComponent]  
  27. })  
  28. export class AppModule { }  

Now we have to import SharedBootstrapModule in AppModule.

app.component.ts

  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.css']  
  7. })  
  8. export class AppComponent {  
  9.   title = 'app';  
  10. }  

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

app.component.html

  1. <nav class="navbar navbar-inverse">  
  2.   <div class="container-fluid">  
  3.     <div class="navbar-header">  
  4.       <a class="navbar-brand" href="#">Angular 5 Example</a>  
  5.     </div>  
  6.     <ul class="nav navbar-nav">  
  7.       <li class="active">  
  8.         <a href="#">Home</a>  
  9.       </li>  
  10.       <li>  
  11.         <a href="#">Page 1</a>  
  12.       </li>  
  13.       <li>  
  14.         <a href="#">Page 2</a>  
  15.       </li>  
  16.       <li>  
  17.         <a href="#">Page 3</a>  
  18.       </li>  
  19.     </ul>  
  20.   </div>  
  21. </nav>  
  22.   
  23. <div class="container">  
  24.   <div class="col-md-6">  
  25.     <h2>Accordion Example</h2>  
  26.     <accordion>  
  27.       <accordion-group heading="Static Header, initially expanded">  
  28.         This content is straight in the template.  
  29.       </accordion-group>  
  30.       <accordion-group heading="Another group">  
  31.         <p>Some content</p>  
  32.       </accordion-group>  
  33.       <accordion-group heading="Another group">  
  34.         <p>Some content</p>  
  35.       </accordion-group>  
  36.     </accordion>  
  37.   
  38.     <br>  
  39.     <h2>Tabs Example</h2>  
  40.     <div>  
  41.         <tabset>  
  42.           <tab heading="Tab 1" id="tab1">Basic content for tab 1</tab>  
  43.           <tab heading="Tab 2">Basic content for tab 2</tab>  
  44.           <tab heading="Tab 3">Basic content for tab 3</tab>  
  45.         </tabset>  
  46.       </div>  
  47.   </div>  
  48.   <div class="col-md-6">  
  49.     <h2>Dropdown Example</h2>  
  50.     <div class="btn-group" dropdown>  
  51.       <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">  
  52.         Button dropdown  
  53.         <span class="caret"></span>  
  54.       </button>  
  55.       <ul *dropdownMenu class="dropdown-menu" role="menu">  
  56.         <li role="menuitem">  
  57.           <a class="dropdown-item" href="#">Action</a>  
  58.         </li>  
  59.         <li role="menuitem">  
  60.           <a class="dropdown-item" href="#">Another action</a>  
  61.         </li>  
  62.         <li role="menuitem">  
  63.           <a class="dropdown-item" href="#">Something else here</a>  
  64.         </li>  
  65.         <li class="divider dropdown-divider"></li>  
  66.         <li role="menuitem">  
  67.           <a class="dropdown-item" href="#">Separated link</a>  
  68.         </li>  
  69.       </ul>  
  70.     </div>  
  71.   
  72.     <br>  
  73.     <h2>Modal Popup Example</h2>  
  74.     <button type="button" class="btn btn-primary" (click)="staticModal.show()">Open Modal Popup</button>  
  75.   
  76.     <div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"  
  77.       aria-hidden="true">  
  78.       <div class="modal-dialog modal-sm">  
  79.         <div class="modal-content">  
  80.           <div class="modal-header">  
  81.             <h4 class="modal-title pull-left">Modal Popup</h4>  
  82.             <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">  
  83.               <span aria-hidden="true">×</span>  
  84.             </button>  
  85.           </div>  
  86.           <div class="modal-body">  
  87.             This is static modal popup, backdrop click will not close it. Click  
  88.             <b>×</b> to close modal.  
  89.           </div>  
  90.         </div>  
  91.       </div>  
  92.     </div>  
  93.   </div>  
  94.   
  95. </div>  

Now it's 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 the following output. Here you can see as usual Navbar, Accordion, Dropdown, Modal Popup and Tabs controls are rendering.

Angular

 

Click to Open Modal Popup button to open Modal popup.

 

Angular

 

Important Commands

There are several general commands that are generally used to create different types of Angular files like module, components, classes etc. We have listed a few of them as follows with shorthand commands with descriptions. 

  1. //Add new module using following commands  
  2. ng generate module test-module  
  3. OR  
  4. ng g m test-module  
  5.   
  6. //Add new components using following commands  
  7. ng generate component test-component  
  8. OR  
  9. ng g c test-component  
  10.   
  11. //Add new class using following commands.  
  12. ng generate class test-class   
  13. OR  
  14. ng g cl test-class  
  15.   
  16. //Add new directive using following commands  
  17. ng generate directive test-directive  
  18. OR  
  19. ng g d test-directive  
  20.   
  21. //Add new service using following commands  
  22. ng generate service test-service  
  23. OR  
  24. ng g s test-service  
  25.   
  26. //Add new pipe using following commands  
  27. ng generate pipe test-pipe   
  28. OR  
  29. ng g p test-pipe   

Conclusion

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

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


Similar Articles