Tutorial-2 Creating Your First Angular Application

Step By Step Guide For Creating Angular App and Hosting it in Apache Tomcat Web Server


Step 1 – Creating a fresh New Angular Project:
Open Command Prompt/Terminal (In Administrator Privilege), Move to the folder where you want to create the project and create a new angular application entering the below syntax.

                Syntax: ng new projectName  
                Example: ng new ang4Demo

Fig: Displaying successful creation of a new Angular Project using Angular CLI

Step 2 – Install all the dependencies :
Move into the newly created angular project and install all the dependencies by entering the below syntax.(From this step onward you have to remain inside the angular project and execute the below commands)
                Syntax: npm install

Fig: Command to install all the dependencies

Step 3 - Host the application:

                3.1 - Syntax: npm start
                3.2 - Syntax: ng serve

Fig: Commands for hosting/running application in browser

Fig:  Displaying successful compilation for running the application

Step 4 – Accessing your application from the browser:
By default the ng serve command hosts your application in port number 4200, so you can directly access your application from any browser with the below syntax. It will show you the default Welcome Screen (Presented in below Snapshot).

Syntax: http://localhost:4200

Fig:  Displaying the welcome screen of Angular App in the Browser

Step 5 - Building the angular project with the Ahead Of Time Compiler (AOT Compiler)
For this step, you have to stop the running project by pressing Ctrl + C (Ctrl and C) Buttons, next you have to enter the below syntax.

                Syntax: ng build --aot

Fig:  Terminating the running project

Fig:  Command to build the project for production Environment with AOT Compiler

Error:  In some cases below error may come, in my case I resolved this by entering following command (npm install enhanced-resolve@3.3.0).

Fig: Displaying the error while building the application


Fig: Displaying the solution for above problem, and successful project build.
    
Note: Output of this step can be found in Project Name/dist, in our example, it will be found in ang4Demo/dist. Dist stands for Distributable.
Fig: Yellow marked folder (dist) shows the output folder of the Build Command, which contains the compiled files to be hosted on the web servers.

Step 6 Hosting Application in Web Server(Apache Tomcat):

6.1 – Create a web application in your web server(I have created Ang4Demo in tomcat/webapps
folder) :-
Fig:  Creating a new web application in tomcat web server

6.2 – Copy all the contents of the dist (ang4Demo/dist) folder of your angular application, and paste it into your newly created web application(Ang4Demo), available on your web server :-

Fig: Copying all the contents from Angular2Practice/ang4Demo/dist to Tomcat/webapps/Ang4Demo.

6.3 – Access the application from the browser by entering your web servers address in the browsers address bar :-

Example: http://localhost:8089/Ang4Demo/
Fig:  Screen shot demonstrating the corresponding app running in the tomcat web server.

6.4 – Troubleshooting
Sometimes it also seems that some error comes after placing all the contents of dist in the web application, residing on your web server, then, in that case, no need to panic, just open the index.html  of your web application (tomcat/webapps/Ang4Demo/index.html) And find the <base href="/"> tag  just below the title tag, and change it to <base href="">  .

Fig:  Displaying errors when trying to run the application from the web server.

 Fig:  <base href="/"> in the index.html.








Change It  as below

 Fig : Updated <base href="">   in the index.html.

                             





Comments

Post a Comment

Popular posts from this blog

Tutorial-6 Pipes

Image
Pipes We describe Angular Pipes as it provides a way to format the Data in your html template, without putting a lot of efforts in your program for displaying some data in some specific format angular gives us power of Pipes. Pipes can be used within the Interpolation Expression for showing the formatted output. We use Pipe Operator i:e : I for availing the pipe facility, followed by the required pipe name. Syntax : {{dataModel | pipe name}} Ex : <p>Date of joining is{{joinDate | date}}</p> Parameterized Pipe: Pipes can take further formatting options with the help of parameters, parameters are represented by : (Colon) and placed after the pipe names. Syntax: {{dataModel | pipe name:parameter}} Ex : <p>Date of joining is{{joinDate | date:”MM/dd/YYYY”}}</p> Demonstrating uppercase and lowercase pipes App.cpmponent.ts import { Component } from '@angular/core' ; import { FormsModule } from '@angular/forms' ; ...
Read more

Angular2 Tricks

Hi Friends welcome, in this section, I will introduce you with some of the tips and tricks of Angular2. That I came across while doing my handsfree with AngularJS2. I hope these information's will help you. 💭 What if I will use both template and templateUrl field in my Component? Is it going to through me Error, if not then which field will get considered?       Ex : @Component({   selector: 'banchha',   template:`  <h1>Testing template attribute</h1>   `,   templateUrl: './app.component.html' }) 💨  The answer is that you can use both of them in the Component, it might be logically not correct but syntactically Angular2 allows it(as on 1st May 2017), so no error will be thrown by the transpiler. Answering next which field will be considered, the answer is that the field( between template and templateUrl ) that occurs last in the Component,  will get considered, i:e in above example the  templ...
Read more

Tutorial-4 Data Bindings in Angular

Image
Data Bindings in Angular In this section we will discuss various ways to display data in view and fetching data from the view as well as how to sync the data between view and model. Remember to show data in the view we have to take help of the templates, because templates are responsible for rendering the HTML in the browser. Angular provides so many ways for achieving the data binding feature, lets discuss all of them with some suitable examples. Interpolation :{{…}} Interpolation refers to binding data with the help of curly brackets, i:e {{}}. We normally place the components property name in between the Open Curly Bracket {{ and close Curly Bracket }} . Synatx : {{component property name}} Ex: <p>Application Name is{{title}}</p> Remember anything you put in the Interpolation is known as Template Expression. And every Template Expression produces some value which can be used for, displaying data, assigning value to DOM properties and HTML attributes or ca...
Read more