How to add Bootstrap 4 in Angular 5 CLI generated application

This is just an anchor post to my recent Github repository where I explained how to integrate Latest Bootstrap 4 into your Angular 5 CLI generated application.

The master branch currently consist of a mix of Bootstrap 4 Login Sample and Starter Template.

I am going to save you the time and not repeat the same steps here but you can follow step by step instruction form the Readme file from Github repository.

Some sample screen shots.

  1. Login Page

Host Angular 5 Application on Amazon S3 Bucket

In this post I will show you how to deploy your Angular 5 application on Amazon S3 bucket and link it to your subdomain which in my case happened to be managed by GoDaddy.

Create a new Angular application. I will start by copying a previous Angular5 application created for Angular5 and Bootstrap4 integration. If you want you can look at that blog post here.

Angular Application Setup

First I have logged into my Github accouont and created a new Empty repository named "angular-s3-demo"

Next, I will create bare clone of my original repository

git clone --bare

Navigate to the repository

cd ng5-bs4-template.git

Push the content to new Repository using mirror option

git push --mirror

Next, clone the new repository, run npm install and add a new component that will handle all the 404 errors.

git clone

Create a new Component not-found

ng g component components/not-found --module app

Updated content of the not-found.component.html with something that you want to display to your users when they hit unwanted routes.

Next, import the component in the public.routes.ts file and create following route.

import { NotFoundComponent } from '../../components/not-found/not-found.component'

{ path: 'notfound', component:NotFoundComponent}

Update the app.routing.modiles.ts as below.

{ path: '**', redirectTo: 'notfound' }

Amazon S3 Setup

Now, let's shift focus towards Amazon S3. First things first, creat a new S3 Bucket and enable static site hosting.

Error More than one module matches. Use skip-import option to skip importing the component into the closest module

If you came here, I am guessing you are trying to use Angular CLI to generate a new component as below.

ng g component my-component

And it fails with this error ! Error: More than one module matches. Use skip-import option to skip importing the component into the closest module.

In a way the error is telling you precisely what is wrong with the project but for some reason it is not clear. Basically the problem is you have more than one Module in you Angular application at the Root Level.

So when you try generating a new component using Angular CLI, it tries to import and Register newly generated component in your app.module.ts. However you have some other module at the same root level as your AppModule and so CLI is getting confused as to which Module it should register this new Component into ?

One of the following two solutions can be used to fix this issue.

  1. Move the second Module into a Sub Folder and run the command again. This time CLI finds only one root module and registers your component into that Module.

  2. Expliclity mention which Module you want to register this component into by using following flag in your Command line. Assuming you want to register your new component under app.module.ts.

ng g my-component --module app

Customizing Ionic App Look and Feel

In previous blog post we started exploring the Ionic Framework for building the Hybrid Mobile Applications. This is just a continuation of previous blog post. In this blog post we will see,

  • Various Color Options from Ionic
  • Setting up SASS for our Ionic Application
  • Customizing the Login page with Background Image

So let's get started.

Various Color Options from Ionic

Ionic Framework comes with at least 9 different color schema as of this writing. Let's quickly look at what they are and how can you use one of them while building your application. In the previous example we looked at one of the color schema named assertive. Following is the list of other color schema.

  • light
  • stable
  • positive
  • calm
  • balanced
  • energized
  • assertive
  • royal
  • dark

If you want to change the look and feel of your Ionic App but do not want to spend a lot of time in designing, all you have to do is decide on one or few of the color schema above and start assigning them as CSS classes to your UI elements. Please refer to following CodePen example. I have different buttons applied with different out of the box styles.

See the Pen XbmbNQ by Keyur (@kraval) on CodePen.

So now you know what different theme options you have, you can start appending these classes to all the elements provided by Ionic.

Setting up SASS for our Ionic Applications

Not every application is going to be bound to these set of 9 themes, although they are pretty good to build your simple to moderate application. You might need to change the styles all together or introduce a new color. You can do that very easily by setting up SCSS for ionic project.

Run following command while you are in your application directory.

ionic setup sass

You will see the .scss file in your project structure where you can override the basic or extend the existing classes with your own styles and CSS rules. For now let's just update the color for one of the theme,positive.

Getting Started With Ionic

In this blog post we will explore the Ionic Framework for building the Hybrid Mobile Applications. Before we jump into the actual framework let's briefly understand what a Hybrid Mobile application is and why it is becoming more and more popular approach for building the Cross Platform Mobile Applications.

What is Hybrid Mobile Application ?

As we all know, there are three major Mobile Ecosystem are widely popular these days. iOS, Android and Windows and than there are rest of them. And I am sure you have switched between at least 2 of these major Ecosystems in last few years. And while switching the platform you expect that the apps you love on one platform is available on other one. Which is a fair expectation but if you are developer you what that means.

  • You need to learn Objective C, Java and C# to build your application on three major platforms.
  • Continue enhancing, upgrading your applications as the new version are released by platform vendors.
  • Take this approach to an Enterprise and they are faced with even bigger challenges.

In order to solve these type of problems Developer community in general has come up with the idea of building Hybrid applications. Hybrid application is the approach of building your mobile apps using Native Device features along with Web Technologies and deliver them in a Native shell so it just feels like any other regular app. The benefits..

  • Reuse existing Web Technologies/skills HTML5,CSS3,JavaScript
  • Write your code only in JavaScript
  • And still run your application on wide range of devices from different vendors
  • Utilizing the Native Device specific features like Camera,Mic and other sensors (And that is possible through the Cordova platfrom.)

So hopefully this gives you some idea of what a Hybrid application is. There are numerous frameworks out there helping you build these types of apps but Ionic seems to be getting a lot of popularity in the community. So I decided to explore that a bit and this blog post series is a result of that.

Prerequisites for Ionic

Ok so it's not so much of a prerequisite but if you have some idea about following technologies it certainly make life litter easier while learning Ionic framework. So it's good to have basic idea about,

  • NodeJS
  • AngularJS
  • Corodova
  • Web API (At a later point in the series I will show you how to connect your Ionic App with .Net Web API)
  • Basic Sublime Text

Installing Ionic

First things first, in order to work with Ionic you need to have NodeJS installed. If you already have it installed great, if not you can read the blog post I did for on how to install NodeJS on Windows 8.

Once NodeJS is installed, we will use the npm packages provided by Ionic framework to download and setup the Ionic Framework.

Install Ionic & Cordova globally.

npm install -g cordova ionic

And that's it. We are now ready to build our first Ionic application. The framework comes with a very powerful CLI so we can pretty much stay with the command line tool and build our Ionic application right form there, let's do it.

Create Ionic Blank Application

That's right. Ionic out of the box gives you template to create one of the 3 Types of application.

  • Tabs
  • Sidemenu
  • Blank

We will start with the blank first.

ionic start IonicDemo blank

Now it might ask you to create account. You can go ahead and create one if you don't have or simply say no if you have one.

Next navigate into the Project directory for our application. We need to add platforms for which we are building the application. For this blog we will only add the Android platform.

ionic platform add android

Next, let's build the application for android.

ionic build android

You might get the error saying "Command failed with exit code 2 You may not have the required environment or OS to build this project".

One of the reason this might happen is that you do not have Android SDK installed or it's not configured properly. To fix this issue, visit this site and download the Android SDK installer.

Again, this could be just one of the reasons. Other reasons might be, not having proper environment variables setup up, version conflict on Andorid build tools. So you will have to do little digging on the web to find the solution.