Skip to main content

Angular 5 Hello world step by step

Image
By
Step 1: Prerequisites


Install Node.js & npm

Angular 4/5/6 set up environment


Install Angular CLI

Creating a new Angular app is a bit tedious job especially when you are new to Typescript as there will be lot of initial configurations involved. In order make it simpler Google came up with the utility called Angular CLI, using which we can create and manage our app from command line itself


In order to install Angular CLI open Node.js command prompt/command prompt and run the below command

npm install -g @angular/cli


Install Code Editor

 There are multiple code editors available in market

1. Microsoft Visual Code Studio
2. Brackets
3. Notepad++,
4. Sublime Text

As I m Fond of eclipse so I have installed angular plugin in eclipse as Angular editor.


 Step 2: Create Project

Lets build our First Angular 5 Hello World application


Create a new folder with folder name “Angular5HelloWorld” anywhere you want.

Open command prompt and navigate to the folder.


Use the ng new command to create our Hello World Angular Project ng new hello-world-app

 Ng stands for aNGular. NG is a core module, and this module contains all the directives that comes built in with the AngularJS library file.

D:\Rakesh_kumar_Singhania\Angular5HelloWorld>ng new hello-world-app


In case you get error that 'ng' is not recognized command

To solve that go to :

Control Panel > User accounts > Change my environmnet variables

and add the path to your AppData\Roaming\npm, in my case it was

C:\Users\rakeshkumar\AppData\Roaming\npm


Above command ng new hello-world-app creates a MAGIC...!!

This command add 1102 packages and all required dependencies for your first project.

Now your project 'hello-world-app' is successfully created.



Step 3: Run our first application

 Navigate to your newly created project and run below command to run your application.

D:\Rakesh_kumar_Singhania\Angular5HelloWorld\hello-world-app>ng serve

This command will start the server and will launch the default Angular Application build by Angular CLI.


If you see above screen after running command then congratulations everything is fine with your application and your are good to go.

Default url to launch application is : http://localhost:4200/


Step 4 :Output






Next :create a customize component
http://librakblog.blogspot.com/2018/07/create-new-component-in-angular.html










Labels:

Comments

Post a Comment

Popular posts from this blog

Extent report plugin for cucumber framework

By
Extent Reports  are the most popular  reporting  used with Selenium. ExtentReport API makes our life easy to generate interactive  report  with simple configuartions. It supports almost all Java and .NET test frameworks such as TestNG , JUnit , NUnit etc Here we are discussing about  a plugin which is build on  Extent Report specially for Cucumber. This plugin is used to simple out the implementation of  Extent Report  in  Cucumber Framework .  We are creating a maven project to implement the integration of our plugin with cucumber 1. Create new maven project in any tool eclipse/sts/intellij 2. Open pom.xml and update below entries. Step 1 : Add Cucumber Extent Reporter library to Maven Project Add  cucumber-extentsreport <dependency>      <groupId> com.vimalselvam </groupId>      <artifactId> cucumber-extentsreport </artif...
153 comments
Read more

java: You aren't using a compiler supported by lombok, so lombok will not work and has been disabled.

By
  In order to make projects compile with the existing builds of Lombok processor, as a workaround you can use the flag -Djps.track.ap.dependencies=false which should be added to File | Settings | Build, Execution, Deployment | Compiler | Build process VM options field. This will disable collection of dependencies specified by an annotation processor when Filer methods are called
Post a Comment
Read more

Execution default of goal org.springframework.boot:spring-boot-maven-plugin:1.2.3.RELEASE:repackage failed: Unable to find main class

By
Solutions:  Solution 1 : You needed to change the packaging parameter to jar from pom. Also, the repositories , pluginRepositories , the maven-compiler-plugin and the spring-boot-maven-plugin's version and executions weren't needed. Solution 2:  Try mvn install and see if it works Solution 3: Preview: <properties> <!-- The main class to start by executing java -jar --> <start-class> com.mycorp.starter.HelloWorldApplication </start-class> </properties> Solution 4: Enable the main() method in your Application.java. Configure spring-boot-maven-plugin to specify the class with the main class (Spring should find it anyway if you have one, but good to be explicit): Preview: <plugin> <groupId> org.springframework.boot </groupId> <artifactId> spring-boot-maven-plugin </artifactId> <version> ${spring-boot-version} </version>...
Post a Comment
Read more