My Angular App with Angular-cli (I)

I will a sample Angular Full Stack App from scratch, with angular cli. This is a to-do list of cities that I would like to know: “Places2Go… an the Mean Stack”

So, lets start:

#01 Working Dir

Our working in Github and local

#02 Setup

Create the project with angular-cli

$ ng new places2go-v01

and the result is:

And with only a command we have a lot! A ready to use project with

  • package.json: May be the most important file … or at least the first one that you shoul watch: we can see dependences and run commands

The .angular-cli.json file with the indication what are the main files:

Let´s observe that index.html don´t have any reference to start the angular javascript, that is because when we run with ng serve from angular-cli the main class main.ts with the indication about how to start angular…

Other option could be include various of the angular javascript in the head. But I am following the angular-cli way

#03 Run empty project

Let´s run the empty project

$ ng serve

#04 Start Coding — Ideas

The app is about cities that I would like to visit, so, the most natural is create a “City” model class

At this point I have three options:

  • Start coding from backend (i.e.: 1. Server folder with the api rest in nodejs with express and mongose with the city schema, it could be an standalone app. 2. Then write the service component in a service folder in the angular app to connect to the api rest, do unitary tests and 3. Integrate the service with the front components / MVC of the angular app). It is usually the way I like to work because you understand what the data is.
  • Other option is edit the components generated by angular-cli on the template project… I will do it…
  • Other option is build the front components against mocks objects, and after that replace the mock by a real object. There is a good video of John Papa on that is working in this way. By the way, in the video Jhon Papa use the snniptes of visual stode code (from, I am use atom, and I would use with the same idea the following extension

#04 Start Coding — Target

a) Add an background image to the hello page

I will copy an image to assets/images/bg.jpg and edit the main styles.css with:


b) Add particles js library

This just consist on a couple of javascript an a div tag, based on

After a little test, it is not so easy in angular2 add such kind of javascript to the angular app… so, at least, and just for test, i copy the lib to a new page outside

particle page

c) Open Browser with a node launcher

I will make a launcher to static want just some static content: first node will start a server with express and then node will start the browser to an express address (opn library).

To open the before page without open angular app:

$ npm install opn -save

$ npm install express -save

And we can see the static express server and the invocation to the browser

node launcher

Let´s tag it on github

$ git tag v1.0.0

$ git push origin v1.0.0

We can observe that this tag include all the repo, no only the app04 with the version that I was working on….

#05 Start Coding — Target Bootstrap

First I have installed the following plugin for better use of bootstrap in Atom

Also, because I am writing with Angular Cli, I will also use/install the following “cli” for angular

“NG Bootstrap — Angular directives specific to Bootstrap 4

Install ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

I will Build a template with bootstrap 4: I could write it from scratch, or I could use a design tool: I will use and this tool generate templates with Bootstrap 3, after that I would like to have bootstrap4, so I should convert the source code with the online tool

Note about Responsive design with flex:

With Grid:

In bootstrap you have to think in twelve rows:

With Flexbox:

Another approach to responsive design (If I am not wrong, flexbox was for v4)

Let´s start:

Let see some bootstrap4 plain html code: It was only simple copy&paste from the official tutorial, and official components. (on github:

And the result

Bootstrap 4 basic components

This was the v1.0.1 in GitHub: Static HTML design

From the source html bootstrap code, we notice that we have imported two JS files at the end on the file: jquety and bootstrap.js

In the simple page that we have built, the only components that need it are the alert success o danger, not else.

#06 Start Coding — Target Bootstrap from angular-cli

Intermedian steps:

a) Let´s add Navbar

The easy way is to add the html on the “app.component” and a CDN bootstrap file with the css to the index.html

Thing to improve: Navbar with color dark, and the bootstrap css local to the app instead of CDN.

Bootstrap on Angular

I have two possibilities with angular bootstrap: that is used in the Any-Theme and I looks that have better doc and the the one what I have already installed

Option 1: ng-bootstrap package

I will follow

$ npm install --save @ng-bootstrap/ng-bootstrap

also I shoul install bootstrap 4:

$ npm install --save bootstrap@4.0.0-alpha.6

Everithing looks ok… but the result…

Option 2: ng2-bootstrap package

The ng2-bootstrap package was used by the any-theme template

  • open src/app/app.module.ts and add
import { AlertModule } from 'ng2-bootstrap';
imports: [AlertModule.forRoot(), ... ],
  • open angular-cli.json and insert a new entry into the styles array
"styles": [
"scripts": [

Ok! let´see that ng2-bootstrap work:

In github the version 1.0.2 have the changes of the integration of Angular2 with Bootstrap

A good explication about how to install bootstrap on angular cli, is with is said how to edit angular-cli.json to include bootstrap and jquery dependences.

I have changed the navbar version to one better, also with bootstrap (source code in the problem with this version in angular2 is that when you resize the browser, the menu don´t do the drop down. The reason is that I should integrate jQuery, ant it is a little contradiction because we should not use jQuery with angular … Let see how we are going to integrate it:

Add jQuery to Angular

$ npm install --save jquery

After that we will add it to .angular-cli.json

"scripts": [
"styles": [

and $ ng build and $ npm start the navbar on angular app works!

ok! we have reach the goal to have navbar working on angular2 with an angular-cli installation. It implied many steps, for example to include bootstrap and jquery to the angular-cli.json to the included in the dist folder

but, I am not using the ng2-bootstrap directive to navbar… How it is?

ng2-bootstrap don´t have a nav-bar component

what about the new ng-bootstrap?neither have implemented the navbar component….

Ok! I will stop the post there, the source code is in GitHub with three intermediate tags v1.0.1, v1.0.2 and v1.0.3

Let´s see in other post … I will following with angular and angular-cli

Next Steps …

a) Different Components: 1. Navbar + Table + Form

b) Can we build an component to iterate over a json col to generate the table?

c) Two binding with the form ?

c) Etc …


Some interesting links

Show your support

Clapping shows how much you appreciated Pablo Ezequiel’s story.