Introduction:

Heroku is a cloud platform as a service (PaaS). It supports several programming languages. On Heroku, a developer can build, run, and operate applications entirely in the cloud.

In this article, we will deploy an Angular application on Heroku from Github.

Create an Angular App:

You can skip this step, if you already have an Angular application.

Prerequisite: You should have the NodeJS( download), Angular CLI ( download), and Github( download) installed on your system.

ng new heroku-app

2. Run the following commands to build the app and open your browser at http://localhost:4200.

cd heroku-app


There are three steps to set up a lazy loading feature in Angular.

  • Create a feature module.
  • Create the routing module for the feature module.
  • The configuration of the routes.

Prerequisites:

You should have an Angular app. If you do not have then run the following command.

This command will create a ‘lazy-loading-app’ and -routing flag generate a file ‘app-routing.module.ts’. Now move into your project directory i.e lazy-loading-app

ng new lazy-loading-app --routing

Step 1 and 2: Create a feature module and routing module.

Run the following command.

ng generate module books --routing

This command will create a books folder with…


There are three steps to set up the development environment.
Step: 1
Install Node.js and npm from the following link

https://nodejs.org/en/download/

Verify your Node.js version. It should be Node.js version 8.x or greater and npm version 5.x or greater. Run the following command to check it.

Install the Angular CLI globally. Run the following command.

npm install -g @angular/ cli

Step: 2
Create a new project

Open a terminal or cmd. Create a new project by running the following command.

ng new new-app

Step: 3
Serve the application
Now go into the project directory and run the server. Run the following command.

ng serve command run the server and -open option will automatically open the browser on http://localhost:4200/


A module in Angular refers to a place where you can group the components, directives, pipes, and services, which are related to the application.

@NgModule:

Angular is modular and Angular provide NgModule modularity system. An NgModule is a container for a cohesive block of code. It can contain components, service providers, pipes, and directives.

@NgModule metadata:

NgModule contains the following metadata.
1.Imports
2. providers
3. declarations
4. exports
5. bootstrap

1.Imports:
The imports array can be used to import the functionality from other Angular modules.


You can create a component in angular on the fly, isn’t it amazing, yes it is.

Let me explain it by an example. Suppose that you want to create an Angular studio in which you provide some list of built-in components to the user and a playground.

Now the user wants to create a form with two input fields and a button. Since Angular studio has the input field and buttons in its built-in components list, the user will drag the component from the available list into the playground.

Now we are hitting a challenge here, we need to compile…


Introduction:

Before moving to the media query, we need to understand the following terms.

A web page can be viewed on desktops, tablets, and phones. Responsive web design is the backbone to make a web page adaptive to all devices.

A responsive web page looks good on all the devices. It adapts its content to fit on all the devices. To make a web page responsive, you use CSS and HTML to modify its content.

It is the user’s visible area of the browser’s window. …


Introduction

Flexbox is a new module in CSS3. Flexbox was designed as a one-dimensional layout model. it is a good approach to align elements of a container in different directions and orders.

Flexbox gives the ability to expand and to shrink the elements of the container to use all the available space.

Flexbox provides the ability to make a responsive layout structure without using float or positioning.

Flexbox provides a unique aspect to build one-dimensional layouts. It is a true revolution in CSS.

Main Flexbox concepts

The element on which we use flexbox is called a flex container.

To…

Dinesh Kumar

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store